/* FALAK POS — the till. Tokens and measurements follow design/erp/Falak POS.dc.html. */
:root{
  --bg:oklch(0.975 0.002 60);--ink:oklch(0.17 0.006 60);--or:oklch(0.68 0.19 45);--orT:oklch(0.95 0.035 50);--orD:oklch(0.52 0.16 42);
  --mu:oklch(0.48 0.01 60);--ln:oklch(0.91 0.004 60);--sf:oklch(0.96 0.003 60);--gr:oklch(0.5 0.12 155);--grT:oklch(0.95 0.04 155);
  --rd:oklch(0.55 0.19 28);--rdT:oklch(0.96 0.03 28);--d2:oklch(0.26 0.006 60);--dmu:oklch(0.78 0.005 60);
  --num:'IBM Plex Sans',sans-serif;--ez:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--orD)}a:hover{color:var(--ink)}
button{font-family:inherit;cursor:pointer;transition:transform .12s ease;color:inherit}
button:active{transform:scale(.96)}
button:disabled{cursor:default;opacity:.5}
input,textarea,select{font-family:inherit}
input:focus,select:focus{border-color:var(--ink)!important}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.ltr{direction:ltr;text-align:start}
.muted{color:var(--mu)}
.hide{display:none!important}

@keyframes fe-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fe-fade{from{opacity:0}to{opacity:1}}
@keyframes fe-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes fe-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes fe-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fe-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fe-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fe-ripple{from{transform:scale(1);opacity:.7}to{transform:scale(2.4);opacity:0}}
@keyframes fe-burst{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(1);opacity:0}}
@keyframes fe-modal{from{opacity:0;transform:translate(-50%,-50%) translateY(20px) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fe-slide{from{opacity:0;transform:translateX(var(--sx))}to{opacity:1;transform:none}}
@keyframes fe-toast{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fe-spin{to{transform:rotate(360deg)}}
@keyframes fe-print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fe-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}}

/* Shell */
#app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
#app.boot{align-items:center;justify-content:center}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--sf);border-top-color:var(--or);animation:fe-spin .8s linear infinite}
@media (min-width:760px){#app.wide-shell{height:100vh;overflow:hidden}}

.top{height:64px;flex:none;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--ink);color:#fff}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:32px;height:32px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.brand .mark i{width:10px;height:10px;border-radius:50%;background:var(--or)}
.brand .word{font-family:var(--num);font-weight:600;letter-spacing:.14em;font-size:15px;white-space:nowrap;direction:ltr}
.brand .word b{color:var(--or);font-weight:600}
.tabs{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0;padding:0 8px;scrollbar-width:none}
.tab{flex:none;height:40px;padding:0 14px;border:none;border-radius:10px;background:transparent;color:var(--dmu);font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.tab.on{background:#fff;color:var(--ink)}
.badge{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:11px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--or);color:var(--ink);display:flex;align-items:center;justify-content:center}
.net{height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--d2);background:transparent;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;flex:none}
.net.off{background:oklch(0.3 0.06 45)}
.net .dot{width:8px;height:8px;border-radius:50%;background:oklch(0.7 0.15 155);animation:fe-pulse 2s infinite}
.net.off .dot{background:var(--or)}
.net.busy .dot{background:var(--dmu)}
.ghost-d{height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--d2);background:transparent;color:#fff;font-size:13px;font-weight:600;flex:none}
.who{display:flex;align-items:center;gap:10px;padding-inline-start:12px;border-inline-start:1px solid var(--d2);flex:none}
.who .av{width:34px;height:34px;border-radius:17px;background:var(--or);color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:center}
.who .n{font-size:13px;font-weight:600;line-height:1.3}
.who .s{font-size:11px;color:var(--dmu);line-height:1.3}
@media (max-width:999px){.who{display:none}}

/* Buttons & inputs */
.btn{height:44px;padding:0 18px;border-radius:12px;font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:1px solid var(--ln);background:#fff;color:var(--ink)}
.btn.dark{border:none;background:var(--ink);color:#fff}
.btn.or{border:none;background:var(--or);color:var(--ink)}
.btn.red{color:var(--rd)}
.btn.sm{height:38px;font-size:13px}
.btn.grow{flex:1}
.field{height:44px;border-radius:12px;border:1px solid var(--ln);background:#fff;padding:0 14px;font-size:15px;outline:none;color:var(--ink);width:100%}
.field.num{font-family:var(--num)}
.chips{display:flex;gap:6px;overflow-x:auto;flex:none;padding-bottom:2px}
.chip{flex:none;height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--ln);background:#fff;color:var(--ink);font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .c{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:11px;opacity:.6}
.seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--sf);gap:2px}
.seg button{height:34px;padding:0 11px;border:none;border-radius:9px;font-size:13px;font-weight:600;background:transparent;color:var(--ink)}
.seg button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:9px;white-space:nowrap;background:var(--sf);color:var(--ink)}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.gr{background:var(--grT);color:var(--gr)}
.pill.rd{background:var(--rdT);color:var(--rd)}
.pill.or{background:var(--orT);color:var(--orD)}
.pill.mu{background:var(--sf);color:var(--mu)}
.pill.dk{background:var(--ink);color:var(--or)}

/* Tiles: initial letter on a category tone */
.tile{border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.t0{background:oklch(0.9 0.04 60);color:oklch(0.35 0.06 50)}
.t1{background:oklch(0.92 0.04 220);color:oklch(0.35 0.08 230)}
.t2{background:oklch(0.93 0.04 10);color:oklch(0.42 0.12 15)}
.t3{background:oklch(0.93 0.05 120);color:oklch(0.38 0.08 130)}
.t4{background:oklch(0.85 0.03 60);color:oklch(0.25 0.03 50)}
.t5{background:oklch(0.92 0.04 300);color:oklch(0.38 0.1 300)}
.t6{background:oklch(0.93 0.05 90);color:oklch(0.4 0.08 85)}
.t7{background:oklch(0.92 0.03 180);color:oklch(0.36 0.06 185)}
.t8{background:oklch(0.9 0.02 260);color:oklch(0.32 0.04 260)}
.t9{background:var(--orT);color:var(--orD)}
.tc{background:var(--sf);color:var(--ink)}

/* Shell: icon rail on tablet/desktop (start side), bottom bar + slim header on phones */
#main{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
.rail{flex:none;background:var(--ink);color:#fff;display:flex;z-index:40}
.rail .ic{flex:none}
.rail-brand .mark{width:40px;height:40px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.rail-brand .mark i{width:12px;height:12px;border-radius:50%;background:var(--or)}
.rtab,.rbtn{position:relative;border:none;background:transparent;color:var(--dmu);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;border-radius:14px;line-height:1.2;text-align:center}
.rtab:hover,.rbtn:hover{color:#fff;background:var(--d2)}
.rtab.on{background:var(--or);color:var(--ink)}
.rtab .badge{position:absolute;top:5px;inset-inline-end:8px;background:#fff;color:var(--ink)}
.rtab.on .badge{background:var(--ink);color:var(--or)}
.rbtn .txt{font-family:var(--num);font-size:13px;font-weight:700;height:22px;display:flex;align-items:center}
.rail .net{flex-direction:column;height:auto;padding:8px 4px;border:none;border-radius:14px;gap:4px;font-size:11px;width:100%}
.rail .net .pend{background:var(--or);color:var(--ink);border-radius:8px;padding:0 5px;font-size:10px}
.rail .who{border:none;padding:0;justify-content:center}
.mtop{display:none}
.ghost-d.icon{width:36px;padding:0;display:flex;align-items:center;justify-content:center}
.ghost-d.icon .ic{width:18px;height:18px}
@media (min-width:760px){
  #app.wide-shell{flex-direction:row}
  .rail{width:84px;flex-direction:column;align-items:stretch;padding:12px 8px;gap:10px;height:100vh}
  .rail-brand{display:flex;justify-content:center;padding-bottom:6px}
  .rail-tabs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;scrollbar-width:none}
  .rtab{min-height:62px;padding:6px 2px}
  .rail-foot{display:flex;flex-direction:column;gap:4px;align-items:stretch}
  .rbtn{min-height:52px;padding:4px 2px}
}
@media (min-width:760px) and (max-height:640px){.rtab{min-height:50px}.rtab .lb,.rbtn .lb{display:none}}
@media (max-width:759px){
  .mtop{display:flex;align-items:center;gap:8px;height:56px;padding:0 12px;background:var(--ink);color:#fff;flex:none;position:sticky;top:0;z-index:30}
  .mtop .net .lbl{display:none}
  .mtop .net{padding:0 10px}
  .rail{position:fixed;inset:auto 0 0 0;height:calc(64px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom)}
  .rail-brand,.rail-foot{display:none}
  .rail-tabs{flex:1;display:flex;overflow-x:auto;scrollbar-width:none}
  .rtab{flex:1 0 64px;border-radius:0;margin:6px 2px;border-radius:12px}
  #main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* Sell */
.sell{flex:1;min-height:0;display:grid;grid-template-columns:1fr}
@media (min-width:760px){.sell{grid-template-columns:minmax(0,1fr) 320px}}
@media (min-width:1100px){.sell{grid-template-columns:minmax(0,1fr) 380px}}
@media (min-width:1500px){.sell{grid-template-columns:minmax(0,1fr) 420px}}
.catalog{display:flex;flex-direction:column;min-height:0;min-width:0;padding:14px;gap:10px}
.search{display:flex;gap:8px;align-items:center}
.search .sbox{position:relative;flex:1}
.search .sbox svg{position:absolute;inset-inline-start:14px;top:13px;color:var(--mu)}
.search .field{height:44px;padding-inline-start:42px;background:#fff}
.search .btn{height:44px}
.chips .chip{height:38px}
.grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;align-content:start;padding:2px}
.prod{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:104px;padding:12px;border-radius:14px;border:2px solid transparent;text-align:start;transition:border-color .15s,box-shadow .15s,filter .15s}
.prod:hover{filter:brightness(.97)}
.prod.tc{background:#fff;border-color:var(--ln)}
.prod.in{border-color:var(--ink);box-shadow:0 6px 16px rgba(20,18,15,.12)}
.prod.out{opacity:.45}
.prod .nm{font-size:14px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.prod .row{display:flex;align-items:baseline;gap:6px}
.prod .pr{flex:1;font-size:16px;font-weight:700;color:var(--ink)}
.prod .st{font-size:11px;font-weight:600;opacity:.85}
.prod .st.low{color:var(--rd);opacity:1}
.prod .q{position:absolute;top:8px;inset-inline-end:8px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--ink);color:var(--or);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:fe-bump .3s ease}
.prod .nm{padding-inline-end:22px}
.anim .prod{animation:fe-up .35s var(--ez) backwards}
.empty{padding:60px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mu)}
.empty .dots{display:flex;gap:6px}
.empty .dots i{width:10px;height:10px;border-radius:50%;background:var(--ln)}
.empty .dots i:last-child{background:var(--or)}
.empty b{font-size:15px;font-weight:600;color:var(--ink)}
.empty span{font-size:13px}

.cartbar{display:none}
.cart{display:flex;flex-direction:column;min-height:0;background:#fff;border-inline-start:1px solid var(--ln)}
.otypes{display:flex;gap:6px;padding:12px 12px 0}
.otypes button{flex:1;height:58px;border-radius:12px;border:1.5px solid var(--ln);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:700;color:var(--mu)}
.otypes button .ic{width:20px;height:20px}
.otypes button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.otypes button.on .ic{color:var(--or)}
.otypes .cart-x{display:none}
.cart-head{padding:10px 14px;border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:8px}
.cart-head .who2{flex:1;min-width:0}
.cart-head .ord{font-size:12px;color:var(--mu)}
.cart-head .cust{border:none;background:none;padding:2px 0 0;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:6px;max-width:100%}
.cart-head .cust .ic{width:17px;height:17px;color:var(--mu)}
.cart-head .cust b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-head .cust span{font-size:12px;color:var(--orD);font-weight:600}
.cart-head .table-no{width:96px;height:38px;font-size:14px}
.picker{padding:10px 14px;border-bottom:1px solid var(--ln);background:var(--sf);display:flex;flex-direction:column;gap:6px;animation:fe-up .25s ease both;max-height:300px;overflow:auto}
.picker .field{height:38px;font-size:14px}
.opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:none;background:transparent;text-align:start;color:var(--ink)}
.opt.on{background:#fff}
.opt .tile{width:30px;height:30px;border-radius:8px;font-size:11px}
.opt .n{flex:1;font-size:14px;font-weight:600}
.opt .p{font-size:12px;color:var(--mu)}
.lines{flex:1;overflow:auto;padding:4px 0}
.line{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px dashed var(--ln)}
.line.new{animation:fe-slide .25s var(--ez) both}
.line .lq{width:30px;height:30px;border-radius:9px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.line .info{flex:1;min-width:0;border:none;background:none;padding:0;text-align:start;color:var(--ink)}
.line .n{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line .u{font-size:12px;color:var(--mu)}
.stepper{display:flex;align-items:center;gap:2px;background:var(--sf);border-radius:10px;padding:3px}
.stepper button{width:30px;height:30px;border-radius:8px;border:none;background:#fff;font-size:16px}
.stepper span{display:none}
.line .t{font-weight:700;min-width:58px;text-align:end}
.line{flex-wrap:wrap}
.line .lx{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-inline-start:40px}
.unitsw{display:inline-flex;padding:2px;border-radius:9px;background:var(--sf)}
.unitsw button{height:28px;padding:0 10px;border:none;border-radius:7px;background:transparent;font-size:12px;font-weight:700;color:var(--mu)}
.unitsw button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.altbtn{height:28px;padding:0 10px;border-radius:9px;border:1px dashed var(--orD);background:var(--orT);color:var(--orD);font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.rxtag{font-size:11px;font-weight:700;color:var(--rd);background:var(--rdT);border-radius:7px;padding:3px 8px}
.alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:50vh;overflow:auto}
.alt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border-radius:12px;border:none;text-align:start;color:var(--ink)}
.alt .n{font-size:14px;font-weight:700}
.alt .s{font-size:12px;opacity:.8}
.alt .p{font-size:16px;font-weight:700}
.rxlist{display:flex;flex-wrap:wrap;gap:6px}
.rxlist span{font-size:13px;font-weight:600;background:var(--rdT);color:var(--rd);border-radius:8px;padding:4px 10px}
.drugbox{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:var(--sf)}
.drugbox>span{font-size:13px;font-weight:700}
.held-btn{margin:0 14px 8px;height:38px;border-radius:10px;border:1px dashed var(--or);background:var(--orT);color:var(--ink);font-size:13px;font-weight:600}
.held{margin:0 14px 8px;display:flex;flex-direction:column;gap:6px}
.held button{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--ln);background:#fff;text-align:start;font-size:13px}
.held button span:first-child{flex:1;font-weight:600}
.sum{padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.sum .r{display:flex;font-size:13px;color:var(--mu)}
.sum .r span:first-child{flex:1}
.sum .r.disc{color:var(--gr)}
.sum .tot{display:flex;align-items:baseline;font-size:22px;font-weight:700;margin-top:2px}
.sum .tot span:first-child{flex:1}
.sum .tot small{font-size:13px;color:var(--mu);margin-inline-start:4px;font-weight:400}
.sum .acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:4px}
.act{height:48px;border-radius:12px;border:1px solid var(--ln);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:700;color:var(--ink)}
.act .ic{width:18px;height:18px}
.act.on{background:var(--grT);border-color:var(--gr);color:var(--gr)}
.act.red{color:var(--rd)}
.discs{display:flex;gap:6px;animation:fe-up .2s ease both}
.discs button{flex:1;height:38px;border-radius:10px;border:1px solid var(--ln);background:#fff;font-size:13px;font-weight:700;font-family:var(--num)}
.discs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pay{height:58px;border:none;border-radius:14px;background:var(--or);color:var(--ink);font-size:18px;font-weight:700;margin-top:4px;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px}
.pay.off{background:var(--ln);color:var(--mu)}

/* Phone: the order is a full-screen sheet opened from the bar above the tabs */
@media (max-width:759px){
  .catalog{padding:10px 10px 76px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px}
  .prod{min-height:92px;padding:10px}
  .prod .nm{font-size:13px}
  .prod .pr{font-size:15px}
  .cartbar{display:flex;position:fixed;inset-inline:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:35;height:56px;border:none;border-radius:16px;background:var(--or);color:var(--ink);align-items:center;gap:10px;padding:0 16px;font-size:15px;font-weight:700;box-shadow:0 12px 30px rgba(20,18,15,.25)}
  .cartbar.off{background:var(--ink);color:var(--dmu)}
  .cartbar .cb-n{flex:1;text-align:start}
  .cartbar .cb-c{background:var(--ink);color:var(--or);border-radius:10px;padding:1px 8px;font-size:13px}
  .cartbar .cb-t small{font-size:12px;font-weight:600}
  .cart{display:none;position:fixed;inset:0;z-index:50;border:none}
  .cart.open{display:flex;animation:fe-up .25s var(--ez) both}
  .otypes{padding-top:calc(10px + env(safe-area-inset-top))}
  .otypes .cart-x{display:flex;flex:0 0 48px;color:var(--ink)}
}

/* Pages */
.page{flex:1;overflow:auto;padding:clamp(14px,2.4vw,24px)}
.page-in{max-width:1300px;margin:0 auto}
.anim .page-in{animation:fe-up .35s var(--ez) both}
.page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.page-head h1{margin:0;font-size:24px;font-weight:700}
.page-head .tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.page-head .field{height:40px;border-radius:11px;font-size:14px;padding:0 12px;width:220px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--ln);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.anim .kpi{animation:fe-up .4s var(--ez) backwards}
.kpi .l{font-size:13px;color:var(--mu)}
.kpi .v{font-size:26px;font-weight:700}
.kpi .d{font-size:12px;font-weight:600;color:var(--mu);min-height:16px}
.kpi .d.gr{color:var(--gr)}.kpi .d.or{color:var(--or)}.kpi .d.rd{color:var(--rd)}
@media (max-width:759px){.kpis{grid-template-columns:1fr 1fr;gap:8px}.kpi{padding:12px 14px;border-radius:14px}.kpi .v{font-size:20px}.page-head .field,.bar-row .field{width:100%}}
.bar-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.bar-row .sp{flex:1}
.bar-row .field{height:40px;border-radius:11px;font-size:14px;padding:0 12px;width:220px}
.table{background:#fff;border:1px solid var(--ln);border-radius:18px;overflow:auto}
.tr{display:grid;gap:12px;align-items:center;padding:12px 16px;border:none;border-bottom:1px solid var(--ln);background:#fff;text-align:start;color:var(--ink);font-size:14px;width:100%;min-width:820px}
.tr.th{padding:10px 16px;font-size:12px;font-weight:600;color:var(--mu);background:var(--sf)}
button.tr:hover{background:var(--sf)}
.tr.inv{grid-template-columns:150px minmax(160px,1.5fr) 70px 100px 110px 110px 130px}
.tr.prd{grid-template-columns:minmax(200px,2fr) 110px 90px 90px 80px minmax(120px,1fr) 100px;padding:10px 16px}
.tr.prd.fresh{background:var(--orT)}
.tr .b{font-weight:600}.tr .s{color:var(--mu)}.tr .m{color:var(--mu);font-size:13px}
.tr .amt{font-weight:700}.tr .amt.neg{color:var(--rd)}
.pcell{display:flex;align-items:center;gap:10px}
.pcell .tile{width:36px;height:36px;border-radius:10px;font-size:13px}
.pcell .sku{font-size:11px;color:var(--mu)}
.meter{display:flex;align-items:center;gap:8px}
.meter .trk{flex:1;height:6px;border-radius:3px;background:var(--sf)}
.meter .fill{height:6px;border-radius:3px;background:var(--gr);transform-origin:var(--origin,right);animation:fe-bar .9s var(--ez) both}
.meter .fill.or{background:var(--or)}.meter .fill.rd{background:var(--rd)}
.meter .q{font-weight:600;width:40px;color:var(--gr)}
.meter .q.or{color:var(--or)}.meter .q.rd{color:var(--rd)}
.mini{height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--ln);background:#fff;font-size:12px;font-weight:600}
.none{padding:40px 16px;text-align:center;color:var(--mu);font-size:14px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.ccard{background:#fff;border:1px solid var(--ln);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
.anim .ccard{animation:fe-up .4s var(--ez) backwards}
.ccard .hd{display:flex;align-items:center;gap:12px}
.ccard .hd .tile{width:46px;height:46px;border-radius:13px;font-size:17px}
.ccard .hd .n{font-size:16px;font-weight:700}
.ccard .hd .ph{font-size:12px;color:var(--mu)}
.ccard .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.ccard .stats div{padding:10px;border-radius:12px;background:var(--sf)}
.ccard .stats small{display:block;font-size:11px;color:var(--mu)}
.ccard .stats b{font-size:15px;font-weight:700}
.ccard .stats b.rd{color:var(--rd)}
.ccard .ac{display:flex;gap:6px}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.panels.wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));margin-bottom:14px}
.panel{background:#fff;border:1px solid var(--ln);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{margin:0;font-size:15px;font-weight:700}
.panel .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--mu)}
.kv{display:flex;padding:9px 0;border-top:1px solid var(--ln);font-size:14px}
.kv span:first-child{flex:1;color:var(--mu)}
.kv .strong{font-weight:700}
.panel .note{font-size:13px;color:var(--mu);line-height:1.6;margin:0}
.counted{height:54px;border-radius:12px;border:1.5px solid var(--ln);padding:0 16px;font-size:24px;font-family:var(--num);outline:none;text-align:center;width:100%}
.variance{display:flex;align-items:center;padding:12px 14px;border-radius:12px;font-size:15px;font-weight:700;animation:fe-up .2s ease both}
.variance span:first-child{flex:1}
.variance.ok{background:var(--grT);color:var(--gr)}.variance.over{background:var(--orT);color:var(--orD)}.variance.short{background:var(--rdT);color:var(--rd)}
.prow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--ln)}
.prow .tile{width:32px;height:32px;border-radius:9px;font-size:12px}
.prow .n{flex:1;font-size:14px;font-weight:600;min-width:0}
.prow .o{font-size:12px;color:var(--mu)}
.prow .v{font-weight:700}
.prow .r{color:var(--mu);width:18px}
.prow .trk{width:min(240px,25%);height:8px;border-radius:4px;background:var(--sf)}
.prow .trk i{display:block;height:8px;border-radius:4px;background:var(--or);transform-origin:var(--origin,right);animation:fe-bar 1s var(--ez) both}
.prow .q{font-weight:700;width:46px;text-align:end}
.prow .rv{color:var(--mu);width:80px;text-align:end}
.hours{display:flex;align-items:flex-end;gap:6px;height:170px}
.hours i{flex:1;border-radius:6px 6px 2px 2px;background:var(--ink);transform-origin:bottom;animation:fe-grow .7s var(--ez) both;min-height:3px}
.hours i.now{background:var(--or)}
.hours i.later{opacity:.18}
.hours-l{display:flex;gap:6px;font-size:10px;color:var(--mu);margin-top:6px;font-family:var(--num)}
.hours-l span{flex:1;text-align:center}
.mix{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mix svg{transform:rotate(-90deg);flex:none}
.mix ul{flex:1;display:flex;flex-direction:column;gap:8px;min-width:140px;margin:0;padding:0;list-style:none}
.mix li{display:flex;align-items:center;gap:8px;font-size:13px}
.mix li i{width:10px;height:10px;border-radius:3px}
.mix li span{flex:1}
.mix li b{font-weight:600}
.stale{font-size:12px;color:var(--orD);font-weight:600}

/* Overlays */
.scrim{position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:60;animation:fe-fade .2s both}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:61;width:min(760px,96vw);max-height:94vh;overflow:auto;background:var(--bg);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:fe-modal .35s var(--ez) both}
.modal.sm{width:min(480px,94vw);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:none}
.modal.sm h2{margin:0;font-size:19px}
.modal label{display:flex;flex-direction:column;gap:6px}
.modal label>span{font-size:13px;font-weight:600}
.modal .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.modal .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal .acts{display:flex;gap:8px;margin-top:6px}
.modal .err{margin:0;font-size:13px;color:var(--rd);font-weight:600}
.check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:14px}
.pay-h{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--ln)}
.pay-h div{flex:1}
.pay-h small{font-size:13px;color:var(--mu)}
.pay-h .due{font-size:32px;font-weight:700}
.pay-h .due span{font-size:15px;color:var(--mu);font-weight:400}
.x{width:38px;height:38px;border-radius:19px;border:none;background:var(--sf);font-size:20px}
.pay-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;padding:20px 22px}
.methods{display:flex;flex-direction:column;gap:8px}
.method{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-radius:14px;border:2px solid var(--ln);background:#fff;color:var(--ink);text-align:start}
.method.on{border-color:var(--ink);background:var(--orT)}
.method i{width:10px;height:10px;border-radius:50%;background:var(--ln)}
.method.on i{background:var(--or)}
.method b{flex:1;font-size:15px;font-weight:600}
.method small{font-size:12px;color:var(--mu)}
.box{background:#fff;border:1px solid var(--ln);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:4px}
.box small{font-size:12px;color:var(--mu)}
.box .big{font-size:30px;font-weight:700;min-height:40px}
.box .chg{display:flex;font-size:15px;font-weight:700;color:var(--gr)}
.box .chg.rd{color:var(--rd)}
.box .chg span:first-child{flex:1}
.parts{gap:6px;padding:12px 14px}
.parts .h{font-size:12px;font-weight:700;color:var(--mu)}
.parts .p{display:flex;align-items:center;font-size:14px}
.parts .p span:first-child{flex:1}
.parts .p button{width:26px;height:26px;margin-inline-start:8px;border-radius:13px;border:none;background:var(--sf);font-size:14px;color:var(--rd)}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.quick button{flex:1;min-width:70px;height:40px;border-radius:10px;border:1px solid var(--ln);background:#fff;font-family:var(--num);font-size:14px;font-weight:600}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;direction:ltr}
.pad button{height:50px;border-radius:12px;border:none;background:#fff;font-family:var(--num);font-size:20px;font-weight:600}
.pad button.del{background:var(--sf)}
.card-wait{padding:28px 18px;align-items:center;gap:12px;text-align:center}
.card-wait .ic{position:relative;width:64px;height:64px;border-radius:18px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.card-wait .ic i{width:14px;height:14px;border-radius:50%;background:var(--or)}
.card-wait .ic s{position:absolute;inset:0;border-radius:18px;border:2px solid var(--or);animation:fe-ripple 1.6s ease-out infinite}
.card-wait b{font-size:17px}
.card-wait span{font-size:13px;color:var(--mu);line-height:1.6}
.pay-f{padding:0 22px 22px;display:flex;gap:8px;flex-wrap:wrap}
.pay-f .btn{height:54px}
.pay-f .go{flex:1;border:none;border-radius:14px;background:var(--or);font-size:17px;font-weight:700}
.done{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;padding:28px 24px;align-items:center}
.done-l{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.done-l h2{margin:12px 0 0;font-size:24px}
.done-l .chg{font-size:15px;color:var(--mu)}
.done-l .chg b{font-family:var(--num);color:var(--ink);font-size:22px}
.done-l .note{font-size:13px;color:var(--mu)}
.done-l .stack{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:10px}
.done-l .stack .row{display:flex;gap:8px}
.ok-art{position:relative;width:120px;height:120px}
.ok-art .dot{position:absolute;left:56px;top:56px;width:8px;height:8px;border-radius:50%;background:var(--or);animation:fe-burst .9s .35s var(--ez) both}
.ok-art .dot.k{background:var(--ink)}
.ok-art .disc{position:absolute;inset:0;border-radius:50%;background:var(--or);display:flex;align-items:center;justify-content:center;animation:fe-pop .6s .1s cubic-bezier(.2,1.5,.4,1) both}
.ok-art .disc path{stroke-dasharray:1;stroke-dashoffset:1;animation:fe-draw .45s .55s forwards}
.ok-art .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--or);animation:fe-ripple 2s 1s ease-out infinite}
.receipt{justify-self:center;width:280px;background:#fff;border-radius:6px;padding:18px 16px;box-shadow:0 10px 30px rgba(20,18,15,.12);font-family:'IBM Plex Mono','IBM Plex Sans Arabic',monospace;font-size:12px;line-height:1.7;animation:fe-print 1.2s .3s steps(18) both}
.receipt .c{text-align:center}
.receipt .store{font-family:'IBM Plex Sans Arabic';font-size:15px;font-weight:700}
.receipt .mu{color:var(--mu)}
.receipt hr{border:none;border-top:1px dashed var(--ln);margin:8px 0}
.receipt .r{display:flex;gap:6px}
.receipt .r .n{flex:1;font-family:'IBM Plex Sans Arabic'}
.receipt .r .t{width:60px;text-align:end}
.receipt .r.b{font-weight:700;font-size:14px}
.receipt .r span:first-child:not(.n){flex:1}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(420px,100vw);background:var(--bg);z-index:61;display:flex;flex-direction:column;animation:fe-slide .35s var(--ez) both}
.drawer .hd{display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid var(--ln);background:#fff}
.drawer .hd div{flex:1}
.drawer .hd small{font-size:13px;color:var(--mu)}
.drawer .hd b{display:block;font-size:18px}
.drawer .bd{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.drawer .ft{padding:14px 20px;border-top:1px solid var(--ln);background:#fff;display:flex;gap:8px}
.drawer .il{display:flex;gap:8px;font-size:14px;padding:4px 0}
.drawer .il span:first-child{flex:1}
.drawer .il .t{width:70px;text-align:end}
.drawer .tt{display:flex;font-size:16px;font-weight:700;padding-top:8px;border-top:1px solid var(--ln)}
.drawer .tt span:first-child{flex:1}
.banner{padding:12px 14px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.6}
.banner.gr{background:var(--grT)}.banner.or{background:var(--orT)}.banner.rd{background:var(--rdT);color:var(--rd)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 20px 40px rgba(0,0,0,.2);animation:fe-toast .35s cubic-bezier(.2,1.4,.4,1) both;max-width:92vw}
.toast i{width:7px;height:7px;border-radius:50%;background:var(--or);flex:none}

/* Not paired / fatal */
.gate{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.gate .card{width:min(460px,100%);background:#fff;border:1px solid var(--ln);border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;animation:fe-up .35s var(--ez) both}
.gate h1{margin:0;font-size:22px}
.gate p{margin:0;color:var(--mu);line-height:1.7;font-size:14px}

/* Printing: only the receipt */
#print-area{display:none}
@media print{
  @page{margin:4mm;size:80mm auto}
  body *{visibility:hidden}
  #print-area,#print-area *{visibility:visible}
  #print-area{display:block;position:absolute;inset:0 auto auto 0;width:72mm}
  #print-area .receipt{box-shadow:none;animation:none;width:100%;padding:0}
}

/* Lock screen (PIN) */
.gate .card.lock{align-items:center;text-align:center;width:min(520px,100%)}
.lock-users{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;width:100%}
.lock-user{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:16px;border:1.5px solid var(--ln);background:#fff}
.lock-user:hover{border-color:var(--ink)}
.lock-user b{font-size:15px}
.lock-user small{font-size:12px;color:var(--mu)}
.av{width:48px;height:48px;border-radius:24px;background:var(--or);color:var(--ink);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center}
.av.big{width:64px;height:64px;border-radius:32px;font-size:26px}
.lock-back{align-self:flex-start;border:none;background:none;color:var(--orD);font-weight:600}
.lock-dots{display:flex;gap:10px;margin:4px 0}
.lock-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ln)}
.lock-dots i.on{background:var(--ink);border-color:var(--ink)}
.lock-err{margin:0;color:var(--rd);font-weight:600;font-size:14px}
.lock-hint{margin:0;color:var(--mu);font-size:14px}
.lock-pad{width:min(300px,100%)}
.lock-pad button{background:var(--sf)}
.lock-pad button.ok{background:var(--or)}

/* Kitchen display */
.kds{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.kds-title{font-size:18px;color:#fff;margin-inline-start:14px}
.kds .net{cursor:default}
.kds-cols{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px;align-items:start}
@media (max-width:900px){.kds-cols{grid-template-columns:1fr}}
.kds-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.kds-col h2{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.kds-col h2 span{font-size:12px;background:var(--ink);color:#fff;border-radius:9px;padding:2px 8px}
.kds-empty{color:var(--mu);font-size:14px;margin:6px 0}
.ticket{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;border:2px solid var(--ln);background:#fff;text-align:start;color:var(--ink);animation:fe-up .3s var(--ez) both}
.ticket.new{border-color:var(--or)}
.ticket.ready{border-color:var(--gr);background:var(--grT)}
.ticket.late{border-color:var(--rd);box-shadow:0 0 0 3px var(--rdT)}
.ticket .th{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mu)}
.ticket .th b{font-size:22px;color:var(--ink)}
.ticket .th .t{margin-inline-start:auto;font-weight:700}
.ticket .tc{font-size:13px;font-weight:600}
.ticket ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:17px;font-weight:600}
.ticket li em{display:block;font-style:normal;font-size:13px;color:var(--orD);font-weight:600}
.ticket .go{align-self:stretch;text-align:center;padding:10px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;font-size:14px}
.ticket.ready .go{background:var(--gr)}

.line .info{border:none;background:none;padding:0;text-align:start;color:inherit}
.note-l{font-size:12px;color:var(--orD);font-weight:600}
.note-add{font-size:11px;color:var(--mu)}
.cart-head .table-no{width:64px;height:38px;font-size:14px;text-align:center}

/* Optical */
.rx-grid{display:grid;grid-template-columns:64px repeat(4,1fr);gap:6px;align-items:center;font-size:12px}
.rx-grid b{font-weight:700;color:var(--mu)}
.field.rx{height:40px;padding:0 6px;text-align:center;font-size:14px}
.rx-mini{font-size:13px;line-height:1.7;background:var(--sf);border-radius:10px;padding:8px 10px}

/* Fashion: size × colour picker */
.var-grid{display:grid;gap:6px;align-items:center;font-size:13px}
.var-grid b{font-weight:700;color:var(--mu);text-align:center}
.var-grid b:nth-child(n){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.var{height:44px;border-radius:10px;border:1.5px solid var(--ln);background:#fff;font-family:var(--num);font-weight:700;font-size:15px;position:relative}
.var.in{border-color:var(--ink);background:var(--orT)}
.var.out{opacity:.35}
.var i{position:absolute;top:2px;inset-inline-end:4px;font-size:10px;font-style:normal;color:var(--orD)}

.gift-code{font-size:28px;font-weight:700;letter-spacing:.14em;text-align:center;padding:16px;border-radius:14px;background:var(--orT);direction:ltr}