:root{
  --bg:#f5f3ef; --card:#ffffff; --ink:#1f2328; --muted:#6b7280; --line:#e7e3dc;
  --brand:#c2410c; --brand-dark:#9a3412; --brand-soft:#fff1e8;
  --side:#1c1917; --side-ink:#d6d3d1; --side-active:#2b2724;
  --green:#15803d; --green-soft:#e9f7ee; --red:#b91c1c; --red-soft:#fdecec;
  --blue:#1d4ed8; --blue-soft:#eaf0ff; --amber:#b45309; --amber-soft:#fff6e0;
  --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{margin:0;font-weight:650}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:20;transition:transform .2s}
.sidebar .brand{display:flex;gap:12px;align-items:center;padding:20px 18px;border-bottom:1px solid #2e2a27}
.brand-logo{width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px}
.brand-name{color:#fff;font-weight:600;line-height:1.2}
.brand-sub{font-size:12px;color:#a8a29e}
.sidebar nav{padding:12px 10px;flex:1;overflow-y:auto}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--side-ink);margin-bottom:2px}
.sidebar nav a svg{width:18px;height:18px;fill:currentColor;opacity:.8;flex:none}
.sidebar nav a:hover{background:var(--side-active);color:#fff}
.sidebar nav a.active{background:var(--brand);color:#fff}
.sidebar nav a.active svg{opacity:1}
.sidebar-foot{padding:14px 18px;border-top:1px solid #2e2a27;display:flex;justify-content:space-between;align-items:center}
.sidebar-foot .user{color:#fff;font-size:13px}
.logout{color:#fca5a5;font-size:13px}
.main{flex:1;margin-left:240px;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:16px 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar h1{font-size:19px}
.topbar-right{margin-left:auto;color:var(--muted);font-size:13px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:16px;cursor:pointer}
.content{padding:24px 28px 48px}

/* Cards & grid */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2{font-size:16px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.stat .label{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.stat .value{font-size:24px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
.stat .sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.stat.green .value{color:var(--green)} .stat.red .value{color:var(--red)} .stat.brand .value{color:var(--brand)}

/* Forms */
label{display:block;font-size:12.5px;font-weight:600;color:#44403c;margin-bottom:5px}
input[type=text],input[type=number],input[type=date],input[type=password],input[type=tel],input[type=search],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #d6d1c8;border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(194,65,12,.12)}
.field{margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.field{flex:1;min-width:140px}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline-form .field{margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:8px;border:1px solid transparent;background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--brand-dark)}
.btn-light{background:#fff;color:var(--ink);border-color:#d6d1c8}
.btn-light:hover{background:#f5f3ef}
.btn-green{background:var(--green)} .btn-green:hover{background:#166534}
.btn-red{background:var(--red)} .btn-red:hover{background:#991b1b}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
.btn-block{width:100%}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions form{margin:0}

/* Table */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;background:#faf9f7}
tbody tr:hover{background:#fcfbf9}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:700;background:#faf9f7}
.empty{text-align:center;color:var(--muted);padding:30px}

/* Badges & alerts */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.b-green{background:var(--green-soft);color:var(--green)}
.b-red{background:var(--red-soft);color:var(--red)}
.b-amber{background:var(--amber-soft);color:var(--amber)}
.b-blue{background:var(--blue-soft);color:var(--blue)}
.b-gray{background:#f1efeb;color:#57534e}
.veg-dot{display:inline-block;width:12px;height:12px;border:1.5px solid var(--green);border-radius:2px;position:relative;vertical-align:-1px;margin-right:6px}
.veg-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--green)}
.veg-dot.nonveg{border-color:var(--red)} .veg-dot.nonveg::after{background:var(--red)}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-weight:500}
.alert-success{background:var(--green-soft);color:var(--green);border:1px solid #c7ebd3}
.alert-error{background:var(--red-soft);color:var(--red);border:1px solid #f6caca}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.text-right{text-align:right}

/* Bars (reports/dashboard) */
.bars{display:flex;align-items:flex-end;gap:6px;height:200px;padding-top:10px;border-bottom:1px solid var(--line)}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;position:relative}
.bar-pair{display:flex;gap:2px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.bar{width:100%;max-width:22px;border-radius:4px 4px 0 0;background:var(--brand);min-height:2px}
.bar.exp{background:#a8a29e}
.bar-col:hover .tip{display:block}
.tip{display:none;position:absolute;bottom:100%;background:var(--ink);color:#fff;font-size:11.5px;padding:5px 8px;border-radius:6px;white-space:nowrap;z-index:5;margin-bottom:4px}
.bar-labels{display:flex;gap:6px;margin-top:6px}
.bar-labels span{flex:1;text-align:center;font-size:10.5px;color:var(--muted);overflow:hidden;white-space:nowrap}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.hbar{height:8px;border-radius:999px;background:#f1efeb;overflow:hidden;margin-top:5px}
.hbar>div{height:100%;background:var(--brand);border-radius:999px}

/* POS / New order */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.pos-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid #d6d1c8;background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer;font:inherit;font-size:13px}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.item-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;text-align:left;font:inherit;transition:border-color .15s,transform .05s}
.item-card:hover{border-color:var(--brand)}
.item-card:active{transform:scale(.98)}
.item-card .nm{font-weight:600;margin-bottom:6px;line-height:1.3}
.item-card .pr{color:var(--brand);font-weight:700}
.item-card .ct{font-size:11.5px;color:var(--muted)}
.cart{position:sticky;top:84px}
.cart-list{max-height:330px;overflow-y:auto;margin:0 -4px}
.cart-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:9px 4px;border-bottom:1px dashed var(--line)}
.cart-row .nm{font-weight:600;font-size:13.5px}
.cart-row .pr{font-size:12px;color:var(--muted)}
.qty{display:flex;align-items:center;border:1px solid #d6d1c8;border-radius:8px;overflow:hidden}
.qty button{border:0;background:#f5f3ef;width:28px;height:28px;cursor:pointer;font-size:15px}
.qty span{min-width:30px;text-align:center;font-weight:600}
.cart-amt{min-width:70px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.totals{margin-top:12px}
.totals div{display:flex;justify-content:space-between;padding:4px 0}
.totals .grand{font-size:18px;font-weight:700;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.cart-empty{color:var(--muted);text-align:center;padding:30px 0}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#1c1917 0%,#44281a 100%)}
.login-card{background:#fff;border-radius:16px;padding:34px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card .brand-logo{width:48px;height:48px;font-size:22px;margin-bottom:14px}
.login-card h1{font-size:22px;margin-bottom:4px}

/* Responsive */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.pos{grid-template-columns:1fr}.cart{position:static}.g-side{grid-template-columns:1fr}}
@media (max-width:820px){
  .sidebar{transform:translateX(-100%)} .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .main{margin-left:0} .menu-toggle{display:block}
  .g2,.g3{grid-template-columns:1fr} .content{padding:16px} .topbar{padding:12px 16px} .topbar-right{display:none}
}
@media (max-width:520px){.g4{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.no-print{display:none!important}.main{margin:0}.content{padding:0}.card{box-shadow:none;border:0}}

/* ===== v2: Menu images & quantity ===== */
a.stat{display:block}
.item-cell{display:flex;gap:12px;align-items:center}
.thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;flex:none;background:#f1efeb}
.thumb-ph{display:grid;place-items:center;font-weight:700;color:#a8a29e;font-size:18px}
.stock-form{display:flex;gap:4px;align-items:center;margin:0}
.stock-form input{width:64px;padding:5px 7px}
.stock-form input.low{border-color:#f59e0b;background:var(--amber-soft)}
.stock-form input.out{border-color:var(--red);background:var(--red-soft)}
.img-upload{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.img-preview{width:92px;height:92px;border-radius:12px;border:1.5px dashed #d6d1c8;display:grid;place-items:center;overflow:hidden;background:#faf9f7;flex:none;color:var(--muted);font-size:12px}
.img-preview img{width:100%;height:100%;object-fit:cover}
.sub-box{border:1px solid var(--line);border-radius:10px;padding:14px;background:#fcfbf9}
.sub-title{font-weight:650;font-size:13px;margin-bottom:10px}

/* ===== Tables screen ===== */
.tables-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tables-stats{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}
.dot.free{background:#22c55e}.dot.busy{background:var(--brand)}
.tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.table-card{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;min-height:122px;color:var(--ink);transition:transform .1s,box-shadow .15s;border:1.5px solid}
.table-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.table-card.free{background:#fff;border-color:#bbf7d0}
.table-card.busy{background:linear-gradient(140deg,#c2410c,#ea580c);border-color:transparent;color:#fff}
.table-card.busy.alt{background:linear-gradient(140deg,#1c1917,#44403c)}
.t-top{display:flex;justify-content:space-between;align-items:center}
.t-name{font-size:20px;font-weight:750;letter-spacing:-.01em}
.t-time{font-size:11.5px;background:rgba(255,255,255,.2);padding:2px 8px;border-radius:999px}
.t-amt{font-size:19px;font-weight:700;margin-top:auto;font-variant-numeric:tabular-nums}
.t-free{margin-top:auto;color:#15803d;font-weight:650}
.t-sub{font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-card.free .t-sub{color:var(--muted)}

/* ===== POS v2 ===== */
.content:has(.pos2){padding:0}
.pos2{display:grid;grid-template-columns:180px minmax(0,1fr) 370px;height:calc(100vh - 64px);background:var(--bg)}
.pos-cats{background:#fff;border-right:1px solid var(--line);padding:12px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.pos-back{display:block;padding:8px 10px;font-weight:600;font-size:13px;margin-bottom:6px;color:var(--muted)}
.pos-back:hover{color:var(--brand)}
.cat-btn{display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;background:none;padding:10px 12px;border-radius:9px;font:inherit;font-size:13.5px;cursor:pointer;color:#44403c}
.cat-btn span{font-size:11.5px;color:var(--muted);background:#f1efeb;border-radius:999px;padding:1px 7px}
.cat-btn:hover{background:#f5f3ef}
.cat-btn.active{background:var(--brand-soft);color:var(--brand);font-weight:650}
.cat-btn.active span{background:var(--brand);color:#fff}
.pos-items{overflow-y:auto;padding:16px 18px 30px}
.pos-search{display:flex;gap:10px;align-items:center;margin-bottom:14px;position:sticky;top:-16px;background:var(--bg);padding:16px 0 8px;margin-top:-16px;z-index:2}
.pos-search input{flex:1;padding:11px 14px;border-radius:10px;font-size:14px}
.veg-toggle{display:flex;background:#fff;border:1px solid #d6d1c8;border-radius:10px;padding:3px}
.vt{border:0;background:none;padding:7px 11px;border-radius:7px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.vt.active{background:var(--ink);color:#fff}
.vt .veg-dot{margin-right:5px}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.menu-card{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:0;cursor:pointer;text-align:left;font:inherit;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .08s}
.menu-card:hover{border-color:var(--brand);box-shadow:0 6px 16px rgba(194,65,12,.1)}
.menu-card.bump{transform:scale(.96)}
.menu-card.deny{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.menu-card.sold{opacity:.5;cursor:not-allowed}
.menu-card.sold:hover{border-color:var(--line);box-shadow:none}
.mc-img{position:relative;height:96px;background:linear-gradient(135deg,#fff1e8,#fde4d3);display:grid;place-items:center}
.mc-img img{width:100%;height:100%;object-fit:cover}
.mc-ph{font-size:34px;font-weight:750;color:#fdba8c}
.mc-qty{position:absolute;top:7px;right:7px;background:var(--brand);color:#fff;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:12.5px;font-weight:700;padding:0 6px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.mc-flag{position:absolute;left:7px;bottom:7px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.mc-flag.out{background:var(--red);color:#fff}
.mc-flag.low{background:#fff;color:var(--amber)}
.mc-body{padding:9px 11px 11px;display:flex;flex-direction:column;gap:3px;flex:1}
.mc-name{font-weight:620;font-size:13.5px;line-height:1.3}
.mc-size{font-size:11.5px;color:var(--muted)}
.mc-price{margin-top:auto;display:flex;gap:8px;align-items:baseline;color:var(--brand);font-weight:700;font-size:13.5px;flex-wrap:wrap}
.mc-hf{color:var(--muted);font-weight:600;font-size:12px}
.pos-order{background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.po-head{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.po-title{font-size:18px;font-weight:750}
.po-sub{font-size:12px;color:var(--muted);margin-bottom:10px}
.type-switch,.pay-modes{display:flex;gap:6px;flex-wrap:wrap}
.type-switch label,.pay-modes label{flex:1;margin:0;font-weight:500}
.type-switch input,.pay-modes input{display:none}
.type-switch span,.pay-modes span{display:block;text-align:center;padding:7px 8px;border:1px solid #d6d1c8;border-radius:8px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.type-switch input:checked+span,.pay-modes input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.po-fields{padding:10px 16px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:74px 1fr 1fr;gap:8px}
.po-row label{font-size:11px;margin-bottom:3px;color:var(--muted)}
.po-row input{padding:7px 9px;font-size:13px}
.po-cart{flex:1;overflow-y:auto;padding:4px 16px;min-height:120px}
.cl{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.cl-name{font-weight:600;font-size:13.5px;line-height:1.3}
.cl-price{font-size:12px;color:var(--muted)}
.cl-amt{min-width:64px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums;font-size:13.5px}
.vtag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:5px;margin-left:6px;vertical-align:1px}
.vtag.half{background:var(--blue-soft);color:var(--blue)}.vtag.full{background:var(--green-soft);color:var(--green)}
.cart-empty{text-align:center;color:var(--muted);padding:40px 10px;line-height:1.7}
.ce-icon{font-size:34px;margin-bottom:6px}
.po-foot{border-top:1px solid var(--line);padding:12px 16px 14px;background:#fcfbf9}
.po-note{padding:8px 10px;font-size:13px;margin-bottom:10px}
.po-totals div{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:2px 0}
.po-totals .grand{font-size:19px;font-weight:750;color:var(--ink);padding-top:4px}
.po-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.po-actions .po-bill{grid-column:1/-1;padding:13px;font-size:15px}
.po-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.po-cancel{display:block;width:100%;margin-top:10px;background:none;border:0;color:var(--red);font:inherit;font-size:12.5px;cursor:pointer}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(28,25,23,.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal-box.small-box{max-width:340px}
.modal-title{font-size:17px;font-weight:700;margin-bottom:14px}
.variant-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.variant-btn{border:1.5px solid #d6d1c8;background:#fff;border-radius:12px;padding:16px 10px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:4px;align-items:center}
.variant-btn span{font-size:13px;color:var(--muted)}
.variant-btn strong{font-size:18px;color:var(--brand)}
.variant-btn:hover{border-color:var(--brand);background:var(--brand-soft)}
.bill-lines{max-height:180px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:14px;font-size:13px}
.bill-lines div{display:flex;justify-content:space-between;padding:3px 0}
.bill-totals{background:#faf9f7;border-radius:10px;padding:10px 14px}
.bill-totals div{display:flex;justify-content:space-between;padding:3px 0;font-size:13.5px}
.bill-totals .grand{font-size:20px;font-weight:750;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}

@media (max-width:1200px){.pos2{grid-template-columns:150px minmax(0,1fr) 330px}}
@media (max-width:960px){
  .pos2{grid-template-columns:1fr;height:auto}
  .pos-cats{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .cat-btn{white-space:nowrap;gap:6px}.pos-back{white-space:nowrap;margin:0}
  .pos-items{overflow:visible}
  .pos-order{border-left:0;border-top:1px solid var(--line)}
  .po-cart{max-height:none}
}
.content:has(.pos2) .alert{margin:10px 16px 0}

/* ===== v3: Billing-style order form ===== */
.bill-form{display:flex;flex-direction:column;gap:18px}
.bf-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow)}
.bf-title{display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.bf-title strong{font-size:17px}
.bf-type{min-width:300px}
.bf-table{display:flex;align-items:center;gap:8px}
.bf-table label{margin:0;white-space:nowrap}
.bf-table input{width:80px}
.bf-items{padding:0;overflow:visible}
.bf-items-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bf-items-head h2{font-size:17px}
.scan-box{display:flex;align-items:stretch;flex:0 1 420px}
.scan-ico{display:grid;place-items:center;width:40px;border:1px solid #d6d1c8;border-right:0;border-radius:8px 0 0 8px;background:#faf9f7}
.scan-ico svg{width:20px;height:20px;fill:#57534e}
.scan-box input{border-radius:0 8px 8px 0;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.scan-box input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.incl-check{display:flex;align-items:center;gap:7px;margin:0 0 0 auto;font-weight:500;font-size:13.5px;white-space:nowrap}
.bf-table-grid th{background:#fff;padding:12px 8px;font-size:11.5px}
.bf-table-grid td{padding:8px;border-bottom:1px solid var(--line)}
.bf-table-grid td input,.bf-table-grid td select{padding:8px 9px}
.bf-table-grid tbody tr:hover{background:#fcfbf9}
.it-cell{display:flex;gap:10px;align-items:center;min-width:240px}
.it-thumb{width:38px;height:38px;border-radius:8px;overflow:hidden;flex:none;background:linear-gradient(135deg,#fff1e8,#fde4d3);display:grid;place-items:center;color:#f97316;font-weight:700}
.it-thumb img{width:100%;height:100%;object-fit:cover}
.it-thumb .cust{color:#a8a29e}
.it-main{flex:1;min-width:0}
.it-meta{font-size:11.5px;color:var(--muted);margin-top:2px;min-height:15px}
.qty-in{display:flex;border:1px solid #d6d1c8;border-radius:8px;overflow:hidden;background:#fff}
.qty-in button{border:0;background:#f5f3ef;width:26px;cursor:pointer;font-size:15px;flex:none}
.qty-in input{border:0!important;border-radius:0;text-align:center;padding:8px 2px!important;min-width:0;box-shadow:none!important;-moz-appearance:textfield}
.qty-in input::-webkit-outer-spin-button,.qty-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.row-del{border:0;background:none;color:#ef4444;font-size:22px;cursor:pointer;line-height:1;padding:4px 8px;border-radius:6px}
.row-del:hover{background:var(--red-soft)}
.bf-items-foot{display:flex;align-items:center;gap:16px;padding:12px 18px;flex-wrap:wrap}
.btn-outline{background:#fff;color:#2563eb;border:1px solid #2563eb}
.btn-outline:hover{background:#eff6ff}
.strong{font-weight:700}.red{color:var(--red)}.green{color:var(--green)}
.bf-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:18px;align-items:start}
.bf-left textarea{resize:vertical}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:4px}
.quick-item{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;cursor:pointer;font:inherit;text-align:left}
.quick-item:hover{border-color:var(--brand);background:var(--brand-soft)}
.qi-img{width:100%;height:58px;border-radius:7px;overflow:hidden;background:linear-gradient(135deg,#fff1e8,#fde4d3);display:grid;place-items:center;color:#fdba8c;font-weight:750;font-size:22px}
.qi-img img{width:100%;height:100%;object-fit:cover}
.qi-name{font-size:12.5px;font-weight:600;line-height:1.25}
.qi-price{font-size:12px;color:var(--brand);font-weight:700}
.bf-summary{background:#fbfaf8}
.sm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;font-size:14.5px;font-variant-numeric:tabular-nums}
.sm-input input,.sm-input select{width:52%;max-width:260px;text-align:right}
.sm-input select{text-align:left}
.inline-check{display:inline-flex;align-items:center;gap:7px;margin:0;font-weight:500;font-size:14.5px}
.sm-total{display:flex;justify-content:space-between;align-items:center;border-top:1.5px solid #d6d1c8;border-bottom:1.5px solid #d6d1c8;margin:10px 0 8px;padding:12px 0;font-size:24px;font-weight:750}
.bf-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.bf-actions .bf-bill{grid-column:1/-1;padding:13px;font-size:15.5px}
.bf-actions .bf-bill small{opacity:.7;font-weight:500;margin-left:6px}
.bf-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.ac-drop{position:fixed;z-index:60;background:#fff;border:1px solid #d6d1c8;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.16);max-height:380px;overflow-y:auto;padding:4px}
.ac-drop[hidden]{display:none}
.ac-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer}
.ac-item.sel,.ac-item:hover{background:#eff6ff}
.ac-item.out{opacity:.55}
.ac-thumb{width:40px;height:40px;border-radius:8px;overflow:hidden;flex:none;background:linear-gradient(135deg,#fff1e8,#fde4d3);display:grid;place-items:center;color:#f97316;font-weight:700}
.ac-thumb img{width:100%;height:100%;object-fit:cover}
.ac-main{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.ac-main .small{font-weight:400}
.ac-price{font-weight:700;color:var(--brand);white-space:nowrap;font-size:13.5px}
.ac-empty{padding:14px;color:var(--muted);font-size:13px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;z-index:80;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
@media (max-width:1000px){.bf-bottom{grid-template-columns:1fr}.bf-type{min-width:0}.incl-check{margin-left:0}}

/* ===== v4: bill-level GST/discount, address, menu picker ===== */
.rate-txt{font-weight:600;font-variant-numeric:tabular-nums}
.rate-in{text-align:right;max-width:110px;margin-left:auto}
.disc-group{display:flex;width:52%;max-width:260px}
.disc-group input{border-radius:8px 0 0 8px;text-align:right;flex:1;min-width:0}
.disc-group select{width:62px;border-radius:0 8px 8px 0;border-left:0;flex:none}
.small-check{font-size:12.5px;color:var(--muted);margin-left:10px}
.picker-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 10px;flex-wrap:wrap}
.cat-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cat-chips .chip{font-size:12.5px;padding:5px 12px}
.cat-chips .chip span{font-size:11px;opacity:.65;margin-left:2px}
.quick-grid{max-height:420px;overflow-y:auto;padding:2px}
.quick-item{position:relative}
.quick-item.sold{opacity:.5;cursor:not-allowed}
.qi-img{position:relative}
.qi-badge{position:absolute;top:5px;right:5px;background:var(--brand);color:#fff;min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:700;padding:0 6px}
.qi-flag{position:absolute;left:5px;bottom:5px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.qi-name .veg-dot{margin-right:4px}
.size-pop{position:fixed;z-index:70;background:#fff;border:1px solid #d6d1c8;border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.18);padding:6px;display:flex;gap:6px}
.size-pop[hidden]{display:none}
.size-pop button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 14px;cursor:pointer;font:inherit;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:86px}
.size-pop button b{color:var(--brand)}
.size-pop button:hover{border-color:var(--brand);background:var(--brand-soft)}
.small-check{white-space:nowrap}

/* =====================================================================
   v5: MOBILE-FIRST + LOGIN
   ===================================================================== */
.m-only{display:none}
.bottom-nav,.m-bar,.side-overlay{display:none}
.top-order-btn{display:none}

/* ---------- Login ---------- */
.login-body{background:#f5f3ef}
.lg-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,1fr)}
.lg-info{background:radial-gradient(1200px 600px at -10% -10%,#7c2d12 0%,transparent 60%),linear-gradient(150deg,#1c1917 0%,#292524 55%,#44281a 100%);color:#e7e5e4;padding:48px 56px;display:flex;flex-direction:column;gap:28px}
.lg-brand{display:flex;gap:14px;align-items:center}
.lg-brand .brand-logo{width:48px;height:48px;font-size:22px;border-radius:12px}
.lg-name{color:#fff;font-weight:700;font-size:18px}
.lg-sub{color:#a8a29e;font-size:13px}
.lg-hero{font-size:34px;line-height:1.2;color:#fff;font-weight:750;letter-spacing:-.02em;margin-top:20px}
.lg-hero span{display:block;font-size:19px;font-weight:500;color:#d6d3d1;margin-top:8px;letter-spacing:0}
.lg-today{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lg-today div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px}
.lg-today span{display:block;font-size:11.5px;color:#a8a29e;text-transform:uppercase;letter-spacing:.05em}
.lg-today strong{color:#fff;font-size:15px}
.lg-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lg-features li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.04);border-radius:12px;padding:14px}
.lg-features b{font-size:22px;line-height:1}
.lg-features strong{display:block;color:#fff;font-size:14px}
.lg-features span{font-size:12.5px;color:#a8a29e;line-height:1.45}
.lg-contact{margin-top:auto;font-size:13px;color:#a8a29e;display:flex;flex-direction:column;gap:4px}
.lg-form-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px}
.lg-form{width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.lg-form h2{font-size:24px}
.lg-input{display:flex;align-items:center;border:1px solid #d6d1c8;border-radius:10px;background:#fff;padding:0 4px 0 12px}
.lg-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(194,65,12,.12)}
.lg-input svg{width:18px;height:18px;fill:#a8a29e;flex:none}
.lg-input input{border:0!important;box-shadow:none!important;padding:13px 10px;font-size:16px}
.lg-eye{border:0;background:#f5f3ef;border-radius:7px;padding:6px 10px;font:inherit;font-size:12px;cursor:pointer;color:#57534e;flex:none}
.lg-btn{padding:14px;font-size:16px;border-radius:10px;margin-top:6px}
.lg-hint{margin-top:18px;background:var(--amber-soft);color:#78350f;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.6}
.lg-hint code{background:#fff;padding:1px 6px;border-radius:5px;font-size:12.5px}
.lg-help{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}
.lg-foot{margin-top:18px;font-size:12px;color:var(--muted)}
@media (max-width:900px){
  .lg-wrap{grid-template-columns:1fr}
  .lg-info{padding:26px 20px 70px;gap:18px}
  .lg-hero{font-size:26px;margin-top:4px}.lg-hero span{font-size:16px}
  .lg-today{grid-template-columns:repeat(2,1fr)}
  .lg-features{grid-template-columns:1fr 1fr;gap:8px}
  .lg-features li{padding:10px;gap:8px}.lg-features span{display:none}
  .lg-contact{margin-top:0}
  .lg-form-wrap{padding:0 16px 30px;margin-top:-50px;justify-content:flex-start}
  .lg-form{padding:24px 20px}
}

/* ---------- Mobile (phone) ---------- */
@media (max-width:820px){
  html{-webkit-text-size-adjust:100%}
  body{font-size:14.5px;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  input,select,textarea{font-size:16px!important}           /* iOS zoom band */
  .m-only{display:inline-flex}
  .side-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:19;opacity:0;pointer-events:none;transition:opacity .2s}
  .sidebar.open~.main .side-overlay,.sidebar.open+.side-overlay{opacity:1;pointer-events:auto}
  .layout:has(.sidebar.open) .side-overlay{opacity:1;pointer-events:auto}
  .sidebar{width:264px;z-index:30}
  .topbar{padding:10px 14px;gap:10px;padding-top:calc(10px + env(safe-area-inset-top))}
  .topbar h1{font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
  .menu-toggle{padding:7px 11px}
  .top-order-btn{display:inline-flex;background:var(--brand);color:#fff;font-weight:650;font-size:13px;padding:7px 12px;border-radius:999px;white-space:nowrap}
  .content{padding:14px 12px 24px}
  .card{padding:14px;border-radius:14px;margin-bottom:14px}
  .card-head{margin-bottom:10px}
  .grid{gap:14px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat{padding:12px 14px;border-radius:14px}
  .stat .value{font-size:19px}
  .stat .sub{font-size:11.5px}
  .btn{padding:11px 16px}
  .btn-sm{padding:7px 12px}
  .inline-form{width:100%}
  .inline-form .field{flex:1 1 140px}
  .inline-form .btn{flex:1}
  .row{gap:10px}
  .row>.field{min-width:120px}
  .alert{margin-bottom:12px}

  /* Bottom tab bar */
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:#fff;border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(0,0,0,.05)}
  .bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#78716c;font:inherit;font-size:11px;font-weight:600;background:none;border:0;padding:4px 0;cursor:pointer}
  .bottom-nav svg{width:22px;height:22px;fill:currentColor}
  .bottom-nav .active{color:var(--brand)}

  /* Tables -> cards */
  table.rcards,table.rcards tbody,table.rcards tfoot{display:block}
  table.rcards thead{display:none}
  table.rcards tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff}
  table.rcards td{border:0;padding:0;min-width:0}
  table.rcards td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:1px}
  table.rcards td:first-child{grid-column:1/-1;font-size:15px}
  table.rcards td.num{text-align:left}
  table.rcards td.actions,table.rcards td:last-child:has(.actions),table.rcards td:last-child:has(form){grid-column:1/-1;justify-content:flex-start!important}
  table.rcards td.actions::before{display:none!important}
  table.rcards td.empty,table.rcards td[colspan]{grid-column:1/-1}
  table.rcards td.empty::before,table.rcards tfoot td::before{display:none!important}
  table.rcards tfoot tr{background:#faf9f7}
  table.rcards td:empty{display:none}
  .table-wrap{overflow:visible}
  .item-cell{gap:10px}
  .actions .btn-sm{padding:8px 12px}

  /* Tables screen */
  .tables-head{flex-direction:column;align-items:stretch;gap:10px}
  .tables-head .actions{display:grid;grid-template-columns:1fr 1fr}
  .tables-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .table-card{min-height:96px;padding:11px;border-radius:12px}
  .t-name{font-size:17px}.t-amt{font-size:15px}.t-time{font-size:10.5px;padding:1px 6px}

  /* Menu / expenses forms */
  .g-side{grid-template-columns:1fr!important}
  .img-upload{flex-direction:row}
}
@media (max-width:340px){.tables-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- POS on phone ---------- */
@media (max-width:820px){
  body.pos-page{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  body.pos-page .bottom-nav{display:none}
  .bill-form{gap:12px}
  .bf-top{padding:10px 12px;gap:10px;border-radius:14px}
  .bf-top .btn-sm{order:0}
  .bf-title{order:1}
  .bf-type{order:3;width:100%;min-width:0}
  .bf-table{order:2}
  .bf-table input{width:64px}
  .bf-items{border-radius:14px}
  .bf-items-head{padding:10px 12px;gap:10px;position:sticky;top:0;background:#fff;z-index:5;border-radius:14px 14px 0 0}
  .bf-items-head h2{display:none}
  .scan-box{flex:1 1 100%}
  .bf-table-grid thead{display:none}
  .bf-table-grid,.bf-table-grid tbody{display:block}
  .bf-table-grid tr{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"item item del" "size qty amt";gap:8px 10px;padding:12px;border-bottom:1px solid var(--line);align-items:center}
  .bf-table-grid td{padding:0;border:0}
  .bf-table-grid td:nth-child(1){display:none}
  .bf-table-grid td:nth-child(2){grid-area:item}
  .bf-table-grid td:nth-child(3){grid-area:size}
  .bf-table-grid td:nth-child(4){grid-area:qty}
  .bf-table-grid td:nth-child(5){display:none}
  .bf-table-grid td:nth-child(5):has(input){display:block;grid-area:size}
  .bf-table-grid td:nth-child(6){grid-area:amt;min-width:76px;font-size:15px}
  .bf-table-grid td:nth-child(7){grid-area:del;align-self:start}
  .bf-table-grid td[colspan]{grid-column:1/-1;display:block}
  .bf-table-grid td:nth-child(3) select{max-width:110px}
  .rate-in{max-width:120px;margin:0;text-align:left}
  .it-cell{min-width:0}
  .it-thumb{width:44px;height:44px}
  .m-rate{font-weight:700;color:var(--brand)}
  .qty-in button{width:36px;font-size:18px}
  .qty-in input{width:44px}
  .bf-items-foot{padding:10px 12px;gap:10px}
  .bf-items-foot .small{display:none}
  .bf-bottom{grid-template-columns:1fr!important;grid-template-areas:"pick" "cust" "sum"!important;gap:12px}
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;gap:8px}
  .qi-img{height:64px}
  .cat-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px 10px;padding:0 14px 4px;scrollbar-width:none}
  .cat-chips::-webkit-scrollbar{display:none}
  .cat-chips .chip{white-space:nowrap;flex:none;padding:7px 14px}
  .sm-row{font-size:14.5px}
  .sm-input input,.sm-input select,.disc-group{width:50%}
  .sm-total{font-size:21px}
  .bf-actions{display:none}
  .m-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px;align-items:center;background:#fff;border-top:1px solid var(--line);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.08)}
  .m-bar-total{flex:1;display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .m-bar-total span{font-size:11.5px;color:var(--muted)}
  .m-bar-total strong{font-size:19px;font-variant-numeric:tabular-nums}
  .m-bar .btn{padding:12px 13px}
  .m-bar .btn-green{padding:12px 18px}
  .m-bar .btn:disabled{opacity:.45}
  .ac-drop{left:12px!important;right:12px;width:auto!important}
  .bf-summary .bf-actions{display:grid}
}
.bf-bottom{grid-template-areas:"cust sum" "pick sum"}
.bf-cust{grid-area:cust}.bf-pick{grid-area:pick}.bf-summary{grid-area:sum;align-self:start}
@media (min-width:821px){.bf-summary{position:sticky;top:84px}}
@media (min-width:821px) and (max-width:1000px){.bf-bottom{grid-template-areas:"cust" "pick" "sum"}.bf-summary{position:static}}
.bf-bottom>*,.bill-form>*{min-width:0}@media (max-width:820px){.bf-bottom{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:820px){.bf-actions .bf-bill small{display:none}}
/* login layout: info / form / more */
.lg-wrap{grid-template-areas:"info form" "more form";grid-template-rows:auto 1fr}
.lg-info{grid-area:info;padding-bottom:10px}
.lg-more{grid-area:more;background:linear-gradient(150deg,#292524 0%,#44281a 100%);color:#e7e5e4;padding:10px 56px 48px;display:flex;flex-direction:column;gap:24px}
.lg-form-wrap{grid-area:form}
@media (max-width:900px){
  .lg-wrap{grid-template-areas:"info" "form" "more";grid-template-rows:auto}
  .lg-info{padding:22px 20px 64px}
  .lg-more{background:none;color:var(--ink);padding:4px 16px 30px;gap:12px}
  .lg-more .lg-today div{background:#fff;border-color:var(--line)}
  .lg-more .lg-today strong,.lg-more .lg-features strong{color:var(--ink)}
  .lg-more .lg-features li{background:#fff;border:1px solid var(--line)}
  .lg-more .lg-features span{display:block;color:var(--muted)}
  .lg-features{grid-template-columns:1fr}
  .lg-contact{color:var(--muted)}
  .lg-form-wrap{padding-bottom:18px}
}
@media (min-width:901px){.lg-info,.lg-more{background:linear-gradient(150deg,#1c1917 0%,#292524 50%,#4a2a17 100%) fixed;background-size:100vw 100vh}}
@media (max-width:820px){.bf-pick{display:none!important}.bf-bottom{grid-template-areas:"cust" "sum"!important}}

/* ===== v6: users, permissions, branding ===== */
.brand-logo.has-img{background:#fff;padding:3px;overflow:hidden}
.brand-logo.has-img img{width:100%;height:100%;object-fit:contain}
.user-role{font-size:11px;color:#a8a29e;font-weight:500}
.tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:10px 14px;color:var(--muted);font-weight:600;font-size:14px;border-bottom:2.5px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;flex:none}
.perm-chips{display:flex;flex-wrap:wrap;gap:4px}
.perm-chips span{font-size:11.5px;background:#f1efeb;color:#57534e;padding:2px 8px;border-radius:999px}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.perm-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px;margin:0;font-weight:500;cursor:pointer;background:#fff}
.perm-item:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.perm-item.locked{opacity:.75;cursor:not-allowed}
.perm-item input{margin-top:3px}
.perm-item strong{display:block;font-size:13px}
.perm-item small{display:block;color:var(--muted);font-size:11.5px;font-weight:400;line-height:1.35}
.brand-preview{border:1.5px dashed #d6d1c8;border-radius:12px;background:#faf9f7;display:grid;place-items:center;color:var(--muted);font-size:13px;overflow:hidden;margin-bottom:12px}
.logo-prev{height:150px;background:repeating-conic-gradient(#f1efeb 0 25%,#fff 0 50%) 50%/18px 18px}
.logo-prev img{max-width:85%;max-height:130px;object-fit:contain}
.fav-row{display:flex;gap:14px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.fav-prev{width:84px;height:84px;margin:0}
.fav-prev img{width:64px;height:64px;object-fit:contain}
.fake-tab{display:flex;align-items:center;gap:8px;background:#f1efeb;border-radius:10px 10px 0 0;padding:9px 14px;font-size:13px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-icon{width:16px;height:16px;flex:none;border-radius:3px;background:#d6d1c8;overflow:hidden}
.ft-icon img{width:100%;height:100%;object-fit:contain}
.lg-brand .brand-logo.has-img{background:#fff}
@media (max-width:820px){.perm-grid{grid-template-columns:1fr}.tabs{margin:-4px -12px 14px;padding:0 12px}}

/* =====================================================================
   v7: MOBILE APP LOOK
   ===================================================================== */
.stat.amber .value{color:var(--amber)}
.m-only-block,.sheet-handle,.app-back,.app-avatar,.app-sub,.m-filter-btn,.fab{display:none}
.app-title{display:flex;flex-direction:column;min-width:0}

@media (max-width:820px){
  body{background:#f3f1ee}
  /* App bar */
  .topbar{background:#1c1917;border-bottom:0;color:#fff;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));gap:10px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
  .menu-toggle,.top-order-btn{display:none!important}
  .app-back{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;padding-bottom:3px;flex:none}
  .app-title{flex:1}
  .app-sub{display:block;font-size:11px;color:#a8a29e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
  .topbar h1{color:#fff;font-size:17px;line-height:1.25}
  .app-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:14px;flex:none}

  /* More = bottom sheet */
  .sidebar{top:auto!important;left:0;right:0;bottom:0;width:auto!important;max-height:86vh;border-radius:22px 22px 0 0;background:#fff;color:var(--ink);
    transform:translateY(105%)!important;transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom)}
  .sidebar.open{transform:translateY(0)!important}
  .sheet-handle{display:block;width:44px;height:5px;border-radius:9px;background:#d6d3d1;margin:10px auto 2px;cursor:pointer}
  .sidebar .brand{border-bottom:1px solid var(--line);padding:10px 18px 14px}
  .sidebar .brand-name{color:var(--ink)}
  .sidebar nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
  .sidebar nav a{flex-direction:column;gap:7px;padding:12px 4px;border-radius:14px;color:#44403c;font-size:12.5px;font-weight:600;text-align:center;margin:0;background:#faf9f7;border:1px solid var(--line)}
  .sidebar nav a svg{width:24px;height:24px;opacity:1;color:var(--brand)}
  .sidebar nav a.active{background:var(--brand-soft);border-color:#fed7aa;color:var(--brand)}
  .sidebar nav a:hover{background:var(--brand-soft);color:var(--brand)}
  .sidebar-foot{border-top:1px solid var(--line);padding:12px 18px 16px}
  .sidebar-foot .user{color:var(--ink);font-weight:600}
  .sidebar-foot .logout{background:var(--red-soft);color:var(--red);padding:8px 14px;border-radius:10px;font-weight:600}

  /* Bottom tab bar with center FAB */
  .bottom-nav{border-top:0;box-shadow:0 -6px 24px rgba(0,0,0,.08);border-radius:18px 18px 0 0;padding-top:8px}
  .bottom-nav a,.bottom-nav button{position:relative}
  .bottom-nav a svg,.bottom-nav button svg{padding:3px 12px;width:46px;height:28px;border-radius:999px;box-sizing:border-box}
  .bottom-nav .active svg{background:var(--brand-soft)}
  .bn-fab{margin-top:-26px}
  .fab-circle{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(145deg,#ea580c,#c2410c);color:#fff;font-size:32px;font-weight:300;line-height:1;
    box-shadow:0 8px 20px rgba(194,65,12,.4);border:4px solid #f3f1ee;margin-bottom:1px}
  .bn-fab.active span:last-child{color:var(--brand)}

  /* Floating add button */
  .fab{display:grid!important;place-items:center;position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:22;width:56px;height:56px;border-radius:18px;
    background:var(--brand);color:#fff!important;font-size:30px;font-weight:300;box-shadow:0 10px 24px rgba(194,65,12,.4)}

  /* Home */
  .m-only-block{display:block}
  .home-hero{background:linear-gradient(140deg,#c2410c,#9a3412 60%,#7c2d12);color:#fff;border-radius:20px;padding:18px;margin-bottom:14px;box-shadow:0 10px 26px rgba(154,52,18,.3)}
  .hh-greet{font-size:19px;font-weight:700}
  .hh-sub{font-size:12.5px;opacity:.8;margin-bottom:14px}
  .hh-sale{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hh-sale div{background:rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column}
  .hh-sale span{font-size:11.5px;opacity:.85}
  .hh-sale strong{font-size:19px}
  .hh-sale small{font-size:11px;opacity:.75}
  .quick-actions{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff;border-radius:18px;padding:14px 8px;margin-bottom:14px;box-shadow:var(--shadow)}
  .quick-actions a{display:flex;flex-direction:column;align-items:center;gap:6px;color:#44403c;font-size:11.5px;font-weight:600;text-align:center}
  .qa-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#fff7ed;font-size:23px;border:1px solid #fde4d3}
  .home-hero ~ .grid.g4 .stat:first-child{display:none}
  .home-hero ~ .grid.g4{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
  .home-hero ~ .grid.g4 .stat{padding:10px}
  .home-hero ~ .grid.g4 .stat .value{font-size:15px}
  .home-hero ~ .grid.g4 .stat .label{font-size:10px}
  .home-hero ~ .grid.g4 .stat .sub{display:none}

  /* Cards & lists */
  .card{border:0;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.04)}
  .stat{border:0;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.04)}
  .card-head h2{font-size:16px}
  table.rcards tr{border:0;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);padding:14px}
  .card table.rcards tr{box-shadow:none;border:1px solid var(--line)}
  input[type=text],input[type=number],input[type=date],input[type=password],input[type=tel],input[type=search],select,textarea{border-radius:12px;padding:11px 12px}
  .btn{border-radius:12px}
  .alert{border-radius:14px}
  .badge{padding:3px 10px}

  /* Filter toggle */
  .m-filter-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #d6d1c8;background:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;color:#44403c;cursor:pointer}
  .m-filter-btn svg{width:15px;height:15px;fill:currentColor}
  .m-filter-btn.on{border-color:var(--brand);color:var(--brand)}
  .m-filter-btn i{width:7px;height:7px;border-radius:50%;background:var(--brand);display:inline-block}
  .m-filter-btn.open{background:var(--ink);color:#fff;border-color:var(--ink)}
  form.inline-form.m-collapsed{display:none!important}
  .card-head form.inline-form{order:5;width:100%;background:#faf9f7;border-radius:14px;padding:12px}

  /* Segmented tabs & chips */
  .tabs{border:0;background:#e7e5e4;border-radius:14px;padding:4px;gap:4px;margin:0 0 14px}
  .tabs a{border:0;border-radius:11px;padding:9px 14px;font-size:13px;margin:0}
  .tabs a.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1)}
  .card.no-print .actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px}
  .card.no-print .actions::-webkit-scrollbar{display:none}
  .card.no-print .actions .btn{flex:none;border-radius:999px}
  .card.no-print .card-head{gap:10px}

  /* Tables screen as app tiles */
  .table-card{border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .table-card.free{border:1.5px solid #dcfce7;background:#fff}
}
.grid>*{min-width:0}@media (max-width:820px){table.rcards td{overflow-wrap:anywhere}.g-side{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:820px){.bottom-nav{padding-left:2px;padding-right:2px}.bottom-nav a,.bottom-nav button{min-width:0;font-size:10.5px}.bottom-nav a span,.bottom-nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bottom-nav a svg,.bottom-nav button svg{width:40px;padding:3px 9px}.bn-fab{flex:1.1}.fab-circle{width:52px;height:52px}}
.img-upload>div{min-width:0}input[type=file]{max-width:100%;width:100%;font-size:13px}

/* ===== v8: POS plain names, app-style menu & categories ===== */
.it-title{font-weight:600;font-size:14px;line-height:1.3;display:flex;align-items:center;gap:6px}
.items-qty{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.items-qty strong{color:var(--ink)}
a.chip{display:inline-flex;align-items:center;color:#44403c;text-decoration:none}
a.chip.active{color:#fff}
.chip-red{border-color:#fecaca;color:var(--red)!important}
.chip-red.active{background:var(--red);border-color:var(--red);color:#fff!important}
.chip-ghost{border-style:dashed}
.cat-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:13px;margin-right:10px;vertical-align:middle}
.cat-count{font-weight:700}
.cat-count span{font-weight:400;color:var(--muted);font-size:12px}

@media (max-width:820px){
  .items-qty{margin-left:0;width:100%;text-align:right;order:3}
  .bf-table-grid td:nth-child(2) .it-cell{align-items:center}
  .it-title{font-size:15px}

  /* Menu list as app cards */
  .menu-filter-form{display:none!important}
  .m-menu-tools{margin:-2px 0 12px}
  .m-search{display:flex;align-items:center;gap:8px;background:#f5f3ef;border-radius:14px;padding:0 12px;margin-bottom:10px}
  .m-search svg{width:20px;height:20px;fill:#a8a29e;flex:none}
  .m-search input{border:0!important;background:transparent!important;box-shadow:none!important;padding:12px 0!important}
  .m-cats{margin:0 -14px;padding:0 14px 4px}
  .m-cats .chip{padding:7px 14px;font-size:13px}
  .menu-list thead,.cat-list thead{display:none}
  .menu-list,.menu-list tbody,.cat-list,.cat-list tbody{display:block}
  .menu-list tr{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"item item price" "cat stock status" "act act act";
    gap:10px 10px;padding:12px;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;background:#fff;align-items:center}
  .menu-list td{padding:0;border:0;min-width:0}
  .menu-list td:nth-child(1){grid-area:item}
  .menu-list td:nth-child(2){grid-area:cat;font-size:12px;color:#57534e}
  .menu-list td:nth-child(2)::before{content:"🗂 ";}
  .menu-list td:nth-child(3){grid-area:price;text-align:right;align-self:start}
  .menu-list td:nth-child(3) strong{font-size:15px;color:var(--brand)}
  .menu-list td:nth-child(4){grid-area:stock}
  .menu-list td:nth-child(5){grid-area:status}
  .menu-list td:nth-child(6){grid-area:act;justify-content:flex-end!important;border-top:1px dashed var(--line);padding-top:10px}
  .menu-list td[colspan]{grid-column:1/-1}
  .menu-list .thumb{width:62px;height:62px;border-radius:14px}
  .menu-list .item-cell strong{font-size:15px}
  .menu-list .stock-form input{width:56px;padding:6px 8px!important;font-size:14px!important}
  .menu-list .actions .btn{padding:7px 14px}
  .menu-list .actions .btn-red{background:#fff;color:var(--red);border:1px solid #fecaca}

  /* Categories list */
  .cat-list tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name count" "act act";gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;background:#fff;align-items:center}
  .cat-list td{padding:0;border:0}
  .cat-list td:nth-child(1){display:none}
  .cat-list td:nth-child(2){grid-area:name;font-size:15px}
  .cat-list td:nth-child(3){grid-area:count}
  .cat-list td:nth-child(3) .cat-count{background:#f5f3ef;padding:5px 12px;border-radius:999px;font-size:13px;color:var(--ink)}
  .cat-list td:nth-child(4){grid-area:act;justify-content:flex-end!important}
  .cat-list td[colspan]{grid-column:1/-1;display:block}
  .cat-list .actions .btn-red{background:#fff;color:var(--red);border:1px solid #fecaca}
  .cat-ico{width:38px;height:38px;border-radius:12px;font-size:15px}
}
@media (max-width:820px){.cat-list tr{grid-template-columns:1fr auto auto;grid-template-areas:"name count act";padding:10px 12px}.cat-list td:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cat-list .actions .btn{padding:6px 10px;font-size:12.5px}.cat-list td:nth-child(3) .cat-count span{display:none}}
@media (max-width:820px){.cat-list td:nth-child(2){white-space:normal;display:flex;align-items:center;line-height:1.25}.cat-list .cat-ico{flex:none}}

/* ===== v9: category images, app-style orders ===== */
.cat-ico.has-img{background:#fff;padding:0;overflow:hidden;border:1px solid var(--line)}
.cat-ico.has-img img{width:100%;height:100%;object-fit:cover}
.chip-img{gap:6px}
.chip-ico{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:700;overflow:hidden;flex:none;margin-left:-6px}
.chip-ico img{width:100%;height:100%;object-fit:cover}
.chip.active .chip-ico:not(.has-img){background:rgba(255,255,255,.2);color:#fff}
.o-due{font-size:11.5px;color:var(--red);font-weight:600}
.o-type{white-space:nowrap}

@media (max-width:820px){
  .cat-list .cat-ico{width:46px;height:46px;border-radius:14px}
  /* Orders as app cards */
  .order-filter-form,.o-new-btn{display:none!important}
  .o-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;margin-bottom:12px!important}
  .o-stats .stat{padding:10px 12px}
  .o-stats .stat .value{font-size:15px}
  .o-stats .stat .label{font-size:10px}
  .o-stats .stat .sub{display:none}
  .m-order-tools{margin-bottom:12px}
  .m-order-tools .cat-chips{margin:0 -14px 8px;padding:0 14px 2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .m-order-tools .cat-chips::-webkit-scrollbar{display:none}
  .m-order-tools .chip{flex:none;white-space:nowrap;padding:7px 13px;font-size:13px}
  .m-order-tools .chip span{font-size:11px;opacity:.7;margin-left:3px}
  .chip.st-Open.active{background:var(--blue);border-color:var(--blue)}
  .chip.st-Paid.active{background:var(--green);border-color:var(--green)}
  .chip.st-Unpaid.active{background:var(--amber);border-color:var(--amber)}
  .chip.st-Cancelled.active{background:var(--red);border-color:var(--red)}
  .date-chips{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .date-chips::-webkit-scrollbar{display:none}
  .date-chips a{flex:none;font-size:12px;font-weight:600;color:#57534e;padding:5px 11px;border-radius:8px;background:#f5f3ef}
  .date-chips a.active{background:var(--brand-soft);color:var(--brand)}
  .dc-range{flex:none;font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}
  .order-list thead{display:none}
  .order-list,.order-list tbody{display:block}
  .order-list tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"inv status" "cust total" "type pay" "date date" "act act";
    gap:4px 10px;padding:13px 14px 12px 16px;border:1px solid var(--line);border-left:4px solid #d6d3d1;border-radius:16px;margin-bottom:10px;background:#fff;align-items:center}
  .order-list tr.o-open{border-left-color:var(--blue)}
  .order-list tr.o-paid{border-left-color:#22c55e}
  .order-list tr.o-unpaid{border-left-color:#f59e0b}
  .order-list tr.o-cancelled{border-left-color:var(--red);opacity:.75}
  .order-list td{padding:0;border:0;min-width:0}
  .order-list td:nth-child(1){grid-area:inv;font-size:13px}
  .order-list td:nth-child(1) strong{color:var(--muted);font-weight:600}
  .order-list td.o-date{grid-area:date;font-size:11.5px}
  .order-list td.o-cust{grid-area:cust;font-size:15.5px;font-weight:650}
  .order-list td.o-cust .muted{font-weight:400}
  .order-list td.o-type{grid-area:type;font-size:12.5px;color:#57534e}
  .order-list td.o-pay{grid-area:pay;font-size:12.5px;color:#57534e;text-align:right}
  .order-list td.o-pay .small{display:inline;margin-left:4px}
  .order-list td.o-status{grid-area:status;text-align:right}
  .order-list td.o-total{grid-area:total;text-align:right}
  .order-list td.o-total strong{font-size:18px}
  .order-list td.actions{grid-area:act;justify-content:flex-end!important;border-top:1px dashed var(--line);padding-top:10px;margin-top:6px}
  .order-list td[colspan]{grid-column:1/-1;display:block}
  .order-list .actions .btn{padding:7px 14px}
  .order-list .actions .btn-red{background:#fff;color:var(--red);border:1px solid #fecaca}
}