:root{
  --navy:#0f1f3d;
  --navy-2:#132a52;
  --blue:#2f7dfa;
  --blue-dark:#1b5fd6;
  --bg:#f2f4f8;
  --card:#ffffff;
  --text:#0f1f3d;
  --muted:#7a8699;
  --green:#1a9c5c;
  --red:#e0334d;
  --orange:#f0a30a;
  --sidebar-w:250px;
  --sidebar-w-collapsed:72px;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit;}
.app{display:flex;min-height:100vh;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:#fff;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  transition:width .2s ease;
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:100;
  overflow-x:hidden;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed);}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:18px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}
.sidebar-brand img{width:38px;height:38px;border-radius:8px;background:#fff;object-fit:contain;flex-shrink:0;}
.sidebar-brand .brand-text{overflow:hidden;transition:opacity .15s;}
.sidebar.collapsed .brand-text{display:none;}
.sidebar-brand .shop-name{font-weight:700;font-size:15px;line-height:1.2;}
.sidebar-brand .shop-sub{font-size:11px;color:#9fb3d6;letter-spacing:.5px;}

.sidebar-toggle{
  margin-left:auto;background:rgba(255,255,255,.08);border:none;color:#fff;
  width:28px;height:28px;border-radius:8px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sidebar.collapsed .sidebar-toggle{margin:0 auto;}

.sidebar-nav{padding:14px 10px;flex:1;overflow-y:auto;}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;margin-bottom:4px;border-radius:10px;
  color:#c8d3e8;font-size:14.5px;font-weight:500;white-space:nowrap;
}
.sidebar-nav a svg{flex-shrink:0;width:19px;height:19px;}
.sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar-nav a.active{background:var(--blue);color:#fff;}
.sidebar.collapsed .sidebar-nav a{justify-content:center;padding:12px 0;}
.sidebar.collapsed .sidebar-nav a span{display:none;}
.sidebar.collapsed .sidebar-nav a{position:relative;}
.sidebar.collapsed .sidebar-nav a:hover::after{
  content:attr(data-label);
  position:absolute;left:60px;top:50%;transform:translateY(-50%);
  background:#0f1f3d;color:#fff;padding:6px 10px;border-radius:6px;font-size:12.5px;
  white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:200;
}
.sidebar-footer{padding:14px 16px;font-size:11px;color:#8ea0c2;border-top:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow:hidden;}
.sidebar.collapsed .sidebar-footer{text-align:center;}
.sidebar.collapsed .sidebar-footer .full-text{display:none;}


.sidebar-nav .sidebar-action{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:11px 12px;margin-bottom:4px;border-radius:10px;
  color:#c8d3e8;font-size:14.5px;font-weight:500;white-space:nowrap;
  background:transparent;border:0;font-family:inherit;text-align:left;cursor:pointer;
}
.sidebar-nav .sidebar-action svg{flex-shrink:0;width:19px;height:19px;}
.sidebar-nav .sidebar-action:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar-nav .sidebar-action:disabled{opacity:.55;cursor:wait;}
.sidebar.collapsed .sidebar-action{justify-content:center;padding:12px 0;position:relative;}
.sidebar.collapsed .sidebar-action span{display:none;}
.sidebar.collapsed .sidebar-action:hover::after{
  content:attr(data-label);position:absolute;left:60px;top:50%;transform:translateY(-50%);
  background:#0f1f3d;color:#fff;padding:6px 10px;border-radius:6px;font-size:12.5px;
  white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:200;
}

/* ---------- Main content ---------- */
.main{
  margin-left:var(--sidebar-w);
  flex:1;
  transition:margin-left .2s ease;
  min-width:0;
  width:100%;
}
.sidebar.collapsed ~ .main{margin-left:var(--sidebar-w-collapsed);}

.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:22px 28px 10px;flex-wrap:wrap;gap:10px;
}
.topbar h1{margin:0;font-size:24px;}
.topbar p{margin:2px 0 0;color:var(--muted);font-size:14px;}
.topbar .date{color:var(--muted);font-size:14px;padding-top:4px;}
.mobile-menu-btn{display:none;background:var(--navy);color:#fff;border:none;width:38px;height:38px;border-radius:8px;align-items:center;justify-content:center;cursor:pointer;}

.content{padding:10px 28px 40px;}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:18px;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-2{grid-template-columns:2fr 1fr;}
.card{
  background:var(--card);border-radius:var(--radius);
  padding:20px 22px;box-shadow:0 1px 3px rgba(15,31,61,.06);
}
.kpi-label{color:var(--muted);font-size:13.5px;margin-bottom:8px;}
.kpi-value{font-size:26px;font-weight:700;}
.kpi-sub{color:var(--muted);font-size:12.5px;margin-top:4px;}
.kpi-value.green{color:var(--green);}
.kpi-value.orange{color:var(--orange);}
.kpi-value.red{color:var(--red);}

.card h2, .card h3{margin-top:0;}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}

table{width:100%;border-collapse:collapse;border:1px solid #d7dde6;}
th{text-align:left;color:var(--text);font-size:12.5px;font-weight:700;letter-spacing:0;padding:9px 12px;background:#eef2f8;border:1px solid #d7dde6;}
td{padding:9px 12px;border:1px solid #e3e8f0;font-size:13.5px;}
tbody tr:nth-child(even) td{background:#fafbfd;}
tbody tr:hover td{background:#f0f6ff;}
.table-wrap{overflow-x:auto;}

.badge{padding:4px 10px;border-radius:20px;font-size:12.5px;font-weight:600;}
.badge.card{background:#e7f0ff;color:var(--blue-dark);}
.badge.cash{background:#e4f7ec;color:var(--green);}
.badge.low{background:#fdeaea;color:var(--red);}
.badge.ok{background:#e4f7ec;color:var(--green);}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:#fff;border:none;
  padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;
  cursor:pointer;
}
.btn:hover{background:var(--blue-dark);}
.btn.secondary{background:#eef1f6;color:var(--text);}
.btn.secondary:hover{background:#e2e7f0;}
.btn.danger{background:var(--red);}
.btn.success{background:var(--green);}
.btn.block{width:100%;justify-content:center;}
.btn.sm{padding:7px 12px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

input,select,textarea{
  width:100%;padding:11px 13px;border:1px solid #e2e6ee;border-radius:10px;
  font-size:14px;font-family:inherit;background:#fbfcfe;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:#fff;}
label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;display:block;}
.field{margin-bottom:14px;}
.row{display:flex;gap:14px;flex-wrap:wrap;}
.row > *{flex:1;min-width:140px;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,31,61,.55);
  display:none;align-items:center;justify-content:center;z-index:500;padding:16px;
}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:16px;max-width:520px;width:100%;padding:26px;max-height:92vh;overflow-y:auto;}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;}
.modal-head h3{margin:0 0 4px;}
.modal-close{background:#f2f4f8;border:none;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:16px;}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--blue-dark));padding:20px;}
.login-box{background:#fff;padding:38px 34px;border-radius:18px;max-width:380px;width:100%;text-align:center;}
.login-box img{width:64px;margin-bottom:10px;}

/* ---------- Returns summary KPI blocks ---------- */
.return-accounting-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-bottom:18px;
}
.return-accounting-summary .return-kpi{
  min-width:0;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px 22px;
}
.return-accounting-summary .return-kpi .kpi-value{font-size:26px;line-height:1.1;}
@media (max-width:1100px){.return-accounting-summary{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){
  .return-accounting-summary{grid-template-columns:1fr;gap:12px;}
  .return-accounting-summary .return-kpi{min-height:120px;}
}

/* ---------- POS discount controls ---------- */
.discount-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.discount-field{min-width:0;}
.discount-field-label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin:0 0 5px;}
.discount-help{display:block;margin-top:6px;color:var(--muted);font-size:10.5px;line-height:1.35;}
@media (max-width:430px){.discount-inputs{grid-template-columns:1fr;}}

/* ---------- POS specific ---------- */
.pos-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start;}
.product-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid #eef1f6;border-radius:12px;margin-bottom:8px;cursor:pointer;}
.product-item:hover{border-color:var(--blue);background:#f7faff;}
.product-item .p-name{font-weight:600;}
.product-item .p-meta{color:var(--muted);font-size:12.5px;}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f2f4f8;gap:8px;}
.cart-item .qty-btns{display:flex;align-items:center;gap:6px;}
.qty-btns button{width:24px;height:24px;border-radius:6px;border:1px solid #e2e6ee;background:#fff;cursor:pointer;}
.totals-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;}
.totals-row.grand{font-size:19px;font-weight:700;border-top:2px solid #eef1f6;margin-top:8px;padding-top:12px;}
.pay-tabs{display:flex;gap:8px;margin-bottom:12px;}
.pay-tabs button{flex:1;padding:10px;border-radius:10px;border:1px solid #e2e6ee;background:#fff;cursor:pointer;font-weight:600;}
.pay-tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue);}

/* ---------- Print (thermal receipt & sticker) ---------- */
.print-only{display:none;}
@media print{
  body *{visibility:hidden;}
  #printArea, #printArea *{visibility:visible;}
  #printArea{position:absolute;top:0;left:0;width:100%;}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-2{grid-template-columns:1fr;}
  .pos-grid{grid-template-columns:1fr;}
}
@media (max-width:800px){
  .sidebar{transform:translateX(-100%);width:230px;box-shadow:0 0 30px rgba(0,0,0,.3);}
  .sidebar.mobile-open{transform:translateX(0);}
  .sidebar.collapsed{width:230px;}
  .main{margin-left:0 !important;}
  .mobile-menu-btn{display:flex;}
  .grid.cols-4{grid-template-columns:1fr 1fr;}
  .content{padding:10px 16px 40px;}
  .topbar{padding:16px 16px 6px;}
}
@media (max-width:480px){
  .grid.cols-4{grid-template-columns:1fr 1fr;}
  .kpi-value{font-size:21px;}
}

/* ---------- Enhanced POS / mobile ---------- */
.pos-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 16px;}
.scanner-title{display:flex;align-items:center;gap:9px;font-size:13px;min-width:0;}
.scanner-title > span:last-child{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scanner-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #e4f7ec;flex:none;}
.scanner-input-wrap{position:relative;display:flex;align-items:center;}
.scanner-input-wrap input{padding-left:42px;padding-right:40px;font-size:16px;min-height:46px;}
.scanner-icon{position:absolute;left:14px;font-size:20px;z-index:2;color:var(--blue);pointer-events:none;}
.clear-scan{position:absolute;right:8px;border:0;background:#eef1f6;color:#667085;width:28px;height:28px;border-radius:8px;font-size:20px;line-height:20px;cursor:pointer;}
.scan-help{display:block;color:var(--muted);font-size:11.5px;margin-top:6px;}
.product-list{max-height:520px;overflow-y:auto;margin-top:10px;}
.no-products{color:#aaa;text-align:center;padding:24px;}
.pos-products-card,.pos-cart-card{min-width:0;}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;}
.cart-head h3{margin:0 0 3px;}
.cart-head span{font-size:12px;color:var(--muted);}
.cart-items{min-height:90px;}
.empty-cart{color:#aaa;text-align:center;padding:32px 10px;line-height:1.7;}
.empty-cart small{font-size:12px;}
.cart-product{min-width:0;}
.qty-btns button{font-size:16px;display:flex;align-items:center;justify-content:center;}
.qty-btns .remove{color:var(--red);border-color:#f6c9d0;margin-left:3px;}
.totals-box{margin-top:10px;padding-top:2px;}
.payment-section{margin-top:15px;}
.cash-panel{margin-top:12px;}
.cash-panel input{font-size:17px;min-height:46px;}
.change-box{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:11px 12px;border-radius:10px;background:#f6faf8;border:1px solid #dcefe4;font-size:13px;}
.change-box strong{font-size:18px;color:var(--green);}
.change-box strong.ready{font-weight:800;}
.finish-btn{min-height:48px;font-size:15px;margin-top:12px;}
.success-modal{text-align:center;max-width:400px;}
.success-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;background:#e4f7ec;color:var(--green);font-size:36px;font-weight:800;}
.success-modal p{color:var(--muted);margin:5px 0 0;}
.success-actions{display:flex;gap:10px;margin:18px 0 10px;}

@media (max-width:800px){
  .pos-toolbar{padding:11px 13px;}
  .scanner-title > span:last-child{display:none;}
  .pos-grid{gap:12px;}
  .product-list{max-height:42vh;}
  .pos-cart-card{position:relative;}
  .cart-items{max-height:42vh;overflow-y:auto;}
}
@media (max-width:560px){
  .content{padding-left:10px;padding-right:10px;}
  .topbar{padding-left:10px;padding-right:10px;}
  .pos-toolbar{margin-bottom:10px;}
  .pos-toolbar .btn{padding:8px 10px;}
  .card{padding:15px;}
  .product-item{padding:10px;}
  .product-item .btn{padding:7px 9px;}
  .success-actions{flex-direction:column;}
  .cart-item{align-items:flex-start;}
  .qty-btns{flex:none;}
}


/* ---------- POS desktop layout / fixed cart ---------- */
@media (min-width:1025px){
  .pos-grid{
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);
    align-items:start;
  }
  .pos-products-card{
    min-height:0;
  }
  .pos-products-card .product-list{
    height:min(520px, calc(100vh - 390px));
    min-height:260px;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:5px;
    scrollbar-gutter:stable;
  }
  .pos-products-card .product-list::-webkit-scrollbar,
  .pos-cart-card .cart-items::-webkit-scrollbar{
    width:8px;
  }
  .pos-products-card .product-list::-webkit-scrollbar-track,
  .pos-cart-card .cart-items::-webkit-scrollbar-track{
    background:#f1f4f8;
    border-radius:10px;
  }
  .pos-products-card .product-list::-webkit-scrollbar-thumb,
  .pos-cart-card .cart-items::-webkit-scrollbar-thumb{
    background:#c4cedd;
    border-radius:10px;
  }
  .pos-cart-card{
    position:sticky;
    top:16px;
    max-height:calc(100vh - 32px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:16px 18px;
  }
  .pos-cart-card .cart-head{
    flex:0 0 auto;
  }
  .pos-cart-card .cart-items{
    flex:1 1 auto;
    min-height:80px;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:4px;
    scrollbar-gutter:stable;
  }
  .pos-cart-card .cart-item{
    padding:7px 0;
    gap:6px;
  }
  .pos-cart-card .cart-product{
    min-width:0;
  }
  .pos-cart-card .cart-product .p-name{
    font-size:13px;
    line-height:1.2;
  }
  .pos-cart-card .cart-product .p-meta{
    font-size:11px;
    line-height:1.25;
  }
  .pos-cart-card .qty-btns{
    gap:4px;
    flex-shrink:0;
  }
  .pos-cart-card .qty-btns button{
    width:22px;
    height:22px;
    font-size:14px;
  }
  .pos-cart-card .qty-btns span{
    min-width:16px;
    text-align:center;
    font-size:12px;
  }
  .pos-cart-card .cart-head h3{
    font-size:18px;
  }
  .pos-cart-card .cart-head span{
    font-size:11px;
  }
  .pos-cart-card .cart-head .btn{
    padding:6px 10px;
    font-size:11.5px;
  }
  .pos-cart-card .totals-box{
    flex:0 0 auto;
    margin-top:6px;
  }
  .pos-cart-card .totals-row{
    padding:4px 0;
    font-size:12px;
  }
  .pos-cart-card .totals-row.grand{
    font-size:16px;
    padding-top:8px;
    margin-top:5px;
  }
  .pos-cart-card .payment-section{
    flex:0 0 auto;
    margin-top:9px;
  }
  .pos-cart-card .payment-section label,
  .pos-cart-card .cash-panel label{
    font-size:11.5px;
    margin-bottom:4px;
  }
  .pos-cart-card .pay-tabs{
    gap:6px;
    margin-bottom:8px;
  }
  .pos-cart-card .pay-tabs button{
    padding:8px;
    font-size:12px;
  }
  .pos-cart-card .cash-panel{
    flex:0 0 auto;
    margin-top:8px;
  }
  .pos-cart-card .cash-panel input{
    min-height:38px;
    padding:8px 10px;
    font-size:14px;
  }
  .pos-cart-card .change-box{
    margin-top:6px;
    padding:7px 9px;
    font-size:11.5px;
  }
  .pos-cart-card .change-box strong{
    font-size:15px;
  }
  .pos-cart-card .finish-btn{
    flex:0 0 auto;
    min-height:40px;
    margin-top:8px;
    padding:8px 12px;
    font-size:13px;
  }
}

/* No redundant X controls in the POS */
.clear-scan,
.qty-btns .remove{
  display:none !important;
}

/* ---------- Dashboard digital clock ---------- */
.dashboard-time{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  padding-top:0;
}
.digital-clock{
  font-family:"Consolas","Courier New",monospace;
  font-size:20px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--text);
  line-height:1;
}
.dashboard-time .date{
  padding-top:0 !important;
  font-size:13px !important;
}
.kpi-value.red{color:var(--red);}
@media (max-width:800px){
  .dashboard-time{
    align-items:flex-start;
    margin-top:2px;
  }
  .digital-clock{font-size:18px;}
}


/* ---------- Report filters / custom date ranges ---------- */
.filter-grid{
  display:grid;
  grid-template-columns:minmax(210px,260px) minmax(170px,210px) minmax(170px,210px) auto;
  gap:14px;
  align-items:end;
}
.filter-grid .field{margin:0;}
.filter-action{display:flex;align-items:flex-end;}
.filter-action .btn{min-height:44px;white-space:nowrap;}
.filter-result{
  color:var(--muted);
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #eef1f6;
  font-size:14px;
}
.custom-filter-field[hidden]{display:none !important;}
.closing-filter-card,.pl-filter-card{margin-bottom:18px;}

.chart-wrap{
  height:330px;
  position:relative;
}
.top-products-scroll{
  max-height:330px;
  overflow:auto;
}

/* ---------- POS: fixed sale panel + product-only scrolling ---------- */
@media (min-width:1025px){
  .pos-grid{
    grid-template-columns:minmax(0,1.55fr) minmax(360px,.85fr);
    gap:18px;
    align-items:start;
  }

  /* The left card itself never scrolls; only its product list does. */
  .pos-products-card{
    overflow:hidden;
  }
  .pos-products-card .product-list{
    height:calc(100vh - 405px);
    min-height:260px;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:7px;
    scrollbar-gutter:stable;
  }

  /* Current Sale remains visible while the product list/page is scrolled. */
  .pos-cart-card{
    position:sticky;
    top:12px;
    height:calc(100vh - 24px);
    max-height:calc(100vh - 24px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .pos-cart-card .cart-head,
  .pos-cart-card .totals-box,
  .pos-cart-card .payment-section,
  .pos-cart-card .cash-panel,
  .pos-cart-card .finish-btn{
    flex-shrink:0;
  }

  /* Compact cart rows so hundreds of items remain usable. */
  .pos-cart-card .cart-items{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    padding-right:2px;
  }
  .pos-cart-card .cart-items::-webkit-scrollbar{width:0;height:0;}
  .pos-cart-card .cart-item{
    min-height:34px;
    padding:5px 0;
    gap:5px;
  }
  .pos-cart-card .cart-product .p-name{
    font-size:12px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .pos-cart-card .cart-product .p-meta{
    font-size:10px;
    line-height:1.15;
    white-space:nowrap;
  }
  .pos-cart-card .qty-btns{gap:3px;}
  .pos-cart-card .qty-btns button{
    width:20px;height:20px;font-size:12px;
  }
  .pos-cart-card .qty-btns span{
    min-width:15px;font-size:11px;
  }
  .pos-cart-card .cart-head h3{font-size:17px;}
  .pos-cart-card .cart-head span{font-size:10px;}
  .pos-cart-card .cart-head .btn{
    padding:5px 9px;font-size:11px;
  }
  .pos-cart-card .totals-row{font-size:11px;padding:3px 0;}
  .pos-cart-card .totals-row.grand{font-size:15px;padding-top:7px;margin-top:4px;}
  .pos-cart-card .payment-section{margin-top:7px;}
  .pos-cart-card .pay-tabs{margin-bottom:6px;gap:5px;}
  .pos-cart-card .pay-tabs button{padding:7px;font-size:11.5px;}
  .pos-cart-card .cash-panel{margin-top:6px;}
  .pos-cart-card .cash-panel input{
    min-height:35px;padding:7px 9px;font-size:13px;
  }
  .pos-cart-card .change-box{padding:6px 8px;font-size:10.5px;margin-top:4px;}
  .pos-cart-card .change-box strong{font-size:13px;}
  .pos-cart-card .finish-btn{
    min-height:37px;margin-top:6px;padding:7px 10px;font-size:12px;
  }
}

/* Keep the report filter usable on smaller screens. */
@media (max-width:900px){
  .filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .filter-action{grid-column:1/-1;}
}
@media (max-width:560px){
  .filter-grid{grid-template-columns:1fr;}
  .filter-action{grid-column:auto;}
  .filter-action .btn{width:100%;justify-content:center;}
  .chart-wrap{height:260px;}
}


/* ---------- Returns / Refunds ---------- */
.return-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(420px,.9fr);gap:18px;align-items:start;}
.return-search-card,.return-history-card{min-width:0;}
.return-policy{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border:1px solid #dce9ff;background:#f5f9ff;border-radius:14px;margin-bottom:18px;color:var(--text);}
.policy-icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#e4efff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;}
.return-policy strong{font-size:15px;}.return-policy p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.55;}
.return-search-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;}
.return-message{display:none;margin:12px 0;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.4;}.return-message.success,.return-message.error{display:block}.return-message.success{background:#eefaf3;color:#16764b;border:1px solid #ccebd9}.return-message.error{background:#fff2f3;color:#b42338;border:1px solid #f1c7ce;}
.return-sale-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin:18px 0 12px;padding-top:16px;border-top:1px solid #eef1f6;}.return-sale-head h3{margin:0 0 4px;}.return-sale-head p{margin:0;color:var(--muted);font-size:12px;}
#returnItemsTable th,#returnItemsTable td{font-size:12px;padding:9px 8px;}.return-qty{width:82px;min-height:38px;padding:7px 9px!important;}.line-refund{font-weight:700;white-space:nowrap;}
.return-summary{display:flex;justify-content:space-between;align-items:center;margin:14px 0;padding:14px 15px;border-radius:12px;background:#f7f9fc;border:1px solid #e6ebf2;font-size:14px}.return-summary strong{font-size:20px;color:var(--blue);}
.credit-remaining{font-size:10px;color:#16764b;margin-top:3px;}.badge.credit{background:#fff4df;color:#9a6200;}.badge.cash{background:#eaf8f0;color:#18794e;}.badge.card{background:#eaf1ff;color:#255db8;}
.return-credit-panel{margin-top:12px;padding-top:10px;border-top:1px solid #eef1f6;}.return-credit-row{display:grid;grid-template-columns:1fr auto;gap:7px;}.return-credit-row input{min-height:40px;}
@media (max-width:1050px){.return-grid{grid-template-columns:1fr;}}
@media (max-width:700px){.return-search-row{grid-template-columns:1fr}.return-sale-head{flex-direction:column}.return-history-card{overflow:hidden}.return-credit-row{grid-template-columns:1fr}.return-credit-row .btn{width:100%;justify-content:center}.return-policy{padding:12px}.return-policy p{font-size:11.5px}}

/* Returns scanner / invoice lookup enhancements */
.return-scanner-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin:14px 0;padding:13px 14px;border:1px solid #dce9ff;background:#f7faff;border-radius:14px}
.return-scanner-box label{display:block;margin-bottom:7px;font-weight:700;font-size:12px}
.return-scanner-box .scan-help{display:block;margin-top:6px}
.return-scanner-box .scanner-input-wrap{width:100%}
.return-scanner-box input{width:100%}
.returnable-row{transition:background .2s ease}
.returnable-row.scan-highlight{background:#eefaf3!important;box-shadow:inset 4px 0 0 #22a06b}
.credit-error{color:#b42338!important}
@media(max-width:700px){
  .return-scanner-box{grid-template-columns:1fr}
  .return-scanner-box .btn{width:100%;justify-content:center}
  #returnItemsTable{min-width:700px}
  .return-search-card .table-wrap{overflow-x:auto}
}


/* ---------- Performance + high-level responsive polish ---------- */
html{overflow-x:hidden;scroll-behavior:smooth}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
button,input,select,textarea{touch-action:manipulation}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.topbar>div:first-child{min-width:0}
.topbar h1,.topbar p{overflow:hidden;text-overflow:ellipsis}
.card,.modal{contain:layout paint}
@media (min-width:801px){
  /* Keep the desktop header/filter controls in one clean line whenever space allows. */
  .topbar{flex-wrap:nowrap;align-items:center}
  .topbar>div:first-child{flex:1}
  .topbar .date{white-space:nowrap}
  .card-head{flex-wrap:nowrap}
  .filter-grid{white-space:nowrap}
}
@media (max-width:1200px) and (min-width:801px){
  :root{--sidebar-w:220px}
  .topbar{padding-left:22px;padding-right:22px}
  .content{padding-left:22px;padding-right:22px}
  .card{padding:18px}
  .grid.cols-4{gap:14px}
}
@media (max-width:800px){
  .mobile-menu-btn{
    position:fixed;left:12px;top:12px;z-index:1001;
    width:42px;height:42px;border-radius:12px;
    box-shadow:0 8px 22px rgba(15,31,61,.22);
  }
  .topbar{padding-top:64px;gap:6px}
  .topbar h1{font-size:22px}
  .topbar p{font-size:13px}
  .topbar .date{white-space:nowrap}
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos-grid{grid-template-columns:1fr}
  .card-head{align-items:center}
}
@media (max-width:640px){
  .grid.cols-4{grid-template-columns:1fr}
  .row{gap:10px}
  .row>*{min-width:100%}
  .card-head{flex-wrap:wrap}
  .filter-grid{grid-template-columns:1fr}
  .table-wrap table{min-width:620px}
  .modal{padding:20px;border-radius:14px}
  .topbar .date{font-size:12px}
}
@media (max-width:420px){
  .content{padding-left:8px;padding-right:8px}
  .topbar{padding-left:8px;padding-right:8px}
  .card{padding:13px}
  .topbar h1{font-size:20px}
  .btn{padding:9px 12px}
  input,select,textarea{font-size:16px} /* prevents iOS zoom */
}


/* ================================================================
   FINAL RESPONSIVE / DESKTOP POLISH
   ================================================================ */
html, body { max-width:100%; overflow-x:hidden; }

/* Sidebar: desktop collapse control stays visible in collapsed state */
.sidebar.collapsed .sidebar-brand{
  justify-content:center;
  padding:14px 8px;
  position:relative;
}
.sidebar.collapsed .sidebar-brand img{width:40px;height:40px;}
.sidebar.collapsed .sidebar-toggle{
  position:absolute;
  right:-7px;
  top:14px;
  width:24px;
  height:24px;
  border:2px solid var(--navy);
  background:#fff;
  color:var(--navy);
  border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  z-index:120;
}
.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg);}
.sidebar.collapsed .sidebar-toggle:hover{background:#eef4ff;color:var(--blue);}

/* Desktop dashboard KPI row: five cards in one clean row */
.dashboard-kpis{grid-template-columns:repeat(5,minmax(0,1fr));}
.dashboard-kpis .card{min-width:0;}
.dashboard-kpis .kpi-value{white-space:nowrap;}
.dashboard-chart-card{min-width:0;overflow:hidden;}
.dashboard-chart-wrap{position:relative;width:100%;height:320px;min-width:0;}
.dashboard-chart-wrap canvas{display:block;width:100% !important;height:100% !important;}
.dashboard-table-wrap{width:100%;overflow-x:auto;}
.dashboard-table-wrap table{min-width:0;width:100%;table-layout:fixed;}
.dashboard-table-wrap th,.dashboard-table-wrap td{overflow:hidden;text-overflow:ellipsis;}
.dashboard-recent-table th:nth-child(1){width:37%;}
.dashboard-recent-table th:nth-child(2){width:12%;}
.dashboard-recent-table th:nth-child(3){width:24%;}
.dashboard-recent-table th:nth-child(4){width:27%;}
.dashboard-top-table th:nth-child(1){width:38%;}
.dashboard-top-table th:nth-child(2){width:17%;}
.dashboard-top-table th:nth-child(3){width:22.5%;}
.dashboard-top-table th:nth-child(4){width:22.5%;}

@media (max-width:1200px) and (min-width:801px){
  .dashboard-kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
  .dashboard-kpis .card{padding:15px 13px;}
  .dashboard-kpis .kpi-value{font-size:21px;}
}

@media (max-width:800px){
  /* Mobile uses the same compact 2-column dashboard style as the reference. */
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .dashboard-kpis .card{padding:15px 14px;min-height:0;}
  .dashboard-kpis .kpi-value{font-size:22px;white-space:nowrap;}
  .dashboard-kpis .kpi-label{font-size:13px;}
  .dashboard-kpis .kpi-sub{font-size:11.5px;line-height:1.35;}

  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:18px 14px 8px 68px;
  }
  .topbar h1{font-size:25px;line-height:1.1;white-space:nowrap;}
  .topbar p{display:none;}
  .topbar .date{font-size:12px;line-height:1.25;white-space:nowrap;text-align:right;}
  .dashboard-time{align-items:flex-end;margin:0;padding:0;}
  .digital-clock{font-size:18px;letter-spacing:1px;white-space:nowrap;}
  .dashboard-time .date{font-size:12px !important;}

  .content{padding:10px 14px 30px;}
  .grid.cols-2{grid-template-columns:1fr;gap:12px;}
  .dashboard-main-grid{grid-template-columns:1fr !important;}

  .dashboard-chart-wrap{height:300px;}
  .dashboard-chart-card{padding:16px 14px;}
  .dashboard-chart-card h3{font-size:20px;white-space:nowrap;}

  .dashboard-table-wrap{overflow-x:hidden;}
  .dashboard-table-wrap table{font-size:12px;table-layout:fixed;}
  .dashboard-table-wrap th,.dashboard-table-wrap td{padding:9px 7px;font-size:12px;}
  .dashboard-recent-table th:nth-child(1){width:36%;}
  .dashboard-recent-table th:nth-child(2){width:12%;}
  .dashboard-recent-table th:nth-child(3){width:25%;}
  .dashboard-recent-table th:nth-child(4){width:27%;}
  .dashboard-top-table th:nth-child(1){width:36%;}
  .dashboard-top-table th:nth-child(2){width:17%;}
  .dashboard-top-table th:nth-child(3){width:23.5%;}
  .dashboard-top-table th:nth-child(4){width:23.5%;}

  .badge{padding:4px 8px;font-size:11px;}
}

@media (max-width:640px){
  /* Keep dashboard KPIs at two columns even on small phones. */
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .dashboard-kpis .card{padding:14px 12px;}
  .dashboard-kpis .kpi-value{font-size:20px;}
  .dashboard-kpis .kpi-label{font-size:12px;}
  .dashboard-kpis .kpi-sub{font-size:10.5px;}
  .topbar{padding-left:66px;padding-right:10px;}
  .topbar h1{font-size:23px;}
  .digital-clock{font-size:16px;}
  .topbar .date{font-size:11px;}
  .content{padding-left:10px;padding-right:10px;}

  .dashboard-recent-table th,.dashboard-recent-table td,
  .dashboard-top-table th,.dashboard-top-table td{padding:8px 6px;}
  .dashboard-recent-table td:first-child{white-space:nowrap;}
  .dashboard-recent-table .badge{font-size:10px;padding:4px 7px;}
  .dashboard-chart-wrap{height:285px;}
}

@media (max-width:380px){
  .dashboard-kpis{gap:8px;}
  .dashboard-kpis .card{padding:12px 9px;}
  .dashboard-kpis .kpi-value{font-size:18px;}
  .dashboard-kpis .kpi-label{font-size:11px;}
  .dashboard-kpis .kpi-sub{font-size:9.5px;}
  .topbar{padding-left:62px;gap:6px;}
  .topbar h1{font-size:21px;}
  .digital-clock{font-size:14px;}
  .topbar .date{font-size:10px;}
  .dashboard-chart-wrap{height:270px;}
  .dashboard-table-wrap th,.dashboard-table-wrap td{padding:7px 4px;font-size:10.5px;}
}

/* On mobile the sidebar is an overlay; on desktop the collapsed rail remains usable. */
@media (max-width:800px){
  .sidebar.collapsed{width:230px;transform:translateX(-100%);}
  .sidebar.mobile-open,.sidebar.collapsed.mobile-open{transform:translateX(0);}
  .sidebar.collapsed .sidebar-brand{justify-content:flex-start;padding:18px 16px;}
  .sidebar.collapsed .sidebar-brand img{width:38px;height:38px;}
  .sidebar.collapsed .sidebar-toggle{position:static;width:28px;height:28px;border:0;background:rgba(255,255,255,.08);color:#fff;box-shadow:none;border-radius:8px;}
  .sidebar.collapsed .sidebar-toggle svg{transform:none;}
}


/* ================================================================
   DASHBOARD FINAL LAYOUT OVERRIDES
   Desktop: KPI cards in one row; content cards share one row.
   Mobile: matches compact two-column KPI + stacked detail cards.
   Sidebar collapsed: keep an obvious reopen control visible.
   ================================================================ */
.dashboard-kpis{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:18px !important;align-items:stretch;}
.dashboard-kpis>.card{width:auto !important;min-width:0 !important;height:100%;}
.dashboard-main-grid{display:grid !important;grid-template-columns:minmax(0,2fr) minmax(360px,1fr) !important;gap:18px !important;align-items:stretch;}
.dashboard-main-grid>.card{min-width:0;}
.dashboard-top-card{width:100%;}
.dashboard-recent-card,.dashboard-chart-card{height:100%;}
.dashboard-chart-wrap{height:320px !important;}

/* Never allow a collapsed sidebar to hide its toggle behind the rail. */
@media (min-width:801px){
  .sidebar.collapsed{overflow:visible;}
  .sidebar.collapsed .sidebar-brand{position:relative;overflow:visible;}
  .sidebar.collapsed .sidebar-toggle{
    position:absolute !important;
    right:-14px !important;
    top:18px !important;
    width:30px !important;
    height:30px !important;
    margin:0 !important;
    border:2px solid var(--navy) !important;
    background:#fff !important;
    color:var(--navy) !important;
    border-radius:50% !important;
    box-shadow:0 2px 10px rgba(0,0,0,.25) !important;
    z-index:1005 !important;
  }
  .sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg) !important;}
}

@media (max-width:1300px) and (min-width:801px){
  .dashboard-kpis{gap:12px !important;}
  .dashboard-kpis>.card{padding:16px 14px !important;}
  .dashboard-kpis .kpi-value{font-size:21px !important;}
  .dashboard-kpis .kpi-sub{font-size:11px !important;}
  .dashboard-main-grid{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr) !important;gap:12px !important;}
}

@media (max-width:800px){
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .dashboard-kpis>.card{padding:15px 14px !important;}
  .dashboard-main-grid{grid-template-columns:1fr !important;gap:12px !important;}
  .dashboard-recent-card{order:1;}
  .dashboard-chart-card{order:2;}
  .dashboard-top-card{order:3;}
  .dashboard-chart-wrap{height:340px !important;}
  .dashboard-chart-card h3{font-size:20px !important;}
  .dashboard-table-wrap{overflow-x:hidden !important;}
  .dashboard-table-wrap table{width:100% !important;min-width:0 !important;table-layout:fixed !important;}
}

@media (max-width:640px){
  .dashboard-kpis{gap:10px !important;}
  .dashboard-kpis>.card{padding:14px 12px !important;}
  .dashboard-kpis .kpi-value{font-size:20px !important;}
  .dashboard-kpis .kpi-label{font-size:12px !important;}
  .dashboard-kpis .kpi-sub{font-size:10.5px !important;}
  .dashboard-chart-wrap{height:310px !important;}
}

@media (max-width:380px){
  .dashboard-kpis{gap:8px !important;}
  .dashboard-kpis>.card{padding:12px 9px !important;}
  .dashboard-kpis .kpi-value{font-size:18px !important;}
  .dashboard-chart-wrap{height:285px !important;}
}

/* Mobile menu button remains visible while scrolling, like the reference. */
@media (max-width:800px){
  .mobile-menu-btn{
    position:fixed !important;
    left:16px !important;
    top:12px !important;
    z-index:2000 !important;
    width:46px !important;
    height:46px !important;
    border-radius:13px !important;
    box-shadow:0 7px 18px rgba(15,31,61,.22) !important;
  }
}

@media (min-width:801px){
  /* The desktop reference uses four primary KPI cards across the row. */
  .dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .dashboard-low-stock{display:none !important;}
}
@media (max-width:800px){
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .dashboard-low-stock{display:block !important;}
}

/* ===== POS / Inventory professional upgrade ===== */
.receipt-print-frame{position:fixed;left:-10000px;top:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none}
.link-btn{float:right;border:0;background:none;color:var(--blue);font-size:12px;cursor:pointer;padding:0;font-weight:700}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.form-grid-2 .field{min-width:0}
.calculated-price{background:#e8f2f5;border-radius:12px;padding:11px 14px;margin:2px 0 14px;display:flex;flex-direction:column}
.calculated-price small{color:#7a8699}.calculated-price strong{font-size:18px;color:var(--green);margin:2px 0}.calculated-price span{font-size:11px;color:#7a8699}
.inventory-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.inventory-kpis .card{padding:16px 18px}
.inventory-kpis .kpi-value{font-size:22px}
.inventory-head{margin-bottom:12px}
.inventory-toolbar{margin-bottom:8px}
.inventory-toolbar input{width:100%;max-width:320px}
.inventory-table-wrap{overflow-x:auto}
.inventory-table-wrap table{min-width:980px}
.inventory-product-name{font-weight:700}.inventory-table-wrap td small{color:var(--muted)}
.inventory-table-wrap .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.inventory-table-wrap .profit-cell{color:var(--green);font-weight:600}
.expense-filter-card{margin-bottom:18px}.expense-filter-card small{color:var(--muted)}
.expense-filters{display:grid;grid-template-columns:1.05fr 1fr 1fr 1.1fr auto;gap:12px;align-items:end}
.filter-actions{display:flex;gap:8px;padding-bottom:16px}.filter-actions .btn{white-space:nowrap}

@media (min-width:1100px){
  .pos-grid{grid-template-columns:minmax(0,1.35fr) minmax(390px,.85fr)}
  .pos-cart-card{position:sticky;top:16px}
}
@media (max-width:900px){
  .form-grid-2{grid-template-columns:1fr}
  .expense-filters{grid-template-columns:1fr 1fr}
  .filter-actions{padding-bottom:0}
  .inventory-kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:800px){
  .inventory-kpis{grid-template-columns:1fr 1fr}
  .inventory-kpis .card:last-child{grid-column:1/-1}
  .inventory-head{align-items:flex-start}
  .inventory-head .btn{width:auto}
  .expense-filters{grid-template-columns:1fr 1fr}
  .expense-filters .field:first-child{grid-column:1/-1}
  .filter-actions{grid-column:1/-1}
  .filter-actions .btn{flex:1}
}
@media (max-width:560px){
  .inventory-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .inventory-kpis .card{padding:13px}.inventory-kpis .card:last-child{grid-column:auto}
  .inventory-kpis .kpi-value{font-size:19px}
  .expense-filters{grid-template-columns:1fr}
  .expense-filters .field:first-child,.filter-actions{grid-column:auto}
  .filter-actions{display:grid;grid-template-columns:1fr 1fr}
  .product-modal{padding:18px}
}


/* ===== Product sticker preview: clean 50mm x 25mm ===== */
.sticker-preview-wrap{display:flex;justify-content:center;overflow:hidden;padding:10px 0}
.sticker-label{width:50mm;height:25mm;padding:3mm 2.5mm 2.5mm;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;box-sizing:border-box;border:0;border-radius:0;box-shadow:none}
.sticker-label .st-name{width:45mm;font-size:10px;line-height:1;font-weight:400;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip}
.sticker-label #barcodeSvg{width:46mm;height:11.5mm;display:block;flex:none;shape-rendering:crispEdges}
.sticker-label .st-code{font-size:10px;line-height:1;font-weight:400;letter-spacing:.35px;white-space:nowrap;text-align:center}
/* KG quantity editing in POS */
.kg-qty-btns{gap:5px}.kg-qty-input{width:68px;height:32px;text-align:center;padding:3px 5px;font-weight:700;border:1px solid #d7deea;border-radius:7px}.qty-unit{font-size:12px;color:#64748b;font-weight:700}

/* POS cash received / change fields */
.cash-payment-panel{margin-top:10px;}
.cash-payment-panel label{display:block;font-weight:600;margin-bottom:6px;}
.cash-payment-panel input{width:100%;min-height:42px;border:1px solid #dfe5ef;border-radius:10px;padding:10px 12px;background:#fff;color:var(--text,#17233d);font:inherit;box-sizing:border-box;}
.cash-payment-panel .discount-help{display:block;margin-top:5px;}

/* Modern POS UI refresh */
body.pos-body{background:#f3f6fc}.pos-body .topbar{align-items:center;padding:14px 24px 8px}.pos-body .topbar h1{font-size:25px;font-weight:800;color:#102b58}.pos-body .content{padding:10px 20px 24px}
.pos-body .pos-toolbar{background:transparent;box-shadow:none;border:0;padding:0 2px 12px;margin:0}.pos-body .scanner-title{display:flex;align-items:center;gap:9px;color:#098a58;font-size:13px}.pos-body .scanner-dot{width:10px;height:10px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px #d9f8e9}.pos-body .scanner-caption{font-weight:400;color:#6b7e9d;margin-left:5px}
.pos-body .pos-grid{grid-template-columns:minmax(0,1.75fr) minmax(350px,.85fr);gap:16px}.pos-body .pos-products-card,.pos-body .pos-cart-card{background:#fff;border:1px solid #e7edf7;border-radius:16px;box-shadow:0 7px 24px rgba(30,60,110,.07);padding:18px}.pos-body .pos-products-card .field label{font-size:15px;font-weight:800;color:#112b58}
.pos-body .scanner-input-wrap{border:1.5px solid #78a9ff;border-radius:11px;background:#fff;padding:0 12px;box-shadow:0 0 0 3px rgba(37,117,252,.05)}.pos-body .scanner-input-wrap input{border:0;background:transparent;box-shadow:none;padding:13px 2px}.pos-body .scanner-icon{font-size:22px;color:#1976ff}
.pos-body .pos-catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:17px 0 12px}.pos-body .category-filters{display:flex;gap:7px;flex-wrap:wrap}.pos-body .category-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #dfe7f3;background:#f8faff;color:#17345f;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:700;cursor:pointer}.pos-body .category-chip.active{background:#1976ff;border-color:#1976ff;color:#fff}.pos-body .catalog-count{font-size:11px;color:#7d8da8}
.pos-body .product-list.product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-height:calc(100vh - 340px);min-height:280px;overflow-y:auto;padding:2px 3px 5px 0;margin-top:0}.pos-body .product-item{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;padding:0;margin:0;background:#fff;border:1px solid #e8edf5;border-radius:14px;overflow:hidden;box-shadow:0 3px 10px rgba(16,43,88,.045);transition:transform .15s,box-shadow .15s}.pos-body .product-item:hover{background:#fff;border-color:#b6d0ff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,43,88,.1)}
.pos-body .product-visual{height:98px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fbfcff,#f1f5fb);border-bottom:1px solid #f0f3f8}.pos-body .product-visual span{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:16px;background:#fff;color:#357fe8;font-size:43px;box-shadow:0 5px 16px rgba(24,52,95,.08)}.pos-body .product-card-body{display:flex;flex-direction:column;gap:7px;padding:10px;flex:1}.pos-body .product-item .p-name{font-size:11.5px;line-height:1.35;font-weight:800;color:#142c53;min-height:31px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-transform:uppercase}.pos-body .product-price{font-size:16px;font-weight:800;color:#1474f5}.pos-body .product-price small{font-size:10.5px;font-weight:500;color:#58708f}
.pos-body .product-stock{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;max-width:100%;background:#e4f8ef;color:#16865b;border-radius:7px;padding:5px 7px;font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-body .stock-dot{width:6px;height:6px;flex:none;border-radius:50%;background:#17a76b}.pos-body .product-stock.out-of-stock{background:#fff0f0;color:#c83c4a}.pos-body .product-add{width:100%;justify-content:center;padding:8px 7px;border-radius:8px;font-size:11.5px;margin-top:auto;background:#1976ff}
.pos-body .pos-cart-card{position:sticky;top:14px;padding:18px 16px;max-height:calc(100vh - 105px);overflow-y:auto}.pos-body .cart-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f7;padding-bottom:13px;margin-bottom:8px}.pos-body .cart-head h3{font-size:18px;font-weight:800;color:#112b58}.pos-body #clearCartBtn{background:#fff0f2;color:#e34b5b;border:0}.pos-body .cart-items{min-height:120px;max-height:220px;overflow-y:auto}.pos-body .empty-cart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#17345f;font-weight:700;min-height:130px;margin:0}.pos-body .empty-cart:before{content:'🛒';display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:#eef2f9;font-size:29px}
.pos-body .cart-item{padding:10px 0;border-bottom:1px solid #eef2f7}.pos-body .cart-product .p-name{font-size:12px;font-weight:800;color:#17345f}.pos-body .cart-product .p-meta{font-size:10.5px;color:#7385a0}.pos-body .totals-box{border-top:1px solid #edf1f7;padding-top:5px;margin-top:8px}.pos-body .totals-row{font-size:12px;color:#627696;padding:5px 0}.pos-body .totals-row strong{color:#102b58}.pos-body .totals-row.grand{font-size:17px;background:#eaf3ff;border:0;border-radius:9px;padding:9px 10px;margin:6px 0;color:#102b58}.pos-body .totals-row.grand span:last-child{font-size:20px;font-weight:900;color:#102b58}
.pos-body .payment-section{margin-top:12px}.pos-body .pay-tabs{gap:9px;margin:7px 0 12px}.pos-body .pay-tabs button{border-radius:9px;padding:10px;border-color:#e0e7f2;color:#15345f;font-size:12px}.pos-body .pay-tabs button.active{background:#1976ff;border-color:#1976ff;color:#fff}.pos-body .cash-payment-panel,.pos-body .discount-panel,.pos-body .return-credit-panel{margin-top:12px}.pos-body .cash-payment-panel input,.pos-body .discount-field input,.pos-body .return-credit-row input{background:#fff;border-color:#dfe6f1;border-radius:8px;padding:9px 11px;min-height:38px;font-size:12px}.pos-body .finish-btn{margin-top:12px;background:#08a65c;border-radius:9px;padding:12px;font-size:13px}
@media(max-width:1400px){.pos-body .product-list.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1100px){.pos-body .pos-grid{grid-template-columns:minmax(0,1fr)}.pos-body .pos-cart-card{position:relative;top:auto;max-height:none}.pos-body .product-list.product-grid{max-height:560px}}@media(max-width:650px){.pos-body .content{padding:8px 10px 22px}.pos-body .pos-products-card,.pos-body .pos-cart-card{padding:12px}.pos-body .product-list.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:55vh}.pos-body .product-visual{height:80px}.pos-body .product-card-body{padding:8px}.pos-body .product-item .p-name{font-size:10.5px}.pos-body .product-price{font-size:14px}.pos-body .category-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;width:100%}.pos-body .scanner-caption{display:none}}

/* Explicit text-first catalog rendering: no product images or image requests */
body.pos-body #productList.product-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;align-items:stretch;gap:12px;min-height:280px}
body.pos-body #productList .product-item{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;min-width:0;min-height:238px;height:auto;padding:0!important;margin:0!important;background:#fff!important;color:#142c53!important;border:1px solid #e4eaf3!important;border-radius:13px;overflow:hidden;box-shadow:0 4px 14px rgba(24,48,86,.07)}
body.pos-body #productList .product-visual{height:64px;min-height:64px;display:flex!important;align-items:center;justify-content:center;background:#f4f7fc;border-bottom:1px solid #edf1f7}
body.pos-body #productList .product-symbol{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#e4efff;color:#176ff0;font-size:25px;font-weight:500;box-shadow:none}
body.pos-body #productList .product-card-body{display:flex!important;flex-direction:column;align-items:stretch;gap:8px;padding:11px;min-width:0;flex:1}
body.pos-body #productList .p-name{display:block!important;min-height:34px;height:auto;color:#152e55!important;font-size:12px!important;line-height:1.4;font-weight:800!important;white-space:normal;overflow-wrap:anywhere;overflow:hidden;text-overflow:clip;text-transform:uppercase}
body.pos-body #productList .product-price{display:block;color:#126ff1!important;font-size:16px!important;font-weight:800;line-height:1.25}
body.pos-body #productList .product-price small{color:#647894!important;font-size:11px;font-weight:500}
body.pos-body #productList .product-stock{display:inline-flex;align-items:center;align-self:flex-start;max-width:100%;font-size:10px;line-height:1.2;padding:5px 7px;white-space:normal;overflow-wrap:anywhere}
body.pos-body #productList .product-add{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:34px;margin-top:auto;padding:8px 10px!important;border:0!important;border-radius:8px;background:#1976ff!important;color:#fff!important;font-size:12px!important;font-weight:700}
body.pos-body #productList .product-add:disabled{background:#cbd5e1!important;color:#64748b!important}
body.pos-body #productList .no-products{grid-column:1/-1;padding:32px 12px;text-align:center;color:#7184a4}
body.pos-body #productList.list-view{display:flex!important;flex-direction:column;gap:8px}
body.pos-body #productList.list-view .product-item{display:flex!important;flex-direction:row!important;min-height:92px;align-items:center!important;padding:10px!important;gap:12px}
body.pos-body #productList.list-view .product-visual{height:50px;min-height:50px;width:50px;flex:0 0 50px;border:0;border-radius:9px}
body.pos-body #productList.list-view .product-card-body{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:0}
body.pos-body #productList.list-view .product-stock{display:none}
@media(max-width:1450px){body.pos-body #productList.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){body.pos-body #productList.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:560px}}
@media(max-width:700px){body.pos-body #productList.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}body.pos-body #productList .product-card-body{padding:8px}body.pos-body #productList .p-name{font-size:11px!important}}

/* Direct quantity entry for every cart item (whole pieces or fractional KG). */
.cart-qty-input{box-sizing:border-box;width:54px;min-width:54px;height:30px;padding:3px 4px;text-align:center;font-size:13px;font-weight:700;border:1px solid #d7deea;border-radius:7px;background:#fff;color:#10264a;}
.cart-qty-input:focus{outline:2px solid rgba(47,124,255,.18);border-color:var(--blue);}
.qty-btns{gap:4px!important;}
@media(max-width:480px){.cart-qty-input{width:48px;min-width:48px;}}