:root{--pp:#5d3fd3;--pp2:#7b5cf0;--pbg:#f4f5fa}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{font-family:'Inter',sans-serif;background:var(--pbg);overflow-x:clip;max-width:100vw}
body.pnl-menu-open{overflow:hidden}

.pnl-wrap{display:flex;min-height:100vh;width:100%;max-width:100%;overflow-x:clip}
.pnl-backdrop{
  display:none;position:fixed;inset:0;background:rgba(15,15,30,.45);
  z-index:1045;opacity:0;transition:opacity .25s ease;
}
.pnl-backdrop.show{display:block;opacity:1}

.pnl-side{
  width:250px;max-width:85vw;background:#1a1a2e;color:#cfcfe0;
  position:fixed;top:0;bottom:0;left:0;overflow-y:auto;
  transition:transform .25s ease;z-index:1050;
  -webkit-overflow-scrolling:touch;
}
.pnl-side .brand{padding:1.1rem 1.2rem;font-weight:900;color:#fff;font-size:1.15rem;border-bottom:1px solid rgba(255,255,255,.08)}
.pnl-side a.nav-link{color:#b9b9cf;padding:.7rem 1.2rem;display:flex;align-items:center;gap:.7rem;font-size:.9rem;border-radius:0}
.pnl-side a.nav-link:hover,.pnl-side a.nav-link.active{background:rgba(93,63,211,.25);color:#fff;border-left:3px solid var(--pp2)}
.pnl-side .nav-sec{font-size:.7rem;text-transform:uppercase;color:#6b6b85;padding:.9rem 1.2rem .3rem;letter-spacing:.05em}

.pnl-main{margin-left:250px;flex:1;min-width:0;max-width:100%;transition:margin .25s ease}
.pnl-top{
  background:#fff;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  box-shadow:0 2px 10px rgba(0,0,0,.04);position:sticky;top:0;z-index:1040;min-width:0;
}
.pnl-top h6{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-body{padding:1rem;max-width:100%;overflow-x:clip}
@media(min-width:768px){.pnl-body{padding:1.2rem}}
@media(min-width:992px){.pnl-top{padding:.8rem 1.2rem}}

.stat-card{background:#fff;border-radius:14px;padding:1.1rem;box-shadow:0 4px 18px rgba(20,20,50,.06);border:0}
.stat-card .ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.card{border:0;border-radius:14px;box-shadow:0 4px 18px rgba(20,20,50,.06);max-width:100%}
.table>:not(caption)>*>*{padding:.6rem .75rem}
.btn-primary{background:var(--pp);border-color:var(--pp)}
.btn-primary:hover{background:#4a2fb0;border-color:#4a2fb0}
.empty-state{text-align:center;padding:2.5rem 1rem;color:#6b7280}
.empty-state i{font-size:2.5rem;opacity:.4;display:block;margin-bottom:.75rem}
.alert{border-radius:12px;border:0}
.form-control,.form-select{border-radius:10px}
.btn{border-radius:10px}
.card{border-radius:16px}
.stat-card{transition:transform .15s ease}
.stat-card:hover{transform:translateY(-2px)}
.text-primary{color:var(--pp)!important}
.pnl-toggle{display:none;flex-shrink:0}

/* Responsive tables & content inside panels */
.pnl-body .table-responsive{
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  margin:0 -.25rem;padding:0 .25rem;
}
.pnl-body .table{min-width:0}
.pnl-body img,video,iframe{max-width:100%;height:auto}
.pnl-body .form-control,.pnl-body .form-select{max-width:100%}
.pnl-body .d-flex.gap-2.flex-wrap,.pnl-body form.d-flex{flex-wrap:wrap}
.pnl-body .row{margin-left:0;margin-right:0}
.pnl-body .row>[class*="col-"]{min-width:0;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5)}
.pnl-body .nav-tabs{
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;border-bottom:1px solid var(--bs-border-color);
}
.pnl-body .nav-tabs::-webkit-scrollbar{display:none}
.pnl-body .nav-tabs .nav-item{flex-shrink:0}
.pnl-body .card.p-0 .p-4{padding:1rem!important}
@media(min-width:768px){.pnl-body .card.p-0 .p-4{padding:1.5rem!important}}

@media(max-width:991px){
  .pnl-side{transform:translateX(-100%)}
  .pnl-side.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.18)}
  .pnl-main{margin-left:0;width:100%}
  .pnl-toggle{display:inline-flex;align-items:center;justify-content:center}
  .pnl-body .card{padding:.85rem!important}
  .pnl-body .table{font-size:.88rem}
  .pnl-body .table .btn-sm{padding:.2rem .45rem;font-size:.75rem}
  body.has-pnl-tabbar .pnl-body{
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
  }
  body.has-pnl-tabbar .pnl-body:has(.pos-app){
    padding-bottom:calc(72px + 88px + env(safe-area-inset-bottom,0px));
  }
  body.has-pnl-tabbar .pos-sticky-bar{
    left:0;
    bottom:calc(56px + env(safe-area-inset-bottom,0px));
  }
}

/* Mobile bottom tab bar (native app style) */
.pnl-tabbar{
  display:none;
}
@media(max-width:991px){
  .pnl-tabbar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:1042;
    align-items:stretch;justify-content:space-around;
    background:#fff;
    border-top:1px solid #e8eaf0;
    box-shadow:0 -4px 24px rgba(15,15,30,.08);
    padding-bottom:env(safe-area-inset-bottom,0px);
    min-height:calc(56px + env(safe-area-inset-bottom,0px));
  }
  .pnl-tab-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.15rem;padding:.45rem .25rem .35rem;
    border:0;background:transparent;color:#9ca3af;
    font-size:.62rem;font-weight:700;text-decoration:none;
    min-width:0;max-width:20%;line-height:1.1;
    -webkit-tap-highlight-color:transparent;
  }
  .pnl-tab-item i{font-size:1.25rem;line-height:1}
  .pnl-tab-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .15rem}
  .pnl-tab-item.active{color:var(--pp)}
  .pnl-tab-item.active i{transform:scale(1.05)}
  .pnl-tab-item:active{opacity:.7}
}

@media(max-width:575px){
  .pnl-top h6{font-size:.92rem;max-width:42vw}
  .pnl-body .table-responsive{margin:0 -.5rem;padding:0 .5rem}
}

/* ========== Mobile POS App ========== */
.pos-app{display:flex;flex-direction:column;gap:.85rem;margin:-.25rem}
.pos-section{background:#fff;border-radius:16px;padding:1rem;box-shadow:0 2px 12px rgba(20,20,50,.06)}
.pos-section-last{margin-bottom:.5rem}
.pos-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.pos-section-head h2{font-size:.95rem;font-weight:800;margin:0;display:flex;align-items:center;gap:.45rem}
.pos-section-head h2 i{color:var(--pp)}
.pos-badge{font-size:.72rem;font-weight:700;background:#ede9fe;color:var(--pp);padding:.25rem .55rem;border-radius:999px}
.pos-search-wrap{position:relative;margin-bottom:.75rem}
.pos-search-wrap i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#9ca3af}
.pos-search-wrap input{padding-left:2.4rem;border-radius:12px;border:1.5px solid #e5e7eb;height:44px}
.pos-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch}
@media(min-width:768px){.pos-quick-grid{grid-template-columns:repeat(3,1fr);max-height:320px}}
.pos-quick-item{border:1.5px solid #eef0f4;background:#fafbff;border-radius:14px;padding:.55rem;text-align:left;transition:transform .12s,border-color .12s}
.pos-quick-item:active{transform:scale(.97);border-color:var(--pp)}
.pos-quick-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:.35rem;background:#f3f4f6}
.pos-quick-name{display:block;font-size:.78rem;font-weight:700;line-height:1.25;color:#111;max-height:2.5em;overflow:hidden}
.pos-quick-meta{display:block;font-size:.68rem;color:#6b7280;margin-top:.15rem}
.pos-cart-list{min-height:60px}
.pos-empty{text-align:center;padding:1.5rem 1rem;color:#9ca3af}
.pos-empty i{font-size:2rem;display:block;margin-bottom:.4rem;opacity:.5}
.pos-cart-row{display:grid;grid-template-columns:1fr auto auto auto;gap:.5rem;align-items:center;padding:.65rem 0;border-bottom:1px solid #f1f3f6}
.pos-cart-row:last-child{border-bottom:0}
.pos-cart-qty{display:flex;align-items:center;gap:.35rem;background:#f4f5fa;border-radius:10px;padding:.15rem .35rem}
.pos-qty-btn{width:28px;height:28px;border:0;background:#fff;border-radius:8px;font-weight:800;font-size:1rem;line-height:1;color:var(--pp);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pos-cart-amt{font-weight:800;font-size:.88rem;white-space:nowrap}
.pos-cart-remove{border:0;background:transparent;color:#ef4444;padding:.25rem;font-size:1rem}
.pos-field{margin-bottom:.65rem}
.pos-field label{display:block;font-size:.75rem;font-weight:700;color:#6b7280;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.03em}
.pos-pay-chips{display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}
.pos-pay-chip{flex:1;min-width:0;margin:0;cursor:pointer}
.pos-pay-chip input{position:absolute;opacity:0;pointer-events:none}
.pos-pay-chip span{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .35rem;border:1.5px solid #e5e7eb;border-radius:12px;font-size:.75rem;font-weight:700;color:#6b7280;transition:all .15s}
.pos-pay-chip input:checked+span{border-color:var(--pp);background:#f5f3ff;color:var(--pp)}
.pos-recent-list{display:flex;flex-direction:column;gap:.5rem}
.pos-recent-item{display:flex;justify-content:space-between;align-items:center;padding:.55rem .65rem;background:#f9fafb;border-radius:12px}
.pos-sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1030;
  display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom,0px));
  background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -4px 24px rgba(0,0,0,.08);
}
@media(min-width:992px){
  .pos-sticky-bar{left:250px}
}
.pos-sticky-total{flex:1;min-width:0}
.pos-sticky-label{display:block;font-size:.68rem;color:#6b7280;font-weight:600;text-transform:uppercase}
.pos-sticky-amount{display:block;font-size:1.25rem;font-weight:900;color:#111;line-height:1.1}
.pos-sticky-btn{
  flex-shrink:0;border:0;border-radius:14px;background:linear-gradient(135deg,var(--pp),var(--pp2));
  color:#fff;font-weight:800;font-size:.92rem;padding:.85rem 1.25rem;display:flex;align-items:center;gap:.4rem;
  box-shadow:0 4px 14px rgba(93,63,211,.35);
}
.pos-sticky-btn:disabled{opacity:.45;box-shadow:none}
.pos-toast{border-radius:12px;padding:.65rem .85rem;font-size:.85rem;font-weight:600;margin-bottom:.5rem}
.pos-toast-ok{background:#dcfce7;color:#166534}
.pos-toast-err{background:#fee2e2;color:#991b1b}

/* ========== Panel auth (vendor/admin/delivery login) ========== */
.auth-panel-body{margin:0;min-height:100vh;background:#0f0f1a;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
.auth-panel-app{min-height:100vh;display:flex;flex-direction:column;background:var(--auth-gradient,#1a1a2e)}
.auth-panel-header{padding:calc(.85rem + env(safe-area-inset-top,0px)) 1rem 1rem;display:flex;align-items:center;gap:.75rem;color:#fff}
.auth-panel-back{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.1rem;flex-shrink:0}
.auth-panel-brand{display:flex;align-items:center;gap:.65rem;min-width:0}
.auth-panel-icon{font-size:1.75rem;line-height:1}
.auth-panel-title{font-weight:900;font-size:1.05rem;line-height:1.2}
.auth-panel-sub{font-size:.78rem;opacity:.75}
.auth-panel-main{flex:1;padding:0 1rem 1.5rem;display:flex;flex-direction:column}
.auth-panel-card{
  background:#fff;border-radius:24px 24px 20px 20px;padding:1.5rem 1.25rem 1.25rem;
  box-shadow:0 20px 50px rgba(0,0,0,.25);margin-top:.5rem;
}
.auth-panel-alert{border-radius:12px;padding:.65rem .85rem;font-size:.85rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.auth-panel-alert-danger{background:rgba(254,226,226,.95);color:#991b1b}
.auth-panel-alert-success{background:rgba(220,252,231,.95);color:#166534}
.auth-panel-footer{padding:1rem;text-align:center;display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap}
.auth-panel-footer a{color:rgba(255,255,255,.85);font-size:.82rem;font-weight:600;text-decoration:none}
.auth-form-heading{font-size:1.45rem;font-weight:900;margin:0 0 .25rem;color:#111}
.auth-form-lead{font-size:.88rem;color:#6b7280;margin:0 0 1.25rem}
.auth-field{margin-bottom:1rem}
.auth-field label{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:#374151;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em}
.auth-field label i{color:var(--pp);font-size:.95rem}
.auth-field .form-control{border:1.5px solid #e5e7eb;border-radius:14px;padding:.75rem 1rem;font-size:1rem;height:auto}
.auth-field .form-control:focus{border-color:var(--pp);box-shadow:0 0 0 3px rgba(93,63,211,.12)}
.auth-pass-wrap{position:relative}
.auth-pass-wrap .form-control{padding-right:3rem}
.auth-pass-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#9ca3af;padding:.35rem;font-size:1.1rem}
.auth-form-meta{text-align:right;margin-bottom:1rem}
.auth-form-meta a{font-size:.82rem;font-weight:600;color:var(--pp);text-decoration:none}
.auth-submit-btn{
  width:100%;border:0;border-radius:14px;padding:.95rem 1rem;
  background:linear-gradient(135deg,var(--pp),var(--pp2));color:#fff;
  font-weight:800;font-size:1rem;box-shadow:0 6px 20px rgba(93,63,211,.35);
}
.auth-submit-btn:active{transform:scale(.98)}
.auth-alt-link{text-align:center;margin:1rem 0 0;font-size:.88rem;color:#6b7280}
.auth-alt-link a{font-weight:700;color:var(--pp);text-decoration:none}
.auth-demo-chip{
  margin-top:1.1rem;padding:.65rem .85rem;border-radius:12px;background:#f5f3ff;
  font-size:.78rem;color:#5b21b6;text-align:center;line-height:1.45;
}
.auth-demo-chip i{margin-right:.2rem}
.auth-demo-chip strong{font-weight:800}