:root{--bg:#f6f5f3;--surface:#fff;--card:#fff;--border:#e9e7e2;--text:#1c1a17;--muted:#645f55;--accent:#c8102e;--accent-fg:#fff;--accent-soft:rgba(200,16,46,.1);--success:#4c8b2b;--danger:#dc2626}
[data-brand=light]{--bg:#0e1110;--surface:#171a19;--card:#171a19;--border:#262b29;--text:#f2f5f3;--muted:#98a29c;--accent:#7dbf3b;--accent-fg:#0e1110;--accent-soft:rgba(125,191,59,.14);--success:#7dbf3b;--danger:#f0776b}
[data-brand=sweet]{--bg:#f7efdd;--surface:#fffaf0;--card:#fffaf0;--border:#ecdfc4;--text:#2a2118;--muted:#8a7a5f;--accent:#eaa41d;--accent-fg:#2a2118;--accent-soft:rgba(234,164,29,.16);--success:#4c8b2b;--danger:#dc2626}
[data-brand=rishy]{--bg:#F6F3EC;--surface:#fff;--card:#fff;--border:#e6e1d4;--text:#20241a;--muted:#6b6a5c;--accent:#667A3E;--accent-fg:#fff;--accent-soft:rgba(102,122,62,.12);--success:#4c8b2b;--danger:#dc2626}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
.muted{color:var(--muted)}.small{font-size:12px}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;width:100%;max-width:350px}
.login-title{font-size:20px;font-weight:700;margin-bottom:2px}
.inp{width:100%;height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font:inherit;background:var(--surface);color:var(--text);margin-bottom:10px}
.inp:focus{outline:none;border-color:var(--accent)}
.btn-primary{width:100%;border:0;border-radius:10px;background:var(--accent);color:var(--accent-fg);font:inherit;font-weight:600;font-size:14px;padding:11px;cursor:pointer;margin-top:4px}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.err{background:rgba(220,38,38,.12);color:var(--danger);font-size:12.5px;padding:8px 10px;border-radius:8px;margin-bottom:10px}
.hint{margin-top:14px;text-align:center;line-height:1.8}
.appwrap{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-inline-end:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.brandmark{display:flex;justify-content:center;padding:6px 4px 16px}
.brandmark img{max-height:76px;width:auto;object-fit:contain}
.nav a{display:block;padding:9px 12px;border-radius:9px;color:var(--muted);font-size:13.5px;cursor:pointer;text-decoration:none}
.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:500}
.side-bottom{margin-top:auto;border-top:1px solid var(--border);padding-top:12px;display:flex;align-items:center;gap:8px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.main{padding:20px 24px}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.topbar h1{font-size:19px;margin:0;font-weight:600}
.switch{display:flex;gap:4px;border:1px solid var(--border);border-radius:10px;padding:4px;background:var(--surface)}
.switch button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;padding:6px 12px;border-radius:7px;cursor:pointer}
.switch button.active{background:var(--accent);color:var(--accent-fg);font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.kpi .big{font-size:23px;font-weight:600;margin-top:6px}
.row1{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.card h3{margin:0 0 4px;font-size:14px;font-weight:600}
.bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:180px;margin-top:14px}
.barcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.barwrap{width:100%;display:flex;align-items:flex-end;justify-content:center;height:130px}
.bar{width:100%;max-width:26px;background:var(--accent);border-radius:6px 6px 0 0;min-height:2px}
.barval{font-size:10px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
th{text-align:start;font-weight:400;color:var(--muted);font-size:11.5px;padding:8px 0}
td{padding:9px 0;border-top:1px solid var(--border)}
td.b{font-weight:600}
.toprow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border)}
.toprow:first-child{border-top:0}
.rank{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.grow{flex:1;min-width:0}.tname{font-size:13px;font-weight:500}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filters button{border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:12.5px;padding:6px 13px;border-radius:20px;cursor:pointer}
.filters button.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.menugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.mcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.mname{font-size:13.5px;font-weight:500}
.mrow{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.price{font-weight:600;font-size:14px}
.toggle{width:38px;height:22px;border-radius:20px;background:var(--border);position:relative;cursor:pointer;flex:none}
.toggle.on{background:var(--success)}
.toggle .knob{position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.toggle.on .knob{inset-inline-start:18px}
.addcard{border:1.5px dashed var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;min-height:150px;font-size:13px}
.mini{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:11.5px;padding:5px 10px;border-radius:7px;cursor:pointer}
.mini.danger{color:var(--danger);border-color:var(--danger)}
.pos{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer}
.pcard:hover{border-color:var(--accent)}
.pfoot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.pprice{font-weight:600;font-size:13px}
.addbtn{width:26px;height:26px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-fg);font-size:16px;cursor:pointer;line-height:1}
.cart{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;position:sticky;top:16px}
.otypes{display:flex;gap:4px;background:var(--bg);border-radius:9px;padding:4px;margin:10px 0 12px}
.otypes button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;padding:6px;border-radius:6px;cursor:pointer}
.otypes button.active{background:var(--surface);color:var(--text);font-weight:500}
.otbl-inp{width:100%;box-sizing:border-box;border:1.5px solid var(--accent);background:var(--surface);color:var(--text);font:inherit;font-size:13px;padding:9px 12px;border-radius:9px;margin:0 0 12px;text-align:center}
.otbl-inp:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.citem{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--border)}
.citem:first-child{border-top:0}
.qty{display:flex;align-items:center;gap:8px}
.qbtn{width:22px;height:22px;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;color:var(--text);font-size:13px}
.sumrow{display:flex;justify-content:space-between;font-size:12.5px;margin-top:8px;color:var(--muted)}
.sumtot{display:flex;justify-content:space-between;font-size:15px;font-weight:700;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.cartempty{color:var(--muted);font-size:12.5px;text-align:center;padding:24px 0}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:60px 20px;color:var(--muted);text-align:center}
@media(max-width:900px){.appwrap{grid-template-columns:1fr}.sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;border-inline-end:0;border-bottom:1px solid var(--border)}.brandmark{padding:4px 8px}.brandmark img{max-height:44px}.side-bottom{margin-inline-start:auto}.kpis{grid-template-columns:repeat(2,1fr)}.row1,.pos{grid-template-columns:1fr}.cart{position:static}}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:center}
.formgrid .inp{margin-bottom:0}
.lbl{display:block;font-size:12.5px;color:var(--muted);margin:6px 0 4px}
select.inp{cursor:pointer}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;width:360px;max-width:94vw;max-height:88vh;overflow:auto}
.receipt-line{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0}

/* ============================================================
   Redesign + motion layer (overrides the base above)
   ============================================================ */
:root{--shadow-1:0 1px 2px rgba(20,15,10,.05),0 10px 26px -14px rgba(20,15,10,.16);--shadow-2:0 12px 34px -12px rgba(20,15,10,.24);--rr:16px}
[data-brand=light]{--shadow-1:0 1px 2px rgba(0,0,0,.35),0 12px 30px -16px rgba(0,0,0,.7);--shadow-2:0 16px 40px -14px rgba(0,0,0,.75)}
body{background:radial-gradient(130% 80% at 100% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 55%),var(--bg)}
.appwrap{grid-template-columns:240px 1fr}
.sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface));padding:18px 14px;gap:4px}
.brandmark img{max-height:82px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.16))}
.nav a{position:relative;padding:11px 14px;font-size:14px;font-weight:500;transition:background .18s,color .18s}
.nav a:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text)}
.nav a.active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:700}
.nav a.active::before{content:'';position:absolute;inset-inline-start:4px;inset-block:9px;width:3.5px;border-radius:3px;background:var(--accent)}
.avatar{font-weight:800;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}
.main{padding:22px 26px}
.topbar h1{font-size:22px;font-weight:800;letter-spacing:-.3px}
.switch{box-shadow:var(--shadow-1)}.switch button{transition:.18s}.switch button.active{box-shadow:0 5px 13px -5px var(--accent)}
.card,.kpi,.mcard,.cart,.login-card,.modal{border-radius:var(--rr);box-shadow:var(--shadow-1)}
.card,.kpi,.mcard{animation:dIn .5s cubic-bezier(.2,.75,.3,1) backwards}
.card:hover,.kpi:hover,.mcard:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.kpi{padding:16px 18px;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;inset-block-start:-42%;inset-inline-end:-12%;width:92px;height:92px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.kpi .big{font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.1s}.kpi:nth-child(4){animation-delay:.15s}
.card h3{font-size:15px;font-weight:800}
@keyframes dIn{from{opacity:0;transform:translateY(14px)}}
.bar{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));transform-origin:bottom;animation:barGrow .8s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes barGrow{from{transform:scaleY(0)}}
.rank{font-weight:800}
table{font-size:13.5px}tbody tr{transition:background .15s}tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}td{padding:11px 4px}th{padding:8px 4px}
.btn-primary{border-radius:12px;padding:13px;font-weight:700;font-size:14.5px;box-shadow:0 10px 24px -12px var(--accent);transition:.18s}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.mini{border-radius:9px;font-weight:600;transition:.15s}.mini:hover{border-color:var(--accent);color:var(--accent)}
.filters button{transition:.18s}.filters button.active{box-shadow:0 5px 14px -6px var(--accent)}
.pcard{border-radius:13px;transition:.18s}.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.addbtn{transition:.18s}.addbtn:hover{filter:brightness(1.08);transform:scale(1.06)}
.toggle .knob{transition:inset-inline-start .22s cubic-bezier(.4,1.4,.5,1),background .2s}
.login-wrap{background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--bg)}
.login-card{padding:32px 28px;box-shadow:var(--shadow-2);animation:dIn .55s cubic-bezier(.2,.9,.3,1) backwards}
.login-title{font-size:22px;font-weight:800}
.inp{height:46px;border-radius:12px;border-width:1.5px;transition:.18s}
.inp:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}

/* new-order alarm banner */
.newbar{position:fixed;inset-block-start:16px;inset-inline:16px;max-width:480px;margin-inline:auto;z-index:200;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));color:#fff;
  border-radius:18px;padding:15px 17px;box-shadow:0 24px 60px -14px rgba(0,0,0,.55);
  transform:translateY(-170%);opacity:0;transition:transform .45s cubic-bezier(.2,1.25,.4,1),opacity .3s}
.newbar.show{transform:translateY(0);opacity:1}
.newbar.show::before{content:'';position:absolute;inset:-3px;border-radius:21px;background:var(--accent);opacity:.4;z-index:-1;animation:barPulse 1.2s ease-in-out infinite}
@keyframes barPulse{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.45;transform:scale(1.015)}}
.newbar__head{display:flex;align-items:center;gap:11px;font-size:1.08rem;font-weight:800}
.newbar__bell{font-size:1.55rem;display:inline-block;transform-origin:50% 12%;animation:bell .9s ease-in-out infinite}
@keyframes bell{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-15deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
.newbar__c{display:block;font-size:.78rem;opacity:.88;font-weight:500}
.newbar__head--online{color:#0b7a3b}
.obadge{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;margin-inline-start:6px;vertical-align:middle;white-space:nowrap}
.obadge--online{background:#e6f4ea;color:#0b7a3b;border:1px solid #b7e3c7}
.newbar__list{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.newbar__o{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.15);border-radius:11px;padding:9px 11px}
.newbar__no{font-weight:800}.newbar__meta{font-size:.76rem;opacity:.9}
.newbar__ack{border:0;background:#fff;color:var(--accent);font-weight:800;font-size:.82rem;padding:8px 13px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:.15s}
.newbar__ack:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
@media(max-width:560px){.newbar__o{flex-wrap:wrap}}

/* ---- menu product photos: POS grid, cart, order receipt, new-order alert ---- */
.pcard{display:flex;flex-direction:column}
.pthumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px;margin-bottom:8px;background:var(--surface)}
.pthumb--none{width:100%;aspect-ratio:16/10;border-radius:9px;margin-bottom:8px;background:linear-gradient(135deg,var(--surface),var(--border))}
.pname{flex:1}
.citem__thumb{width:42px;height:42px;object-fit:cover;border-radius:9px;flex:0 0 auto}
.citem__thumb--none{width:42px;height:42px;border-radius:9px;flex:0 0 auto;background:var(--border)}
.receipt-item{align-items:center;gap:9px}
.receipt-thumb{width:44px;height:44px;object-fit:cover;border-radius:9px;flex:0 0 auto}
.receipt-thumb--none{display:none}
.receipt-item .grow{flex:1;text-align:start}
.newbar__thumbs{display:flex;gap:4px;flex:0 0 auto}
.newbar__th{width:38px;height:38px;object-fit:cover;border-radius:8px;border:2px solid rgba(255,255,255,.55);box-shadow:0 2px 6px rgba(0,0,0,.22)}
.newbar__th--none{display:none}
.newbar__o{cursor:pointer;transition:background .15s}
.newbar__o:hover{background:rgba(255,255,255,.26)}

/* ---- order aging / delay indicator ---- */
.age{font-size:11.5px;font-weight:600;white-space:nowrap}
.age--ok{color:var(--muted)}
.age--warn{color:#eaa41d}
.age--late{color:var(--danger);font-weight:800}
tr.row-late{background:rgba(220,38,38,.07)}
tr.row-late td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.newbar .age{color:#fff;font-weight:700;opacity:.95}

/* ---- estimated prep-time (ETA) chip ---- */
.etachip{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);margin-top:2px}
.eta--over{color:var(--danger)}
.etaedit,.etaedit-ic{background:none;border:0;cursor:pointer;color:var(--muted);font-size:12px;margin-inline-start:3px;padding:0}
.etaedit{color:var(--accent);font-weight:700}
.etaedit-ic:hover{color:var(--accent)}

/* ---- reports header ---- */
.rephead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.rephead h2{font-size:18px;font-weight:800}
.repbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.repmodes{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.repmodes button{border:0;background:none;padding:7px 16px;cursor:pointer;color:var(--muted);font:inherit;font-weight:700}
.repmodes button.active{background:var(--accent);color:var(--accent-fg)}
.repdate{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.repdate input{border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:var(--surface);color:var(--text);font:inherit}
/* ===== Kitchen Display System (KDS) ===== */
.kds{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.kticket{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;border-top:5px solid var(--muted)}
.kticket.kt--new{border-top-color:var(--accent)}
.kticket.kt--prep{border-top-color:#eaa41d}
.kticket.kt--warn{border-top-color:#eaa41d;box-shadow:0 0 0 1px rgba(234,164,29,.5)}
.kticket.kt--late{border-top-color:var(--danger);box-shadow:0 0 0 2px rgba(220,38,38,.4);animation:ktpulse 1.6s ease-in-out infinite}
@keyframes ktpulse{0%,100%{box-shadow:0 0 0 2px rgba(220,38,38,.4)}50%{box-shadow:0 0 0 6px rgba(220,38,38,.12)}}
.khead{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border)}
.kno{font-weight:700;font-size:16px}
.ktag{font-size:11px;background:var(--accent-soft);color:var(--accent);padding:2px 9px;border-radius:20px}
.kage{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--muted)}
.kticket.kt--warn .kage{color:#eaa41d}.kticket.kt--late .kage{color:var(--danger)}
.kbody{padding:10px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.kitem{display:flex;align-items:center;gap:9px;font-size:14.5px;cursor:pointer;padding:3px 0;user-select:none}
.kitem .kq{font-weight:700;color:var(--accent);min-width:30px}
.kitem .kn{font-weight:500}
.kitem.checked{opacity:.4;text-decoration:line-through}
.kfoot{padding:11px 14px;border-top:1px solid var(--border)}
.kbtn{width:100%;border:0;border-radius:10px;font:inherit;font-weight:700;font-size:14.5px;padding:12px;cursor:pointer}
.kbtn.kstart{background:var(--accent);color:var(--accent-fg)}
.kbtn.kready{background:var(--success);color:#fff}
.kbtn:active{transform:scale(.98)}
.kbtn:disabled{opacity:.6}
.kds-empty{text-align:center;color:var(--muted);padding:70px 20px;font-size:16px}
.kds-empty__ic{display:block;font-size:44px;margin-bottom:12px}
@media(max-width:640px){.kds{grid-template-columns:1fr 1fr}}
/* ===== advanced inventory + purchases + food cost ===== */
.invbar{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.invbar b{color:var(--text);font-size:14px}
.invact{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.mini{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:11.5px;padding:4px 9px;border-radius:7px;cursor:pointer}
.mini--warn{color:var(--danger);border-color:rgba(220,38,38,.3)}
.prowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.btn-sm{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:13px;padding:9px 16px;border-radius:10px;cursor:pointer}
.btn-sm--accent{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.prow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.prow2{grid-template-columns:1fr}}
/* ===== POS product variants (sizes) ===== */
.pcard{position:relative}
.pcard__v{position:absolute;top:6px;inset-inline-start:6px;font-size:10px;font-weight:700;background:var(--accent);color:var(--accent-fg);padding:2px 8px;border-radius:20px}
.vpop{position:fixed;inset:0;z-index:210;display:none}
.vpop.show{display:block}
.vpop__scrim{position:absolute;inset:0;background:rgba(15,15,15,.5)}
.vpop__box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(360px,92vw);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.vpop__h{font-weight:700;font-size:15px;margin-bottom:12px}
.vpop__opt{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:14px;padding:12px 14px;border-radius:11px;cursor:pointer;margin-bottom:8px}
.vpop__opt:hover{border-color:var(--accent)}
.vpop__p{color:var(--accent);font-weight:700}
.vlist{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.vchip{font-size:11px;background:var(--accent-soft);color:var(--accent);padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}
.vchip__x{border:none;background:transparent;color:var(--danger);font-weight:800;font-size:13px;cursor:pointer;padding:0;margin-inline-start:2px;line-height:1}
/* POS customization sheet: size (single) + modifier groups honouring min/max, live price */
.vpop__box.cz{padding:0;width:min(430px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.cz .vpop__h{padding:16px 16px 12px;border-bottom:1px solid var(--border);margin:0}
.cz__body{overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:15px}
.cz__g{display:flex;flex-direction:column;gap:8px}
.cz__gh{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}
.cz__req{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:2px 8px;border-radius:20px}
.cz__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.cz__o{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:13px;padding:10px 12px;border-radius:11px;cursor:pointer;transition:border-color .12s,background .12s}
.cz__o:hover{border-color:var(--accent)}
.cz__o.on{border-color:var(--accent);background:var(--accent-soft)}
.cz__o .cz__p{color:var(--accent);font-weight:700;font-size:12px;white-space:nowrap}
.cz__add{margin:0;border-radius:0;padding:15px;font-size:15px}
.cz__add:disabled{opacity:.5;cursor:not-allowed}
/* modifiers admin screen */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.modcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.modcard__h{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.modcard__h .b{font-size:15px}
.modcard__meta{font-size:11.5px;color:var(--muted)}

/* ===================== وضوح وتكبير · Clarity & enlarge pass (bigger text, buttons ≥44px, more breathing room) ===================== */
body{font-size:15px;line-height:1.55}
.small{font-size:13px}
.appwrap{grid-template-columns:252px 1fr}
.sidebar{padding:18px 14px;gap:4px}
.brandmark img{max-height:90px}
.nav a{font-size:15.5px;padding:13px 15px;border-radius:11px;line-height:1.2}
.side-bottom{padding-top:14px;gap:10px}
.avatar{width:38px;height:38px;font-size:15px}
.main{padding:26px 30px}
.topbar{margin-bottom:22px}
.topbar h1{font-size:25px}
.switch button{font-size:14.5px;padding:10px 17px;border-radius:9px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{padding:19px 22px;border-radius:16px}
.kpi .big{font-size:31px;margin-top:8px}
.kpi .small{font-size:14px}
.card{padding:20px 22px;border-radius:16px}
.card h3{font-size:17.5px;margin-bottom:8px}
table{font-size:15px}
th{font-size:13px;padding:12px 0}
td{padding:14px 0}
.filters{gap:8px;margin-bottom:16px}
.filters button{font-size:14.5px;padding:10px 18px}
.mini{font-size:13.5px;padding:10px 15px;border-radius:9px;min-height:40px}
.mini svg,.mini .ico{vertical-align:middle}
.btn-primary{font-size:15.5px;padding:14px}
.btn-sm{font-size:14.5px;padding:11px 17px;border-radius:10px;min-height:42px}
.inp{height:48px;font-size:15px;border-radius:11px}
/* Menu manager — bigger, clearer (تكبير القوائم) */
.menugrid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.mcard{padding:17px 18px;border-radius:16px}
.mname{font-size:16.5px;font-weight:600}
.mcard .small{font-size:13px}
.price{font-size:18px}
.mactions{gap:8px;margin-top:13px;flex-wrap:wrap}
.toggle{width:48px;height:27px}
.toggle .knob{width:23px;height:23px}
.toggle.on .knob{inset-inline-start:23px}
.addcard{min-height:170px;font-size:15px;border-radius:16px}
/* POS — bigger product cards + add buttons */
.pos{grid-template-columns:1fr 344px}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.pcard{padding:12px;border-radius:14px}
.pname{font-size:15.5px;font-weight:500;margin-top:7px}
.pprice{font-size:15.5px}
.addbtn{width:42px;height:42px;font-size:23px;border-radius:12px}
.cart{padding:18px 20px}
.otypes button{font-size:14.5px;padding:10px 8px}
.citem{font-size:14px}
.empty,.cartempty{font-size:15px;padding:22px}
h2,h3{line-height:1.3}
/* Recipe (BOM) editor modal */
.vpop__box.rcp{width:min(640px,95vw);max-height:88vh;display:flex;flex-direction:column;padding:0}
.rcp .vpop__h{padding:16px 18px;border-bottom:1px solid var(--border);margin:0;font-size:16px}
.rcp__body{overflow-y:auto;padding:14px 18px}
.rcp__t{width:100%;font-size:14px;margin:0}
.rcp__t th{font-size:12.5px;padding:9px 6px;color:var(--muted)}
.rcp__t td{padding:11px 6px;border-top:1px solid var(--border)}
.rcp-q,#rcpqty,#rcpsel{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;padding:9px 11px;border-radius:9px}
.rcp-q:focus,#rcpqty:focus,#rcpsel:focus{outline:none;border-color:var(--accent)}
.rcp__add{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
#rcpsel{flex:1;min-width:170px}#rcpqty{width:110px}
.rcp__add input{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;padding:9px 11px;border-radius:9px}
.rcp__add input:focus{outline:none;border-color:var(--accent)}
#szName{flex:1;min-width:150px}#szPrice{width:120px}
.rcp__foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:15px 18px;border-top:1px solid var(--border);font-size:14px;background:var(--bg)}
.rcp__foot b{font-size:15.5px}
.rcp__foot .btn-primary{margin-inline-start:auto}
/* professional recipe builder */
.vpop--pay .vpop__box.rcp{position:relative;top:auto;left:auto;transform:none;margin:auto}
.vpop__box.rcp--pro{width:min(760px,96vw)}
.rcp__yield{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;background:var(--accent-soft);border-radius:12px;padding:10px 14px}
.rcp__yield input{width:100px}
.rcp__add #rcpnew{white-space:nowrap}
.rcp__foot--pro{gap:8px 22px}
.rcp__sum{display:flex;flex-direction:column;gap:1px}
.rcp__sum span{font-size:11px;color:var(--muted)}
.rcp__sum b{font-size:15px}
.rcp__sum--hero b{font-size:21px;color:var(--accent);font-weight:900;line-height:1}
.rcp__sum--hero span{color:var(--accent);font-weight:700}
.rcp__foot--pro .btn-primary{margin-inline-start:auto;max-width:80px;align-self:center}
@media(max-width:560px){.rcp__foot--pro{gap:8px 16px}}
/* Transfer modal labels */
.trlbl{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;margin-bottom:13px}
.trlbl select,.trlbl input{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14.5px;padding:11px 12px;border-radius:10px;width:100%;box-sizing:border-box}
.trlbl select:focus,.trlbl input:focus{outline:none;border-color:var(--accent)}
/* language toggle */
.langbtn{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer;min-width:44px;min-height:40px}
.langbtn:hover{border-color:var(--accent);color:var(--accent)}
/* order status badge */
.stbadge{display:inline-block;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;white-space:nowrap;line-height:1.5}
/* collapsible sidebar */
.appwrap{transition:grid-template-columns .28s ease}
.sidebar{overflow:hidden;transition:opacity .18s ease,padding .28s ease}
.appwrap.navhidden{grid-template-columns:0 1fr}
.appwrap.navhidden .sidebar{opacity:0;padding-inline:0;pointer-events:none}
.topbar__l{display:flex;align-items:center;gap:12px;min-width:0}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:11px;cursor:pointer;flex:none;transition:.15s}
.navtoggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* ===== Premium cashier POS checkout modal — clear number hierarchy, operational ===== */
.vpop--pay.show{display:flex;align-items:center;justify-content:center;padding:14px;overflow-y:auto}   /* robust centering — never overflows tablet/mobile */
.vpop--pay .vpop__box.paysheet{position:relative;top:auto;left:auto;transform:none;margin:auto}
.vpop__box.paysheet{width:min(460px,95vw);max-height:94vh;overflow-y:auto;padding:0;border-radius:20px;box-shadow:0 26px 70px rgba(45,28,10,.32)}
.paysheet .licon{display:block}
.paysheet [class*="-v"],.pay__in,.pay__total-v,.pay__cardinfo-a{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.pay__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 2px}
.pay__title{font-size:18px;font-weight:800;line-height:1.3}
.pay__sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.pay__x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.pay__x:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
/* 1 · amount due — big reference */
.pay__total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 22px 16px;padding:16px 20px;background:var(--accent-soft);border-radius:16px}
.pay__total-l{font-size:14px;font-weight:600}
.pay__total-v{font-size:34px;font-weight:900;color:var(--accent);line-height:1}
.cur{font-size:.5em;font-weight:700;opacity:.85}
/* 2 · method toggle */
.pay__methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 22px 16px}
.pay__methods--3{grid-template-columns:1fr 1fr 1fr}
.pay__methods--3 .paycard{flex-direction:column;gap:6px;padding:13px 6px;font-size:14px}
.paycard{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 12px;border:2px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:15.5px;font-weight:700;border-radius:14px;cursor:pointer;transition:border-color .16s,background .16s}
.paycard:hover{border-color:var(--accent)}
.paycard.on{border-color:var(--accent);background:var(--accent-soft)}
.paycard__i{color:var(--muted);transition:color .16s}
.paycard.on .paycard__i{color:var(--accent)}
.paycard__chk{position:absolute;top:8px;inset-inline-start:8px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:none;align-items:center;justify-content:center}
.paycard.on .paycard__chk{display:flex}
/* 3 · amount received */
.pay__cash{padding:0 22px 4px}
.pay__lbl{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.pay__inwrap{position:relative;display:flex;align-items:center}
.pay__in{width:100%;box-sizing:border-box;border:2px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:30px;font-weight:800;padding:14px 62px 14px 18px;border-radius:14px}
.pay__in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pay__cur{position:absolute;inset-inline-end:18px;font-size:15px;font-weight:700;color:var(--muted);pointer-events:none}
.pay__quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}
.pay__q{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;padding:11px 6px;border-radius:11px;cursor:pointer;transition:.15s;white-space:nowrap}
.pay__q:hover{border-color:var(--accent);color:var(--accent)}
.pay__q.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* 4 · the result — change is the hero */
.pay__state{margin-top:14px;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.pay__state--hint{background:var(--bg);color:var(--muted);font-size:13.5px;font-weight:500;padding:15px}
.pay__state--ok{background:#e3f5e9;color:#0e7a38}
.pay__state--done{background:#e3f5e9;color:#0e7a38;flex-direction:row;justify-content:center;gap:8px;font-size:15.5px;font-weight:800;padding:16px}
.pay__state--warn{background:#fdeaea;color:#b5271f}
.pay__state-l{font-size:13px;font-weight:600;opacity:.9}
.pay__state-v{font-size:37px;font-weight:900;line-height:1}
.pay__state--warn .pay__state-v{font-size:30px}
/* card payment — operational: amount to collect · step trail · live status · trust (theme-safe via tokens) */
.pay__cardwrap{padding:2px 22px 4px;display:flex;flex-direction:column;gap:14px}
.pay__cardbox{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:15px 18px}   /* distinct from the golden method card */
.pay__cardbox-h{display:flex;align-items:center;gap:9px}
.pay__cardbox-i{display:inline-flex;color:var(--accent)}
.pay__cardbox-t{font-size:13.5px;font-weight:700;color:var(--text)}
.pay__cardbox-a{font-size:28px;font-weight:900;color:var(--accent);line-height:1;margin:9px 0 6px}   /* smaller than the 34px order total → clear hierarchy */
.pay__cardbox-hint{font-size:12px;color:var(--muted);line-height:1.55}
/* step trail: اختيار الطريقة › تحصيل المبلغ › تأكيد العملية */
.pay__steps{display:flex;align-items:center;gap:6px}
.pay__step{display:flex;align-items:center;gap:7px;flex:none}
.pay__step-d{width:22px;height:22px;flex:none;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:.18s}
.pay__step-l{font-size:11.5px;font-weight:600;color:var(--muted);transition:.18s;white-space:nowrap}
.pay__step.is-active .pay__step-d{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pay__step.is-active .pay__step-l{color:var(--text)}
.pay__step.is-done .pay__step-d{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
.pay__step-sep{flex:1;height:1.5px;background:var(--border);border-radius:2px;min-width:6px}
/* live status — subtle, one glance */
.pay__cardstate{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;font-size:14px;font-weight:700;transition:.18s}
.pay__cardstate-d{width:9px;height:9px;flex:none;border-radius:50%;background:currentColor}
.pay__cardstate--ready{background:var(--bg);color:var(--muted)}
.pay__cardstate--ready .pay__cardstate-d{background:var(--accent)}
.pay__cardstate--proc{background:#eef3fb;color:#3a6ea8}
.pay__cardstate--proc .pay__cardstate-d{animation:paypulse 1s ease-in-out infinite}
.pay__cardstate--fail{background:#fdeaea;color:#b5271f}
@keyframes paypulse{0%,100%{opacity:.3}50%{opacity:1}}
/* trust line */
.pay__trust{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11.5px;font-weight:500}
.pay__trust .licon{flex:none;opacity:.7}
.pay__ok-s{font-size:13px;color:var(--muted);margin-top:5px;font-weight:600}
/* 5 · actions — confirmability */
.pay__foot{display:flex;flex-direction:row-reverse;gap:10px;align-items:center;padding:18px 22px 22px}
.pay__confirm{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:none;padding:17px;font-size:17px;font-weight:800;border-radius:14px}
.pay__confirm:disabled{opacity:.4;cursor:not-allowed}
.pay__confirm.is-loading{opacity:.7;cursor:wait}
.pay__cancel{flex:none;padding:15px 20px;min-height:auto;font-size:15px;border-radius:12px}
.pay__ok{text-align:center;padding:26px 22px 2px}
.pay__ok-i{display:inline-flex;color:#1a9e4b}
.pay__ok-t{font-size:20px;font-weight:800;margin-top:8px}
.pay__recap{margin:16px 22px;background:var(--bg);border-radius:16px;padding:2px 16px}
.pay__recap-r{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--muted)}
.pay__recap-r:last-child{border-bottom:0}
.pay__recap-r .b{color:var(--text);font-weight:700}
.pay__recap-r--hl{font-size:17px}
.pay__recap-r--hl,.pay__recap-r--hl span{color:var(--accent);font-weight:900}
@media(max-width:430px){.pay__quick{grid-template-columns:1fr 1fr}.pay__foot{flex-direction:column-reverse}.pay__cancel,.pay__confirm{width:100%}.pay__steps{gap:4px}.pay__step{gap:5px}.pay__step-l{font-size:10.5px}.pay__step-d{width:20px;height:20px}}

/* ===== Lite Meal subscription hub (branch pickup only) — uses brand tokens (light = green) ===== */
.lmhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lmhead__badge{background:var(--accent);color:var(--accent-fg);font-weight:800;font-size:12.5px;padding:5px 13px;border-radius:999px}
.lmtabs{margin-bottom:16px}
.lmbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.lmbar--wrap{flex-wrap:wrap;justify-content:space-between}
.lmsearch{flex:1;min-width:180px;max-width:340px}
.lmfilter{flex-wrap:wrap}
.lmnote{font-size:12px;color:var(--muted);background:var(--bg);border-radius:10px;padding:9px 12px;margin-top:6px}
/* daily-orders page */
.lmdate{display:inline-flex;gap:6px}
.lmdate button{border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:700;padding:9px 16px;border-radius:10px;cursor:pointer;transition:.15s}
.lmdate button:hover{border-color:var(--accent)}
.lmdate button.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.lmfilters{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.lmfilters .inp{width:auto;min-width:120px;flex:0 1 auto;padding:8px 10px;font-size:13px}
.lmfilters .lmsearch{min-width:170px;flex:1 1 170px}
.lmcounts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lmcount{font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 12px}
.lmcount b{color:var(--text)}
.lmcount--tot{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.lmcount--tot b{color:var(--accent)}
.lmacts{display:flex;flex-wrap:wrap;gap:5px}
.lmacts .mini{font-size:11.5px;padding:5px 9px}
.lmacts .mini.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* ===== kitchen screen (operational KDS) — uses brand tokens (light = green) ===== */
.khead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.khead__l{display:flex;align-items:center;gap:12px;color:var(--accent)}
.khead__t{font-size:20px;font-weight:800;color:var(--text)}
.khead__act{display:flex;gap:8px;flex-wrap:wrap}
.khead__act .btn-sm{display:inline-flex;align-items:center;gap:6px}
.kstats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.kstat{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 14px}
.kstat__ic{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center}
.kstat__n{font-size:22px;font-weight:900;line-height:1}
.kstat__l{font-size:11.5px;color:var(--muted);margin-top:3px}
.kportions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kportion{display:flex;align-items:center;gap:11px;background:var(--accent-soft);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.kportion__ic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--surface);color:var(--accent);display:flex;align-items:center;justify-content:center}
.kportion__n{font-size:17px;font-weight:800}
.kfilterbar{gap:8px}
.kfilterbar .inp{width:auto;min-width:120px;flex:0 1 auto;padding:9px 11px;font-size:13px}
.kfilterbar .lmsearch{min-width:200px;flex:1 1 200px;max-width:none}
.kboard{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kcol{background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.kcol__h{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--border);font-weight:800;color:var(--accent)}
.kcol__h>span:first-of-type{color:var(--text)}
.kcol__c{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--accent-soft);padding:3px 10px;border-radius:999px}
.kcol__body{padding:10px;display:flex;flex-direction:column;gap:10px;max-height:72vh;overflow-y:auto}
.kempty{text-align:center;color:var(--muted);font-size:13px;padding:24px 0}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:11px 12px}
.kcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.kcard__no{font-weight:800;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.kcard__cust{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:14px}
.kcard__cust .muted{display:inline-flex;align-items:center;gap:4px;font-weight:500}
.kcard__meal{font-size:14px;margin-top:6px;display:flex;align-items:center;gap:6px}
.kcard__menu{margin-top:3px}
.kcard__alert{display:flex;align-items:center;gap:5px;color:#b02a2a;font-weight:700;font-size:12.5px;background:#fdeaea;border-radius:8px;padding:5px 9px;margin-top:7px}
.kcard__no{font-size:12.5px;color:var(--muted);margin-top:5px}
.kcard__acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.kbtn{border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;padding:6px 9px;border-radius:8px;cursor:pointer;transition:.14s}
.kbtn:hover{border-color:var(--accent);color:var(--accent)}
.kbtn--done{background:#e3f5e9;color:#0e7a38;border-color:#bfe6cd}
.kbtn--next{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.kcard__print{margin-top:9px;width:100%;border:1px dashed var(--border);background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:7px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.kcard__print:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){.kstats{grid-template-columns:repeat(3,1fr)}.kboard{grid-template-columns:1fr}.kportions{grid-template-columns:1fr}}
@media(max-width:560px){.kstats{grid-template-columns:1fr 1fr}}
.lmback{margin-bottom:12px}
.lmprofile__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lmprofile__act{display:flex;gap:8px;flex-wrap:wrap}
.lmname{font-size:20px;font-weight:800}
.lmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:16px}
.lminfo{display:flex;flex-direction:column;gap:3px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.lminfo span:last-child{font-weight:600}
.lmsoon{background:var(--accent-soft);border:1px dashed var(--accent);text-align:center}
/* subscription create modal (flex-centered via .vpop--pay) */
.vpop__box.lmsub{width:min(540px,96vw);max-height:94vh;overflow:hidden;display:flex;flex-direction:column;padding:0}
.lmsub .vpop__h{padding:18px 20px 4px}
.lmsub__body{padding:4px 20px 10px;overflow-y:auto}
.lmsub__foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lmsub__foot #ls_pay{margin-inline-start:auto;flex:0 1 auto;max-width:230px;min-width:150px}
.lmseg-lbl{font-size:12.5px;font-weight:600;color:var(--muted);margin:12px 0 6px}
.lmseg{display:flex;flex-wrap:wrap;gap:8px}
.lmseg button{flex:1 1 0;min-width:84px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:700;padding:11px 6px;border-radius:12px;cursor:pointer;transition:.15s}
.lmseg button:hover{border-color:var(--accent)}
.lmseg button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.lmrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lmsummary{margin-top:14px;background:var(--accent-soft);border-radius:14px;padding:6px 14px}
.lmsummary__row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;border-bottom:1px solid rgba(128,128,128,.18)}
.lmsummary__row:last-child{border-bottom:0}
.lmsummary__row span{color:var(--muted)}
.lmsummary__row b{font-weight:700;color:var(--text)}
.lmsummary__h{font-weight:800;font-size:14.5px;padding:8px 0 4px;color:var(--text)}
.lmsummary__before b{color:var(--muted);font-weight:600;text-decoration:line-through}
.lmsummary__tot span,.lmsummary__tot b{font-size:18px;font-weight:900;color:var(--accent)}
.lmsummary__err{margin-top:8px;text-align:center;color:var(--danger);font-weight:700;font-size:13.5px;background:#fdeaea;border-radius:10px;padding:10px}
.lmrow--off{opacity:.5}
.lmrow--off .b{font-weight:600}
.lmerr{color:var(--danger);font-size:13px;min-height:16px;margin-top:8px;text-align:center}
@media(max-width:520px){.lmrow{grid-template-columns:1fr 1fr}}

/* ============================================================
   Visual polish pass — Linear/Stripe/Notion-inspired.
   Ordered buttons, tactile feedback, smooth entrances, styled
   dropdowns, refined tabs. Appended last = overrides above.
   ============================================================ */
:root{--ease:cubic-bezier(.3,.7,.4,1);--pop:cubic-bezier(.2,.85,.35,1)}
button{transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
/* tactile press feedback on every button (the "settle" micro-interaction) */
.btn-primary:active,.btn-sm:active,.mini:active,.filters button:active,.switch button:active,.addbtn:active,.vpop__opt:active,.newbar__ack:active,.langbtn:active{transform:translateY(1px) scale(.985)}
.btn-primary:active{transform:translateY(0) scale(.99)}
.mini{transition:.16s var(--ease)}.mini:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface));box-shadow:0 4px 11px -7px var(--accent)}
.btn-sm{transition:.16s var(--ease)}.btn-sm:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.btn-sm--accent:hover{filter:brightness(1.05)}
.switch button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.langbtn{transition:.16s var(--ease)}.langbtn:hover{border-color:var(--accent);color:var(--accent)}
/* dropdowns styled intentionally (custom chevron, not a bare OS control) */
select.inp{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a756c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-inline-end:36px}
select.inp:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
/* modals + popups now glide in (fade scrim + scale-up box) instead of appearing from nothing */
@keyframes fadeIn{from{opacity:0}}
@keyframes vpopIn{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(10px)}}
.vpop.show .vpop__scrim,.modal-bg{animation:fadeIn .2s ease}
.vpop.show .vpop__box{animation:vpopIn .24s var(--pop)}
.vpop--pay.show .vpop__box,.vpop.show .vpop__box.paysheet,.vpop.show .vpop__box.lmsub,.modal{animation:popIn .26s var(--pop)}
.vpop__opt{transition:.16s var(--ease)}.vpop__opt:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface));transform:translateY(-1px);box-shadow:0 6px 16px -10px var(--accent)}
/* section tab-strip = clean underline tabs (Linear/Stripe style) */
#subtabs{border-bottom:1px solid var(--border);margin-bottom:16px}
#subtabs .filters{margin:0;gap:2px}
#subtabs .filters button{border:0;background:transparent;border-radius:8px 8px 0 0;color:var(--muted);padding:9px 15px;position:relative;font-weight:600;box-shadow:none;font-size:13.5px}
#subtabs .filters button.active{background:transparent;color:var(--accent);box-shadow:none}
#subtabs .filters button.active::after{content:'';position:absolute;inset-inline:9px;bottom:-1px;height:2.5px;border-radius:2px 2px 0 0;background:var(--accent)}
#subtabs .filters button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--accent) 6%,transparent)}
/* sidebar icons + smoother active */
.nav a .licon{flex:none;opacity:.82;transition:opacity .16s}
.nav a.active .licon,.nav a:hover .licon{opacity:1}
.nav a{transition:background .16s var(--ease),color .16s var(--ease)}
/* pill filters: lift on hover */
.filters button{transition:.16s var(--ease)}.filters button:hover:not(.active){border-color:color-mix(in srgb,var(--accent) 40%,var(--border));color:var(--text)}
/* inputs: consistent focus ring already exists; unify hover */
.inp:hover:not(:focus){border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
/* KPI/cards: a touch more depth on hover, gentler timing */
.card,.kpi,.mcard{transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
/* row-action buttons: compact icon cluster in one horizontal line — never stacked or clipped (pro data-table pattern) */
.rowacts{display:inline-flex;gap:6px;align-items:center}
.iconbtn{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:9px;cursor:pointer;transition:.16s var(--ease);padding:0}
.iconbtn .licon{width:15px;height:15px}
.iconbtn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.iconbtn.danger:hover{border-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,transparent)}
.iconbtn:active{transform:translateY(1px) scale(.95)}
/* any table's action column stays on one line (kills the cramped vertical stacking) */
td:last-child{white-space:nowrap}
th{white-space:nowrap;color:var(--muted);font-weight:600;font-size:12.5px}
/* ROOT FIX: let the main column shrink inside the grid so wide tables scroll INSIDE their card
   instead of pushing the whole page sideways (classic grid min-width:auto overflow). */
.main{min-width:0}
.appwrap{max-width:100%}
#content{min-width:0}
.card>div[style*="overflow-x"]{max-width:100%}
/* ===== SIDEBAR REDESIGN — sticky viewport-height column, nav directly under the logo ===== */
@media(min-width:901px){
  .sidebar{position:sticky;top:0;height:100vh;align-self:start;overflow-y:auto;overflow-x:hidden}
}
.brandmark{padding:16px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--border);justify-content:center}
.brandmark img{max-height:58px;filter:none}
.nav{gap:3px;padding-top:6px}
/* clearer, button-like nav items (readable text, defined hover + active — Linear/Notion style) */
.nav a{color:var(--text);opacity:.66;font-weight:500;letter-spacing:-.1px}
.nav a:hover{opacity:1;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.nav a.active{opacity:1;font-weight:700;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.side-bottom{margin-top:auto}
/* ===== DASHBOARD REDESIGN ===== */
.dbhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.dbhead__sub{color:var(--muted);font-size:14px}
.dbhead__acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.15s var(--ease)}
.seg button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.seg button.active{background:var(--accent);color:var(--accent-fg);box-shadow:0 4px 11px -6px var(--accent)}
.seg--sm button{font-size:12px;padding:6px 11px}
.linkbtn{border:0;background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.15s;white-space:nowrap}
.linkbtn:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px}
.statcard{display:flex;align-items:flex-start;gap:13px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-1);transition:box-shadow .2s var(--ease),transform .2s var(--ease);min-height:116px}
.statcard:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.statcard__ic{width:42px;height:42px;flex:none;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);display:flex;align-items:center;justify-content:center}
.statcard__b{min-width:0;flex:1}
.statcard__l{color:var(--muted);font-size:13px;font-weight:500}
.statcard__v{font-size:27px;font-weight:800;letter-spacing:-.5px;margin-top:5px;line-height:1.05;color:var(--text)}
.statcard__u{font-size:14px;font-weight:600;color:var(--muted);margin-inline-start:5px}
.statcard__d{font-size:12px;font-weight:700;margin-top:9px;display:inline-flex;align-items:center;gap:5px}
.statcard__d.up{color:var(--success)}.statcard__d.down{color:var(--danger)}
.statcard__dl{color:var(--muted);font-weight:500}
.statcard__hint{color:var(--muted);font-size:12px;margin-top:9px}
.dbmain{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:16px;margin-top:16px}
.dbcard__h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.dbcard__h h3{margin:0;font-size:15px;font-weight:800}
.dbbars{display:flex;align-items:flex-end;gap:6px;height:214px;padding-top:8px}
.dbbar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;outline:none}
.dbbar__wrap{width:100%;display:flex;align-items:flex-end;justify-content:center;height:170px;border-bottom:1.5px solid var(--border)}
.dbbar__f{width:min(72%,32px);border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));transform-origin:bottom;animation:barGrow .7s cubic-bezier(.2,.8,.2,1) backwards;transition:filter .15s}
.dbbar__f--z{background:var(--border)}
.dbbar:hover .dbbar__f,.dbbar:focus .dbbar__f{filter:brightness(1.1)}
.dbbar__lbl{font-size:10.5px;color:var(--muted);white-space:nowrap;height:13px}
.db-empty{height:214px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);text-align:center}
.db-empty__ic{width:58px;height:58px;border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);display:flex;align-items:center;justify-content:center}
.topitem{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border)}
.topitem:last-child{border-bottom:0}
.tirank{width:26px;height:26px;flex:none;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.tirank--1{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.tigrow{flex:1;min-width:0}
.tirow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tiname{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tirev{font-size:13px;font-weight:700;white-space:nowrap}
.tibar{height:6px;background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:4px;overflow:hidden;margin-top:6px}
.tibar__f{height:100%;background:var(--accent);border-radius:4px;transition:width .3s var(--ease)}
.ordtoolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ordtoolbar .inp{margin:0;max-width:280px;height:38px}
.iconbtn--ghost{border-color:transparent;background:transparent;width:30px;height:30px;color:var(--muted)}
tr:hover .iconbtn--ghost{color:var(--accent)}
@media(max-width:900px){.dbmain{grid-template-columns:1fr}}
@media(max-width:520px){.statgrid{grid-template-columns:1fr}.dbbar__lbl{font-size:9.5px}.dbbars{gap:3px}.ordtoolbar .inp{max-width:none;flex:1 1 100%}}
/* mobile shell: turn the side rail into a compact icon strip so content gets full width (≤900px) */
@media(max-width:900px){
  .appwrap,.appwrap.navhidden{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;z-index:40;height:auto;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;padding:8px 12px;border-inline-end:0;border-bottom:1px solid var(--border);overflow:hidden}
  .brandmark{padding:0 4px 0 0;border-bottom:0;justify-content:flex-start;flex:none}
  .brandmark img{max-height:32px}
  .nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;flex:1 1 auto;justify-content:center}
  .nav a{padding:9px 11px;flex:none}
  .nav a span{display:none}
  .side-bottom{margin-inline-start:auto;margin-top:0;flex:none;gap:6px}
  .side-bottom .avatar{display:none}
  .side-bottom>.grow{display:none}
  .navtoggle{display:none}
}
/* ============================================================
   POS (نقطة البيع) — professional 3-zone cashier layout
   ============================================================ */
body.posmode #bswitch{display:none}                 /* brand switch lives in the POS toolbar instead */
body.posmode #content{padding:0}
.posx{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-1)}
@media(min-width:901px){
  body.posmode .main{height:100vh;overflow:hidden;display:flex;flex-direction:column}
  body.posmode .topbar{margin-bottom:14px;flex:none}
  body.posmode #subtabs{flex:none}
  body.posmode #content{flex:1;min-height:0;overflow:hidden}
  .posx{height:100%}
}
/* toolbar */
.postop{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);flex:none}
.postop__start{flex:none}
.postop__end{flex:none;display:flex;align-items:center;gap:10px}
.posbrand{display:inline-flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:3px}
.posbrand button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:8px 15px;border-radius:8px;cursor:pointer;transition:.15s var(--ease);white-space:nowrap}
.posbrand button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.posbrand button.active{background:var(--accent);color:var(--accent-fg);box-shadow:0 4px 11px -6px var(--accent)}
.possearch{flex:1 1 auto;max-width:560px;margin:0 auto;position:relative;display:flex;align-items:center}
.possearch__ic{position:absolute;inset-inline-start:14px;color:var(--muted);display:flex;pointer-events:none}
.possearch input{width:100%;box-sizing:border-box;height:44px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14.5px;border-radius:12px;padding:0 44px;transition:.15s}
.possearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.possearch__kbd{position:absolute;inset-inline-end:12px;font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-family:inherit}
.possearch__x{position:absolute;inset-inline-end:10px;width:26px;height:26px;border:0;border-radius:7px;background:var(--bg);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.possearch__x:hover{color:var(--danger);background:var(--danger-soft,#fdeaea)}
.possearch__x[hidden],.possearch__kbd[hidden]{display:none}
.poswho{display:flex;align-items:center;gap:8px}
.poswho__ic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.poswho__t{display:flex;flex-direction:column;line-height:1.25}
.poswho__n{font-size:13px;font-weight:700}
.poswho__r{font-size:11px;color:var(--muted)}
.poschip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 11px}
.poschip .licon{color:var(--muted)}
.posact__grp{display:inline-flex;gap:6px}
.posact{position:relative;width:40px;height:40px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.posact:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.posact:disabled{opacity:.45;cursor:not-allowed}
.posact__b{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--accent-fg);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
/* categories */
.poscats{display:flex;gap:8px;padding:11px 14px;overflow-x:auto;border-bottom:1px solid var(--border);flex:none;scrollbar-width:none}
.poscats::-webkit-scrollbar{display:none}
.poscat{flex:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;transition:.15s var(--ease);white-space:nowrap}
.poscat:hover:not(.active){border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 6%,transparent)}
.poscat.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);box-shadow:0 5px 14px -6px var(--accent)}
.poscat__n{font-size:11.5px;font-weight:700;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted);border-radius:999px;padding:1px 7px;min-width:14px;text-align:center}
.poscat.active .poscat__n{background:rgba(255,255,255,.25);color:#fff}
/* body: products + cart */
.posbody{display:grid;grid-template-columns:minmax(0,1fr) 366px}
@media(min-width:901px){.posbody{flex:1;min-height:0}}
.posprod{min-width:0;padding:14px 16px}
@media(min-width:901px){.posprod{overflow-y:auto;height:100%}}
.posgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-content:start}
.posnores{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--muted);text-align:center}
.posnores[hidden]{display:none}
.posnores__ic{color:var(--border)}
.poscard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:15px;overflow:hidden;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s}
.poscard:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.poscard.is-incart{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.poscard.is-off{cursor:not-allowed}
.poscard.is-off:hover{transform:none;box-shadow:none;border-color:var(--border)}
.poscard__imgwrap{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,var(--surface),var(--border));overflow:hidden}
.poscard__img{width:100%;height:100%;object-fit:cover;display:block}
.poscard__img--none{width:100%;height:100%;display:block;background:linear-gradient(135deg,var(--surface),var(--border))}
.poscard.is-off .poscard__img{opacity:.4;filter:grayscale(.45)}
.poscard__tag{position:absolute;top:7px;inset-inline-start:7px;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.92);color:var(--text);padding:3px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.poscard__badge{position:absolute;top:7px;inset-inline-end:7px;font-size:10.5px;font-weight:800;background:rgba(20,15,10,.72);color:#fff;padding:3px 9px;border-radius:999px}
.poscard__b{padding:9px 11px 6px;flex:1;min-height:0}
.poscard__name{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.poscard__price{font-size:15px;font-weight:800;color:var(--text);margin-top:4px}
.poscard__cur{font-size:11.5px;font-weight:600;color:var(--muted)}
.poscard__foot{padding:0 10px 10px}
.poscard__add{width:100%;height:40px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-fg);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.poscard__add:hover{background:var(--primary-hover,#a90d27)}
.poscard__add:active{transform:translateY(1px)}
.poscard__soff{height:40px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.poscard__step{display:flex;align-items:center;justify-content:space-between;height:40px;border:1.5px solid var(--accent);border-radius:10px;overflow:hidden}
.poscard__step .psbtn{width:44px;height:100%;border:0;background:var(--accent-soft);color:var(--accent);font-size:20px;font-weight:700;cursor:pointer;line-height:1}
.poscard__step .psbtn:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.poscard__step .psq{font-size:15px;font-weight:800;min-width:24px;text-align:center}
/* cart panel */
.poscart{display:flex;flex-direction:column;background:var(--card);overflow:hidden;min-height:0}
@media(min-width:901px){.poscart{height:100%;border-inline-start:1px solid var(--border)}}
.poscart__h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);flex:none}
.poscart__title{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.poscart__count{font-size:12px;font-weight:800;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 9px}
.poscart__acts{display:flex;align-items:center;gap:6px}
.pcx-hold{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer}
.pcx-hold:hover{border-color:var(--accent);color:var(--accent)}
.pcx-clear{width:32px;height:32px;border:1px solid var(--danger-soft,#fdeaea);background:var(--danger-soft,#fdeaea);color:var(--danger,#c9363e);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pcx-clear:hover{filter:brightness(.97)}
.poscart__close{display:none;width:34px;height:34px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:9px;cursor:pointer;align-items:center;justify-content:center}
.otypesx{display:flex;gap:4px;background:var(--bg);border-radius:11px;padding:4px;margin:12px 16px 0;flex:none}
.otypesx button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:9px 6px;border-radius:8px;cursor:pointer;transition:.15s}
.otypesx button.active{background:var(--accent);color:var(--accent-fg);box-shadow:0 4px 10px -6px var(--accent)}
.otblx{margin:10px 16px 0;box-sizing:border-box;width:calc(100% - 32px);border:1.5px solid var(--accent);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;padding:10px 12px;border-radius:10px;text-align:center}
.otblx:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.poscart__items{flex:1;overflow-y:auto;padding:6px 16px;min-height:64px}
.citemx{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.citemx:last-child{border-bottom:0}
.citemx__thumb{width:46px;height:46px;object-fit:cover;border-radius:10px;flex:none}
.citemx__thumb--none{width:46px;height:46px;border-radius:10px;flex:none;background:var(--border)}
.citemx__m{flex:1;min-width:0}
.citemx__n{font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citemx__o{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citemx__p{font-size:12.5px;font-weight:700;color:var(--accent);margin-top:2px}
.citemx__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.qtyx{display:flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.qbtnx{width:28px;height:28px;border:0;background:var(--surface);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;line-height:1}
.qbtnx:hover{background:var(--accent-soft);color:var(--accent)}
.qtyx span{font-size:13.5px;font-weight:800;min-width:22px;text-align:center}
.citemx__del{width:26px;height:26px;border:0;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.citemx__del:hover{color:var(--danger);background:var(--danger-soft,#fdeaea)}
.cartemptyx{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 20px;text-align:center;color:var(--muted)}
.cartemptyx__ic{color:var(--border)}
.cartemptyx__t{font-size:14px;font-weight:700;color:var(--text)}
.cartemptyx__s{font-size:12.5px}
.poscart__foot{flex:none;padding:14px 16px;border-top:1px solid var(--border)}
.sumx{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:3px 0}
.sumx--tot{font-size:18px;font-weight:800;color:var(--text);padding-top:9px;margin-top:6px;border-top:1px dashed var(--border)}
.paybtn{width:100%;height:56px;margin-top:12px;border:0;border-radius:13px;background:var(--accent);color:var(--accent-fg);font:inherit;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:10px;padding:0 18px;transition:.15s;box-shadow:0 8px 20px -10px var(--accent)}
.paybtn__t{margin-inline-start:auto}
.paybtn:hover:not(:disabled){background:var(--primary-hover,#a90d27)}
.paybtn:active:not(:disabled){transform:translateY(1px)}
.paybtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.paybtn.is-loading{opacity:.75;cursor:progress}
/* ===== Employee purchase (POS) ===== */
.empbtn{width:100%;height:46px;margin-top:10px;border:1.5px solid var(--emp,#0f7a4f);border-radius:12px;background:var(--emp-soft,rgba(15,122,79,.08));color:var(--emp,#0f7a4f);font:inherit;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.empbtn:hover{background:var(--emp-soft2,rgba(15,122,79,.15))}
.empbtn:active{transform:translateY(1px)}
.paybtn--emp,.posbar__pay--emp{background:var(--emp,#0f7a4f)!important;box-shadow:0 8px 20px -10px var(--emp,#0f7a4f)!important}
.paybtn--emp:hover:not(:disabled){background:var(--emp-hover,#0c6641)!important}
.empband{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:11px;border:1px solid var(--emp,#0f7a4f);border-radius:12px;background:var(--emp-soft,rgba(15,122,79,.08))}
.empband__ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--emp,#0f7a4f);color:#fff}
.empband__m{flex:1;min-width:0}
.empband__n{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.2}
.empband__s{font-size:11.5px;color:var(--emp,#0f7a4f);font-weight:700;margin-top:1px}
.empband__x{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.empband__x:hover{background:var(--accent-soft);color:var(--danger)}
.sumx--disc{color:var(--emp,#0f7a4f);font-weight:700}
.sumx--net{font-size:16px;font-weight:800;color:var(--emp,#0f7a4f);padding-top:4px}
/* employee modal (flex-centered overlay) */
.emppop{position:fixed;inset:0;z-index:70;display:none}
.emppop.show{display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.emppop__scrim{position:absolute;inset:0;background:rgba(20,20,25,.5);backdrop-filter:blur(2px)}
.emppop__box{position:relative;width:min(460px,94vw);max-height:92vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);overflow:hidden;animation:popIn .24s var(--pop)}
.emppop__box--pay{width:min(430px,94vw)}
.emppop__h{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 12px}
.emppop__t{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800;color:var(--text)}
.emppop__sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.emppop__x{margin-inline-start:auto;flex:none;width:34px;height:34px;border:0;border-radius:10px;background:var(--accent-soft);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.emppop__x:hover{color:var(--text)}
.emppop__search{position:relative;margin:0 18px 12px}
.emppop__search-ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.emppop__search input{width:100%;height:48px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:15px;padding:0 14px 0 42px}
.emppop__search input:focus{outline:none;border-color:var(--emp,#0f7a4f)}
.emppop__list{overflow-y:auto;padding:0 12px 14px;display:flex;flex-direction:column;gap:6px}
.emppop__empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:38px 20px;color:var(--muted);text-align:center;font-size:13.5px}
.emppop__empty--err{color:var(--danger)}
.emprow{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer;text-align:start;font:inherit;transition:.13s;min-height:56px}
.emprow:hover:not(:disabled){border-color:var(--emp,#0f7a4f);background:var(--emp-soft,rgba(15,122,79,.06))}
.emprow:active:not(:disabled){transform:translateY(1px)}
.emprow:disabled{opacity:.55;cursor:not-allowed}
.emprow__av{flex:none;width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--muted);display:flex;align-items:center;justify-content:center}
.emprow__m{flex:1;min-width:0}
.emprow__n{font-size:14px;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emprow__s{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emprow__go{flex:none;width:28px;height:28px;border-radius:8px;background:var(--emp,#0f7a4f);color:#fff;display:flex;align-items:center;justify-content:center}
.emprow__off{flex:none;font-size:11px;font-weight:700;color:var(--danger);background:rgba(176,42,42,.1);padding:3px 9px;border-radius:20px}
/* settlement breakdown */
.epbrk{margin:2px 18px 12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.epbrk__r{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;color:var(--text)}
.epbrk__r--mut{color:var(--muted);font-size:12.5px}
.epbrk__r--disc{color:var(--emp,#0f7a4f);font-weight:800}
.epbrk__r--tot{font-size:16px;font-weight:800;border-top:1px dashed var(--border);margin-top:5px;padding-top:9px}
.epmonthly{margin:0 18px 12px;padding:9px 12px;border-radius:10px;background:var(--accent-soft);color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}
.epmonthly b{color:var(--text)}
.epseg__lbl{margin:0 18px 7px;font-size:12px;font-weight:700;color:var(--muted)}
.epseg{display:flex;gap:8px;margin:0 18px 12px}
.epseg--pm{margin-top:-4px}
.epseg__b{flex:1;min-height:52px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:.13s;padding:8px 6px}
.epseg__b:hover:not(.on):not(:disabled){border-color:var(--emp,#0f7a4f)}
.epseg__b.on{border-color:var(--emp,#0f7a4f);background:var(--emp,#0f7a4f);color:#fff;box-shadow:0 6px 16px -10px var(--emp,#0f7a4f)}
.epseg__b:disabled,.epseg__b.dis{opacity:.42;cursor:not-allowed}
.epnote{margin:0 18px 12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;line-height:1.4}
.epnote--err{color:var(--danger)}
.emppop__box--pay #epGo,.emppop__box--pay .paybtn{margin:2px 18px 18px;width:auto}
.emppop__box--pay .pay__ok,.emppop__box--pay .pay__recap{margin:0 18px}
.emppop__box--pay .pay__ok{padding-top:20px}
.emppop__box--pay .pay__foot{padding:14px 18px 18px}
.spin{display:inline-flex;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* toast */
.toastx{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:90;display:flex;align-items:center;gap:9px;max-width:min(440px,92vw);padding:12px 18px;border-radius:13px;background:#1d2733;color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 16px 40px -14px rgba(0,0,0,.55);opacity:0;transition:transform .3s var(--pop),opacity .3s;pointer-events:none}
.toastx.show{transform:translate(-50%,0);opacity:1}
.toastx__ic{display:flex;flex:none}
.toastx--ok{background:#0f7a4f}
.toastx--err{background:#b02a2a}
/* employee-purchase report */
.eptable{width:100%;border-collapse:collapse;font-size:13px}
.eptable th{text-align:start;font-weight:700;color:var(--muted);font-size:12px;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg)}
.eptable td{padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.eptable tr:last-child td{border-bottom:0}
.eptable tbody tr:hover{background:var(--accent-soft)}
.eptable .b{font-weight:700;color:var(--text)}
.epneg{color:#b02a2a;font-weight:700}
.epgreen{color:#0f7a4f;font-weight:700}
.epsel{border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;min-height:40px;cursor:pointer}
.eptabs{margin-bottom:14px}
.icon-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.14s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.eprow-ex td{opacity:.5;text-decoration:line-through}
.eprow-ex td:last-child,.eprow-ex td:nth-last-child(2){text-decoration:none}
.epfield{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);min-width:150px;flex:1}
.epfield input{min-height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--text);font:inherit;font-size:14px}
.epfield input:focus{outline:none;border-color:#0f7a4f}
.epswitch{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);cursor:pointer;user-select:none}
.epswitch input{width:18px;height:18px;accent-color:#0f7a4f;cursor:pointer}
.epswitch--lg{font-size:15px;font-weight:700}
.epfield select{min-height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.epfield select:focus,.epfield input:focus{outline:none;border-color:#0f7a4f}
.benhdr{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.benhdr__acts{display:flex;gap:8px;flex-wrap:wrap}
.bfsec{font-size:13px;font-weight:800;color:#0f7a4f;margin:18px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.bfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.bfinfo{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)}
.bfinfo:last-child{border-bottom:0}
.bfinfo .b{font-weight:700;color:var(--text);text-align:left}
.invact__btn{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--card);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:start;transition:.13s}
.invact__btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.invprev{margin:12px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.invprev:empty{display:none;padding:0;border:0}
.invprev__r{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;color:var(--text)}
.invprev__r--tot{font-size:15px;font-weight:800;border-top:1px dashed var(--border);margin-top:5px;padding-top:8px;color:#0f7a4f}
/* Product & Menu Management Center */
.psums{grid-template-columns:repeat(auto-fit,minmax(115px,1fr))}
.psum{transition:.14s;cursor:pointer}.psum:hover{border-color:var(--accent)}.psum--on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.prodcats{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
.prodcats .catn{background:var(--accent-soft);color:var(--muted);border-radius:20px;padding:1px 8px;font-size:11px;margin-inline-start:4px}
.prodcats button.active .catn{background:rgba(255,255,255,.28);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:236px}
.pcard__top{display:flex;gap:10px;align-items:flex-start}
.pcard__img{width:56px;height:56px;flex:none;border-radius:11px;object-fit:cover;background:var(--bg)}
.pimg--ph{display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px dashed var(--border)}
.pcard__hd{flex:1;min-width:0}
.pcard__name{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__price{font-size:17px;font-weight:800;color:var(--text)}
.pcard__badges{display:flex;flex-wrap:wrap;gap:5px;min-height:22px}
.pbadge{font-size:11px;font-weight:700;border-radius:20px;padding:2px 9px;white-space:nowrap}
.pbadge--ok{background:#e1f5e8;color:#127a3a}.pbadge--off{background:#f1efe8;color:#5f5e5a}.pbadge--warn{background:#fdf0d8;color:#9a6a08}.pbadge--bad{background:#fdeaea;color:#b02a2a}
.pcard__cost{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap;border-top:1px solid var(--border);padding-top:8px}
.pcard__cost b{color:var(--text)}
.pcard__meta{margin-top:auto}
.pcard__foot{display:flex;align-items:center;gap:10px;margin-top:6px}
.pcard__av{display:flex;align-items:center}
.ptbl-img{width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--bg)}
.pprev__img{width:100%;height:150px;border-radius:12px;object-fit:cover;background:var(--bg)}
.invact__btn--danger{color:var(--danger)}.invact__btn--danger:hover{border-color:var(--danger);background:#fdeaea}
/* Product editing page (Product Center — Stage 2) */
.pe-tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.pe-tgl:last-child{border-bottom:none}
.pe-tgl__t{min-width:0}.pe-tgl__l{font-size:14px;font-weight:600;color:var(--text)}
.pe-tgl .toggle.is-busy{opacity:.5;pointer-events:none}
.pe-status{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.pe-vat{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:10px;padding:9px 12px;background:var(--bg);min-height:42px;justify-content:center}
.pe-vat__r{display:flex;justify-content:space-between;gap:8px;font-size:13px}.pe-vat__r b{color:var(--text)}
.pe-comp__bar{height:9px;border-radius:20px;background:var(--border);overflow:hidden}
.pe-comp__fill{height:100%;border-radius:20px;transition:width .3s}
.pe-comp__r{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0}
.pe-comp__ic{width:20px;height:20px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.pe-comp__ic.ok{background:#e1f5e8;color:#127a3a}.pe-comp__ic.no{background:var(--bg);color:var(--muted);border:1px solid var(--border)}
.pe-sz{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.pe-sz:last-child{border-bottom:none}.pe-sz--add{border-top:1px dashed var(--border);padding-top:12px;margin-top:4px}
.pe-sz__n{flex:1;min-width:0;min-height:40px;border:1px solid var(--border);border-radius:9px;padding:0 10px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
.pe-sz__p{display:flex;flex-direction:column;gap:2px}
.pe-sz__pi{width:110px;min-height:40px;border:1px solid var(--border);border-radius:9px;padding:0 10px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
.pe-sz__rec{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.vchip__ing{display:inline-flex;align-items:center;gap:3px;background:#eef3ee;color:#0f7a4f;border-radius:20px;padding:1px 7px;font-size:10.5px;margin-inline-start:5px}
.pe-mod{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;margin-bottom:8px;transition:.14s}
.pe-mod.is-on{border-color:var(--success);background:#f4fbf6}
.pe-mod__t{min-width:0}.pe-mod__l{font-size:14px;font-weight:600;color:var(--text)}
/* change log (product editor) */
.pe-log{padding:8px 0;border-bottom:1px solid var(--border)}.pe-log:last-child{border-bottom:none}
.pe-log__h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pe-log__a{font-size:13px;font-weight:700;color:var(--text)}
/* bulk-actions bar (table view — Stage 3) */
.pbulk{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--accent-soft,#eef3ee);border:1px solid var(--accent,#0f7a4f);border-radius:12px;padding:9px 14px;margin-bottom:10px}
.pbulk__c{font-size:14px;color:var(--text);white-space:nowrap}.pbulk__c b{color:var(--accent,#0f7a4f);font-size:16px}
.pbulk__acts{display:flex;gap:6px;flex-wrap:wrap}
.eptable tbody tr.is-sel{background:var(--accent-soft,#eef3ee)}
.eptable [data-sel],.eptable [data-selall]{width:18px;height:18px;accent-color:var(--accent,#0f7a4f);cursor:pointer}
/* held-orders popup */
.heldlist{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto}
.heldrow{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:11px}
.heldrow__i{flex:1;min-width:0}
.heldrow__b{font-size:13.5px;font-weight:700}
/* mobile: bottom checkout bar + cart bottom-sheet */
.posbar{display:none}
.poscart-scrim{display:none}
@media(max-width:900px){
  .postop{flex-wrap:wrap}
  .postop__start{order:1}
  .postop__end{order:2;margin-inline-start:auto}
  .possearch{order:3;flex-basis:100%;max-width:none}
  .poswho__t,.poschip,.posstatus{display:none}
  .posbody{grid-template-columns:1fr}
  .posprod{padding:10px 10px 84px}
  .posgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
  .poscart{position:fixed;inset-inline:0;bottom:0;top:auto;max-height:86vh;border-radius:18px 18px 0 0;z-index:70;transform:translateY(102%);transition:transform .28s var(--ease);box-shadow:0 -14px 44px -14px rgba(0,0,0,.45)}
  body.poscart-open .poscart{transform:translateY(0)}
  .poscart__close{display:flex}
  .posbar.show{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:60;gap:10px;padding:10px 12px;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 20px -10px rgba(0,0,0,.3)}
  .posbar__view{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:700;padding:0 14px;height:50px;border-radius:12px;cursor:pointer}
  .posbar__view .posbar__t{margin-inline-start:auto;color:var(--accent);font-weight:800}
  .posbar__pay{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--accent);color:var(--accent-fg);font:inherit;font-size:15px;font-weight:800;height:50px;border-radius:12px;cursor:pointer}
  body.poscart-open .poscart-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:65}
}
/* ============================================================
   POS — tablet-first touch refinements + 80-table picker
   ============================================================ */
.poscard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 10px}
.poscard__price{font-size:15px;font-weight:800;margin:0}
.poscard__plus{flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--accent);color:var(--accent-fg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .14s;box-shadow:0 4px 12px -5px var(--accent)}
.poscard__plus:hover{background:var(--primary-hover,#a90d27)}
.poscard__plus:active{transform:scale(.9)}
.poscard__plus.has{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.poscard__plus-n{font-size:17px;font-weight:800}
.poscard__step{flex:1;height:46px;border-radius:12px}
.poscard__step .psbtn{width:52px;font-size:22px}
.poscard__step .psq{font-size:17px}
.poscard__soff{flex:1;height:46px;border-radius:11px}
.otypesx button{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 6px;font-size:13.5px}
.ottable{display:flex;align-items:center;gap:9px;width:calc(100% - 32px);margin:10px 16px 0;box-sizing:border-box;min-height:54px;border-radius:12px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;padding:0 14px}
.ottable .licon{flex:none}
.ottable--empty{border:1.5px dashed var(--accent);background:var(--accent-soft);color:var(--accent)}
.ottable--set{border:1.5px solid var(--accent);background:var(--card);color:var(--text)}
.ottable__lbl{font-weight:800}
.ottable__chg{margin-inline-start:auto;font-size:12.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:6px 13px;border-radius:999px}
.ottable:active{transform:translateY(1px)}
.paybtn__hint{text-align:center;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:7px}
.qbtnx{width:40px;height:40px;font-size:20px}
.qtyx span{font-size:15px;min-width:26px}
.citemx__del{width:40px;height:40px}
.citemx__thumb,.citemx__thumb--none{width:52px;height:52px}
.poscat{padding:11px 18px;font-size:14.5px;min-height:46px}
/* tablet landscape: collapse the side rail to icons on POS only → reclaim space for products */
@media(min-width:901px) and (max-width:1240px){
  body.posmode .appwrap{grid-template-columns:76px 1fr}
  body.posmode .sidebar{padding:12px 8px;align-items:stretch}
  body.posmode .brandmark{padding:2px 0 12px;justify-content:center;border-bottom:1px solid var(--border);margin-bottom:6px}
  body.posmode .brandmark img{max-height:30px;max-width:60px;object-fit:contain}
  body.posmode .nav a{justify-content:center;padding:13px 0;gap:0}
  body.posmode .nav a span{display:none}
  body.posmode .side-bottom{flex-direction:column;align-items:center;gap:8px;padding-top:10px}
  body.posmode .side-bottom>.grow{display:none}
  body.posmode #chpw{display:none}
  body.posmode #logout{width:100%;justify-content:center;padding:10px 2px;font-size:12px}
  body.posmode .posbody{grid-template-columns:minmax(0,1fr) 328px}
  body.posmode .posgrid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
}
.tablepop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:16px}
.tablepop.show{display:flex}
.tablepop__scrim{position:absolute;inset:0;background:rgba(20,15,10,.5)}
.tablepop__box{position:relative;width:min(920px,96vw);max-height:94vh;display:flex;flex-direction:column;background:var(--card);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-2)}
.tablepop__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}
.tablepop__t{font-size:20px;font-weight:800}
.tablepop__s{font-size:13.5px;color:var(--muted);margin-top:3px}
.tablepop__x{width:44px;height:44px;flex:none;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tablepop__search{position:relative;display:flex;align-items:center;padding:14px 20px 4px}
.tablepop__search-ic{position:absolute;inset-inline-start:34px;color:var(--muted);display:flex;pointer-events:none}
.tablepop__search input{width:100%;height:52px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:16px;border-radius:14px;padding:0 48px}
.tablepop__search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tablepop__grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;padding:16px 20px;align-content:start}
.tablepop__none{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:15px}
.tablebtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:74px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:14px;cursor:pointer;transition:transform .1s}
.tablebtn:active{transform:scale(.95)}
.tablebtn__lbl{font-size:11px;color:var(--muted);font-weight:600}
.tablebtn__n{font-size:22px;font-weight:800;line-height:1}
.tablebtn.is-sel{border-color:var(--accent);background:var(--accent);color:var(--accent-fg);box-shadow:0 6px 16px -7px var(--accent)}
.tablebtn.is-sel .tablebtn__lbl{color:rgba(255,255,255,.85)}
.tablepop__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-top:1px solid var(--border);flex-wrap:wrap}
.tablepop__sel{font-size:15px;color:var(--muted)}
.tablepop__sel b{color:var(--accent);font-size:18px}
.tablepop__acts{display:flex;gap:10px;margin-inline-start:auto}
.btn-lg{min-height:52px;padding:0 26px;border-radius:13px;font:inherit;font-size:15.5px;font-weight:800;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.btn-lg--primary{border:0;background:var(--accent);color:var(--accent-fg);box-shadow:0 8px 20px -10px var(--accent)}
.btn-lg--primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-lg--primary:active:not(:disabled){transform:translateY(1px)}
.btn-lg--ghost:active{transform:translateY(1px)}
@media(max-width:1100px){.tablepop__grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:720px){.tablepop__grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.tablepop__grid{grid-template-columns:repeat(3,1fr)}}
/* POS top-bar real status badges (online + time) */
.posstatus{display:inline-flex;align-items:center;gap:6px}
.posbadge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.posbadge .licon{flex:none}
.posbadge--ok{color:var(--success,#2f7d5b);background:color-mix(in srgb,var(--success,#2f7d5b) 10%,transparent);border-color:color-mix(in srgb,var(--success,#2f7d5b) 25%,transparent)}
.posbadge--off{color:var(--danger,#c9363e);background:var(--danger-soft,#fdeaea);border-color:color-mix(in srgb,var(--danger,#c9363e) 25%,transparent)}
.posbadge--time{font-variant-numeric:tabular-nums}
/* POS nav drawer (tablet): hamburger expands the icon rail into a labeled drawer over the page */
.posnav-scrim{display:none}
body.posnav .posnav-scrim{display:block;position:fixed;inset:0;background:rgba(20,15,10,.4);z-index:85}
@media(min-width:901px) and (max-width:1240px){
  body.posmode.posnav .sidebar{position:fixed;inset-block:0;inset-inline-end:0;width:250px;z-index:90;box-shadow:var(--shadow-2);padding:16px 14px;align-items:stretch;overflow-y:auto;background:var(--surface)}
  body.posmode.posnav .brandmark{justify-content:flex-start;border-bottom:1px solid var(--border);margin-bottom:8px;padding-bottom:12px}
  body.posmode.posnav .brandmark img{max-height:44px;max-width:none}
  body.posmode.posnav .nav a{justify-content:flex-start;padding:12px 12px;gap:11px}
  body.posmode.posnav .nav a span{display:inline}
  body.posmode.posnav .side-bottom{flex-direction:row;align-items:center;gap:8px;padding-top:12px}
  body.posmode.posnav .side-bottom>.grow{display:block}
  body.posmode.posnav #chpw{display:inline-flex}
  body.posmode.posnav #logout{width:auto}
}
/* ============================================================
   POS — final tablet refinements
   ============================================================ */
@media(min-width:901px) and (max-width:1240px){body.posmode #subtabs{display:none}}   /* only the tablet rail hides the top tabs — the drawer replaces them there; desktop/mobile keep #subtabs */
body.posmode .topbar #langtoggle{display:none}      /* isolated EN moves into the drawer (langtoggle2) */
body.posmode .topbar{margin-bottom:0}
.drawernav{display:none}
body.posmode.posnav .drawernav{display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--border)}
.drawernav__h{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.3px;padding:2px 12px 7px}
.drawernav__i{display:block;width:100%;text-align:start;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--text);padding:12px;border-radius:10px;cursor:pointer}
.drawernav__i.active{background:var(--accent-soft);color:var(--accent)}
.drawernav__i:hover:not(.active){background:color-mix(in srgb,var(--accent) 6%,transparent)}
/* product card: price always in the body, footer is a fixed-height action area → no layout shift on add */
.poscard__b{display:flex;flex-direction:column;gap:1px;padding:9px 11px 6px;flex:0 0 auto}
.poscard__price{font-size:15px;font-weight:800;color:var(--text);margin-top:2px}
.poscard__foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px 10px;min-height:58px}
.poscard__plus{width:48px;height:48px}
.poscard__step{width:100%;height:48px}
.poscard__step .psbtn{width:58px}
.poscard__soff{width:100%;height:48px}
/* larger touch search field */
.possearch input{height:52px;font-size:15.5px}
/* cart item: unit price + line total + large controls + stable height */
.citemx{align-items:center;gap:10px;min-height:66px}
.citemx__u{font-size:11.5px;color:var(--muted);margin-top:2px}
.citemx__side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.citemx__tot{font-size:14px;font-weight:800;color:var(--accent)}
.qbtnx{width:44px;height:44px;font-size:21px}
.qtyx span{min-width:30px;font-size:16px}
.citemx__del{width:44px;height:44px;flex:none}
/* comfortable bottom padding so the last product row + its controls are never clipped */
@media(min-width:901px){.posprod{padding-bottom:28px}}
/* bigger, centered logo symbol in the collapsed rail */
@media(min-width:901px) and (max-width:1240px){body.posmode .brandmark img{max-height:46px;max-width:66px}}
/* ============================================================
   POS — QA fixes (calmer red, ≥44px touch targets, safer delete, close buttons)
   ============================================================ */
.poscard__plus{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:none}
.poscard__plus:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.poscard__plus:active{background:var(--accent);color:var(--accent-fg);transform:scale(.9)}
.pcx-clear{width:44px;height:44px}
.pcx-hold{min-height:44px;padding:0 14px}
.pay__x{width:44px;height:44px}
.possearch__x{width:36px;height:36px}
.posact{width:44px;height:44px}
.posbrand button{padding:11px 16px}
.heldrow .iconbtn{width:44px;height:44px}
.pay__q{min-height:46px}
.cz__o{min-height:48px;padding:12px 14px}
.cz .vpop__h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cz__x{width:40px;height:40px;flex:none;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.citemx__side{margin-inline-end:2px}
.citemx__del{margin-inline-start:6px;border:1px solid var(--border);background:var(--surface)}
.citemx__del:active{color:#fff;background:var(--danger,#c9363e);border-color:var(--danger,#c9363e)}
.citemx__o{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}

/* ============================================================================
   LOGIN — Modern Operational Editorial (RISHY House)
   Asymmetric layout, organic olive curve, one crossing feather, integrated form.
   ========================================================================== */
.lg2{
  --olv-900:#333F20;--olv-800:#3F4C28;--olv-700:#4C5B31;--olv:#5E6E3B;--olv-500:#77885A;
  --paper:#F4EEE1;--ink:#232719;--ink-2:#5A5E48;--line:#E2D9C6;--gold:#B79A54;
  position:relative;min-height:100vh;direction:ltr;background:var(--paper);overflow:hidden;
  font-family:'IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,sans-serif}
.lg2-defs{position:absolute}

/* left olive surface with an organic curved right edge */
.lg2-heroBg{position:absolute;left:0;top:0;bottom:0;width:40%;z-index:1;clip-path:url(#lg2curve);
  background:
    radial-gradient(120% 80% at 26% 20%,rgba(150,160,110,.20),transparent 60%),
    radial-gradient(90% 90% at 92% 90%,rgba(14,19,7,.5),transparent 60%),
    linear-gradient(158deg,#3A4622 0%,#4C5B31 46%,#5E6E3B 72%,#37431F 100%)}
.lg2-heroBg__tex{position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;
  background:radial-gradient(130% 120% at 40% 0%,transparent 60%,rgba(0,0,0,.34)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* one oversized feather crossing the boundary (cream over olive, olive over paper) */
.lg2-feather-wrap{position:absolute;z-index:2;left:15%;top:-8%;height:116%;width:50%;pointer-events:none;
  opacity:.28;transform:rotate(-8deg);transform-origin:50% 50%;animation:lg2FeatherIn 1.5s ease-out both}
.lg2-feather{height:100%;width:auto;display:block;margin:0 auto}

/* content layer (above the two decorative layers) */
.lg2-grid{position:relative;z-index:3;min-height:100vh;display:grid;grid-template-columns:40% 1fr}

/* --- left: brand statement --- */
.lg2-hero__in{min-width:0;direction:ltr;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:36px;color:var(--paper);
  padding:clamp(40px,5vw,76px) clamp(40px,5.5vw,92px) clamp(40px,5vw,76px) clamp(30px,3.4vw,56px)}
.lg2-hero__logo{width:clamp(120px,11vw,156px);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.28));animation:lg2Rise .7s .05s both}
.lg2-statement{align-self:flex-start;text-align:right;display:flex;flex-direction:column;animation:lg2Rise .7s .16s both}
.lg2-st__intro{font-size:clamp(17px,1.5vw,21px);font-weight:500;color:rgba(244,238,225,.82);margin-bottom:4px}
.lg2-st__main{margin:0;font-weight:800;line-height:1.06;letter-spacing:-.5px;font-size:clamp(40px,4.7vw,62px);color:#F7F2E6;
  background:linear-gradient(180deg,#FBF7EC 0%,#EADFC1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lg2-st__out{font-size:clamp(26px,2.9vw,40px);font-weight:600;color:#F2ECDD;margin-top:8px}
.lg2-st__dot{color:var(--gold)}
.lg2-st__sub{margin:20px 0 0;max-width:340px;font-size:clamp(13px,1vw,15px);line-height:1.7;font-weight:400;color:rgba(244,238,225,.6)}

/* --- right: integrated form --- */
.lg2-panel{min-width:0;display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,56px) clamp(22px,4vw,64px)}
.lg2-panelin{width:100%;max-width:452px;direction:rtl;animation:lg2Rise .6s .26s both}
.lg2-logo{display:block;width:clamp(132px,12vw,162px);height:auto;margin:0 auto 22px}
.lg2-title{text-align:center;font-size:26px;font-weight:800;color:var(--ink);margin:0 0 6px;letter-spacing:-.3px}
.lg2-welcome{text-align:center;font-size:14px;color:var(--ink-2);margin:0 0 12px;line-height:1.55}
.lg2-accent{display:block;width:46px;height:3px;border-radius:3px;margin:0 auto 26px;background:linear-gradient(90deg,var(--gold),#D9C58A)}
.lg2-form{display:flex;flex-direction:column;gap:16px}
.lg2-field{display:flex;flex-direction:column;gap:8px}
.lg2-lbl{font-size:13px;font-weight:600;color:var(--ink);padding-inline-start:2px}
.lg2-input{display:flex;align-items:center;gap:11px;height:54px;padding:0 15px;background:#FCFAF4;border:1.5px solid var(--line);border-radius:14px;transition:border-color .18s,box-shadow .18s,background .18s}
.lg2-input:hover{border-color:#D2C7AE}
.lg2-input:focus-within{background:#fff;border-color:var(--olv);box-shadow:0 0 0 4px rgba(94,110,59,.13)}
.lg2-input__ic{color:#9a9478;display:flex;flex:none}
.lg2-input__ic svg{width:20px;height:20px}
.lg2-input input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;font:inherit;font-size:15px;color:var(--ink)}
.lg2-input input::placeholder{color:#a8a488}
.lg2-eye{flex:none;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:#9a9478;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.lg2-eye:hover{color:var(--olv);background:rgba(94,110,59,.1)}
.lg2-eye svg{width:20px;height:20px}
.lg2-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-2px}
.lg2-check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--ink-2);user-select:none}
.lg2-check input{position:absolute;opacity:0;width:0;height:0}
.lg2-check__box{width:20px;height:20px;flex:none;border:1.6px solid #cabfa6;border-radius:6px;background:#FCFAF4;position:relative;transition:.15s}
.lg2-check input:checked+.lg2-check__box{background:var(--olv);border-color:var(--olv)}
.lg2-check input:checked+.lg2-check__box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:4.5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lg2-check input:focus-visible+.lg2-check__box{box-shadow:0 0 0 4px rgba(94,110,59,.18)}
.lg2-link{border:0;background:transparent;color:var(--olv);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:2px}
.lg2-link:hover{color:var(--olv-800);text-decoration:underline}
.lg2-err{max-height:0;overflow:hidden;opacity:0;font-size:13px;color:#b23b3b;background:rgba(178,59,59,.08);border:1px solid rgba(178,59,59,.2);border-radius:12px;text-align:center;line-height:1.5;transition:.22s}
.lg2-err.show{max-height:90px;opacity:1;padding:11px 13px}
.lg2-err--info{color:#7c5e18;background:rgba(183,154,84,.13);border-color:rgba(183,154,84,.4)}
.lg2-btn{position:relative;width:100%;height:56px;border:0;border-radius:14px;cursor:pointer;color:#fff;font:inherit;font-weight:700;font-size:15.5px;margin-top:4px;
  background:linear-gradient(180deg,#657739 0%,#526231 100%);box-shadow:0 12px 26px -14px rgba(70,84,40,.7);transition:transform .16s,box-shadow .16s,filter .16s;overflow:hidden}
.lg2-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 18px 32px -14px rgba(70,84,40,.78)}
.lg2-btn:active{transform:translateY(0)}
.lg2-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(94,110,59,.32)}
.lg2-btn:disabled{cursor:default}
.lg2-btn__main{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.lg2-btn__ic{display:inline-flex}
.lg2-btn__ic svg{width:19px;height:19px}
[dir=rtl] .lg2-btn__ic{transform:scaleX(-1)}
.lg2-btn__load{display:none;align-items:center;justify-content:center;gap:10px}
.lg2-btn.is-loading .lg2-btn__main{display:none}
.lg2-btn.is-loading .lg2-btn__load{display:inline-flex}
.lg2-btn__spin{width:18px;height:18px;border:2.4px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:lg2spin .7s linear infinite}
.lg2-secure{display:flex;align-items:flex-start;gap:9px;justify-content:center;margin-top:22px;color:var(--ink-2);font-size:12px;line-height:1.5;text-align:center}
.lg2-secure__ic{color:var(--olv);flex:none;display:flex;margin-top:1px}
.lg2-secure__ic svg{width:15px;height:15px}
.lg2-foot{display:flex;align-items:center;gap:12px;margin-top:20px;color:#a49e86;font-size:11.5px}
.lg2-foot__ln{flex:1;height:1px;background:var(--line)}
.lg2-textbtn{display:block;margin:16px auto 0;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:7px 12px;border-radius:9px;transition:.15s}
.lg2-textbtn:hover{color:var(--olv);background:rgba(94,110,59,.09)}

/* language switch — compact, integrated */
.lg2-lang{position:absolute;top:22px;right:26px;z-index:6;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid var(--line);background:#FBF7EE;color:var(--ink);font:inherit;font-weight:600;font-size:13px;border-radius:11px;cursor:pointer;box-shadow:0 4px 12px -8px rgba(58,50,30,.4);transition:.16s}
.lg2-lang:hover{border-color:var(--olv);color:var(--olv)}
.lg2-lang__ic{display:flex}
.lg2-lang__ic svg{width:16px;height:16px}

/* motion */
@keyframes lg2Rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lg2spin{to{transform:rotate(360deg)}}
@keyframes lg2FeatherIn{from{opacity:0;transform:rotate(-10deg) translateY(12px)}to{opacity:.28;transform:rotate(-8deg) translateY(0)}}
@keyframes lg2Shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.lg2-panelin.shake{animation:lg2Shake .5s}

/* responsive */
@media (max-width:1024px){ .lg2-grid{grid-template-columns:44% 1fr} .lg2-heroBg{width:44%} }
@media (max-width:860px){
  .lg2-grid{grid-template-columns:1fr;grid-template-rows:340px auto}
  .lg2-heroBg{left:0;right:0;top:0;bottom:auto;width:auto;height:340px;clip-path:none;border-radius:0 0 34px 34px}
  .lg2-feather-wrap{left:auto;right:-14%;top:-8%;height:360px;width:auto;opacity:.16;transform:rotate(10deg);animation:none}
  .lg2-hero__in{height:340px;justify-content:center;gap:14px;padding:38px 30px 26px;overflow:hidden}
  .lg2-hero__logo{width:96px}
  .lg2-st__intro{font-size:16px}
  .lg2-st__main{font-size:clamp(32px,8.6vw,46px)}
  .lg2-st__out{font-size:22px}
  .lg2-st__sub{display:none}
  .lg2-logo{display:none}
  .lg2-panel{padding:32px 22px 46px}
}
@media (max-width:520px){
  .lg2-grid{grid-template-rows:300px auto}
  .lg2-heroBg{height:300px}
  .lg2-hero__in{height:300px;padding:34px 24px 22px}
  .lg2-hero__logo{width:88px}
  .lg2-st__main{font-size:clamp(30px,9.5vw,42px)}
  .lg2-lang{top:15px;right:15px}
  .lg2-input{height:52px}
}
@media (prefers-reduced-motion:reduce){
  .lg2-hero__logo,.lg2-statement,.lg2-panelin,.lg2-feather-wrap{animation:none!important}
  .lg2-panelin.shake{animation:none}
}

/* ===== ZATCA e-invoicing screen (§17). Scoped tone helpers - the generic
   .warn/.bad names do not exist as standalone classes in this sheet, and a
   class that renders as nothing would make a red number look calm. ===== */
.statcard__v.warn{color:#a86a00}
.statcard__v.bad{color:#b3261e}
#content .card .ok{color:#127a3a;font-weight:600}
#content .card .warn{color:#a86a00}
#content .card .bad{color:#b3261e}

/* ============================================================================
   ZATCA e-invoicing — product-grade UX (redesign). Arabic-first, RISHY brand.
   ============================================================================ */
.zwrap{max-width:1180px;margin:0 auto;padding:0 2px}
.zhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.zhead__title{font-size:23px;font-weight:800;margin:0;letter-spacing:-.3px}
.zhead__desc{color:var(--muted);margin:4px 0 0;font-size:14px}
.zhead__badges{display:flex;gap:8px;flex-wrap:wrap}
.zbadge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--border)}
.zbadge--muted{background:var(--card);color:var(--muted)}
.zbadge--off{background:#fbeaea;color:#b3261e;border-color:#f2c9c6}
.zbadge--ok{background:#e3f3e6;color:#1c7a3a;border-color:#c2e6cc}
.znav{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.znav__tab{border:0;background:transparent;padding:10px 15px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.znav__tab:hover{color:var(--text)}
.znav__tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.znav__select{display:none;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:11px;font:inherit;font-weight:600;background:var(--card);color:var(--text)}
.zchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;line-height:1.6}
.zchip--ok{background:#e3f3e6;color:#1c7a3a}
.zchip--warn{background:#fdf1e0;color:#a8670a}
.zchip--bad{background:#fbeaea;color:#b3261e}
.zchip--info{background:#e7eef7;color:#2f5c95}
.zchip--muted{background:#efece6;color:#6b6a5c}
.zcta{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(180deg,var(--accent-soft),transparent);border:1px solid var(--border);border-radius:16px;padding:16px 20px;margin-bottom:18px}
.zcta--done{background:#eef5ea}
.zcta__t{font-weight:800;font-size:16px}
.zcta__d{color:var(--muted);font-size:13px;margin-top:3px}
.zcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.zcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow-1)}
.zcard__k{font-size:13px;color:var(--muted);font-weight:600}
.zcard__v{font-size:32px;font-weight:800;letter-spacing:-1px;margin-top:6px;line-height:1}
.zcard__v--sm{font-size:20px}
.zcard__v--bad{color:var(--danger)}
.zcard__u{font-size:18px;margin-inline-start:2px}
.zcard__sub{font-size:12.5px;color:var(--muted);margin-top:6px}
.zbar{height:6px;border-radius:6px;background:var(--accent-soft);margin-top:10px;overflow:hidden}
.zbar__fill{height:100%;background:var(--accent);border-radius:6px;transition:width .4s}
.zpanel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow-1);margin-bottom:18px}
.zpanel__h{margin-bottom:14px}
.zpanel__t{font-size:16px;font-weight:800;margin:0}
.zpanel--half{margin-bottom:0}
.zrow2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.zsteps{display:flex;flex-direction:column;gap:2px}
.zstep{display:flex;gap:14px;padding:14px 6px;border-bottom:1px solid var(--border)}
.zstep:last-child{border-bottom:0}
.zstep__n{flex:none;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:#efece6;color:var(--muted)}
.zstep.is-done .zstep__n{background:var(--success);color:#fff}
.zstep.is-current .zstep__n{background:var(--accent);color:var(--accent-fg)}
.zstep.is-locked{opacity:.55}
.zstep__t{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zstep__reason{color:var(--muted);font-size:12.5px;margin-top:4px}
.zstep__body{flex:1}
.zstep .zbtn--sm{margin-top:10px}
.zattn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.zattn__i{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--border);font-size:13.5px}
.zattn__i:last-child{border-bottom:0}
.zattn__i--bad{color:#a5231b}
.zlink{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.zlink:hover{text-decoration:underline}
.zactiv{list-style:none;margin:0;padding:0}
.zactiv__i{display:flex;justify-content:space-between;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border);font-size:13px}
.zactiv__i:last-child{border-bottom:0}
.zactiv__t{color:var(--muted);font-size:11.5px;direction:ltr}
.zgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.zf{display:flex;flex-direction:column;gap:5px}
.zf__l{font-size:13px;font-weight:600}
.zreq{color:var(--danger)}
.zf input,.zf select{border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--card);font:inherit;color:var(--text);transition:border-color .15s,box-shadow .15s}
.zf input:focus,.zf select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.zf--miss input{border-color:#e6b8b3;background:#fdf6f5}
.zf__hint{font-size:11px;color:var(--muted)}
.zform-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.zform-meta{display:flex;align-items:center;gap:8px}
.zform-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.zsub-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.zsub-form__t{font-size:14px;font-weight:700;margin:0 0 12px}
.zchecks{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.zcheck{font-size:13px}
.zcheck.is-ok{color:#1c7a3a}
.zcheck.is-bad{color:#b3261e}
.zcheck.is-warn{color:#a8670a}
.zbtn{border:0;background:var(--accent);color:var(--accent-fg);font:inherit;font-weight:700;padding:10px 18px;border-radius:11px;cursor:pointer;transition:filter .15s}
.zbtn:hover{filter:brightness(1.06)}
.zbtn--ghost{background:var(--card);color:var(--text);border:1px solid var(--border)}
.zbtn--sm{padding:7px 13px;font-size:13px;border-radius:9px}
.zsub{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.zsub__t{border:1px solid var(--border);background:var(--card);border-radius:10px;padding:7px 13px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--muted)}
.zsub__t.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.ztoolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.zsearch{border:1px solid var(--border);border-radius:10px;padding:9px 12px;font:inherit;min-width:220px;background:var(--card);color:var(--text)}
.zsearch:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.zcount{color:var(--muted);font-size:13px;font-weight:600}
.ztable-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
.ztable{width:100%;border-collapse:collapse;font-size:13.5px}
.ztable th{text-align:start;font-weight:700;color:var(--muted);font-size:12px;padding:11px 13px;background:#faf8f4;border-bottom:1px solid var(--border);white-space:nowrap}
.ztable td{padding:11px 13px;border-bottom:1px solid var(--border)}
.ztable tr:last-child td{border-bottom:0}
.ztable tbody tr:hover{background:#faf8f4}
.zempty-row{text-align:center;color:var(--muted);padding:26px 12px !important}
.ltr{direction:ltr;text-align:start}
.zsummary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.zsumc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:15px;box-shadow:var(--shadow-1)}
.zsumc__l{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:8px}
.zsumc__s{font-size:12px;color:var(--muted);margin-top:8px}
.zacc{border-bottom:1px solid var(--border)}
.zacc:last-child{border-bottom:0}
.zacc__s{cursor:pointer;padding:13px 4px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:9px;list-style:none}
.zacc__s::-webkit-details-marker{display:none}
.zacc__b{padding:2px 4px 16px;color:var(--muted);font-size:13px}
.ztext-ok{color:#1c7a3a;font-size:13px}
.ztext-bad{color:#b3261e;font-size:13px}
.zenvs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.zenvc{border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center}
.zenvc__n{font-weight:800;margin-bottom:10px;direction:ltr}
.zwizs{display:flex;flex-direction:column;gap:2px}
.zwiz{display:flex;gap:13px;padding:13px 4px;border-bottom:1px solid var(--border)}
.zwiz:last-child{border-bottom:0}
.zwiz__n{flex:none;width:27px;height:27px;border-radius:999px;background:#efece6;color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.zwiz.is-done .zwiz__n{background:var(--success);color:#fff}
.zwiz.is-current .zwiz__n{background:var(--accent);color:var(--accent-fg)}
.zwiz.is-locked{opacity:.5}
.zwiz__t{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zwiz__note{color:var(--muted);font-size:12px;margin-top:4px}
.zwiz__b{flex:1}
.zwiz .zbtn--sm{margin-top:9px}
.zalerts,.zperms{list-style:none;margin:0;padding:0}
.zalert{display:flex;gap:12px;align-items:baseline;padding:11px 4px;border-bottom:1px solid var(--border)}
.zalert:last-child{border-bottom:0}
.zalert__code{font-weight:700;font-size:12px;direction:ltr;flex:none}
.zalert--bad .zalert__code{color:#b3261e}
.zalert--warn .zalert__code{color:#a8670a}
.zalert__d{color:var(--muted);font-size:13px}
.zperms li{padding:9px 4px;border-bottom:1px solid var(--border);font-size:13.5px;display:flex;gap:10px;align-items:center}
.zperms li:last-child{border-bottom:0}
.zkv{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border);font-size:14px}
.zkv:last-child{border-bottom:0}
.zkv__k{color:var(--muted)}
.zkv__v{font-weight:600}
.znote{color:var(--muted);font-size:12.5px;background:#faf8f4;border:1px solid var(--border);border-radius:11px;padding:11px 14px;margin-top:6px}
.znote--sm{font-size:12px;margin-top:12px}
.znote__id{display:block;direction:ltr;font-size:11px;opacity:.6;margin-top:3px}
.zbanner{border-radius:11px;padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:14px}
.zbanner--warn{background:#fdf1e0;color:#a8670a;border:1px solid #f0dcbb}
.zempty{color:var(--muted);text-align:center;padding:24px}
.zempty--ok{color:#1c7a3a}
.zloading{color:var(--muted);padding:24px}
@media (max-width:960px){
  .zcards{grid-template-columns:1fr 1fr}
  .zsummary{grid-template-columns:1fr 1fr}
  .zrow2{grid-template-columns:1fr}
  .zenvs{grid-template-columns:1fr}
}
@media (max-width:620px){
  .znav{border-bottom:0}
  .znav__tab{display:none}
  .znav__select{display:block}
  .zcards{grid-template-columns:1fr}
  .zsummary{grid-template-columns:1fr}
  .zcta{flex-direction:column;align-items:stretch}
  .zcta .zbtn{width:100%}
  .zhead__title{font-size:20px}
}

/* ===== SUNMI devices + printing UI (Phase 1) — builds on the ZATCA design system ===== */
.zpill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.zpill{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.zpill b{color:var(--muted);font-weight:700}
.zpill:hover{border-color:var(--accent)}
.zpill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.zpill.active b{color:#fff}
.zpanel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.zpanel__head h3{margin:0}
.zsub2{color:var(--muted);font-size:12px;margin-top:2px}
.zmono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);word-break:break-all;margin-top:2px}
.zactions{display:flex;flex-wrap:wrap;gap:6px}
.zbtn--ok{border-color:#4c8b2b;color:#2f6a17}
.zbtn--bad{border-color:var(--danger);color:var(--danger)}
.pkv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--border);font-size:14px}
.pkv span{color:var(--muted)}
.pmodal{position:fixed;inset:0;background:rgba(20,24,18,.44);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.pmodal__card{background:var(--surface,#fff);border:1px solid var(--border);border-radius:16px;max-width:560px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.pmodal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.pmodal__head h3{margin:0;font-size:16px}
.pmodal__x{border:none;background:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
.pmodal__body{padding:18px}
.pmodal__foot{display:flex;justify-content:flex-start;gap:10px;padding:14px 18px;border-top:1px solid var(--border);flex-direction:row-reverse}
.pf{display:block;margin-bottom:12px;font-size:13px;color:var(--muted)}
.pf input,.pf select,.pf textarea{display:block;width:100%;margin-top:5px;border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--bg,#fff);color:var(--text);font:inherit;font-size:14px;box-sizing:border-box}