/* Selim Papers POS — কাউন্টারে দ্রুত কাজের জন্য */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --g:#16a34a; --g-dark:#15803d; --ink:#0f172a; --muted:#64748b;
  --line:#e2e8f0; --bg:#f1f5f9; --card:#fff; --danger:#dc2626; --warn:#f59e0b;
  --blue:#2563eb; --purple:#7c3aed;
}
html,body{height:100%}
body{
  font-family:'Hind Siliguri','Noto Sans Bengali',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; overflow:hidden;
}
.hidden{display:none !important}
.screen{height:100vh;width:100vw}
.center{display:flex;align-items:center;justify-content:center}

/* ── লগইন / শিফট ── */
.card{background:var(--card);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.08);padding:28px}
.login-card{width:380px;display:flex;flex-direction:column;gap:14px}
.login-card h2{font-size:20px;margin-bottom:4px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.brand .logo{width:44px;height:44px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:700}
.brand small{display:block;color:var(--muted);font-size:12px}
.brand.sm .logo{width:32px;height:32px;font-size:13px}
a.brand{text-decoration:none;color:inherit}
a.brand:hover{text-decoration:none}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:600}
input,select{
  font:inherit;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);outline:none;width:100%
}
input:focus,select:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(22,163,74,.12)}

/* ── বোতাম ── */
.btn{
  font:inherit;font-weight:600;padding:10px 16px;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;cursor:pointer;transition:.12s;white-space:nowrap
}
.btn:hover{background:#f8fafc}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--g);border-color:var(--g);color:#fff}
.btn.primary:hover{background:var(--g-dark)}
.btn.lg{padding:14px 18px;font-size:16px}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.danger{color:var(--danger);border-color:#fecaca}
.btn.danger:hover{background:#fef2f2}
.msg{font-size:13px;color:var(--danger);min-height:18px}
.msg.ok{color:var(--g)}

/* ── উপরের বার ── */
.topbar{
  height:56px;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 16px
}
.tb-info{display:flex;gap:8px;flex:1}
.tb-actions{display:flex;gap:8px}
.chip{background:#f1f5f9;padding:5px 11px;border-radius:20px;font-size:12.5px;font-weight:600;color:var(--muted)}
.chip.net-on{background:#dcfce7;color:#15803d}
.chip.net-off{background:#fee2e2;color:#b91c1c}
.chip.warn{background:#fef3c7;color:#92400e}
/* ড্রয়ারে যত টাকা থাকার কথা — শিফট জুড়ে চোখের সামনে থাকে */
.chip.cash{background:#e0f2fe;color:#075985;cursor:default}
.badge{background:var(--g);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;margin-left:4px}

/* শিফট পর্দার তথ্যরেখা — আগের শিফট কত টাকা রেখে গেছে / কার শিফট চলছে */
.shift-note{background:#f0f9ff;border:1px solid #bae6fd;color:#075985;
            border-radius:8px;padding:9px 11px;font-size:12.5px;line-height:1.5;margin:-6px 0 0}
.shift-note.join{background:#fefce8;border-color:#fde68a;color:#854d0e}
.shift-note b{font-weight:700}

/* ── ভাষা টগল / language toggle ── */
.lang-toggle{display:inline-flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;align-self:center}
.lang-toggle button{font:inherit;font-weight:600;font-size:12.5px;padding:7px 11px;border:none;
  background:#fff;color:var(--muted);cursor:pointer;line-height:1.1}
.lang-toggle button+button{border-left:1.5px solid var(--line)}
.lang-toggle button:hover{background:#f8fafc}
.lang-toggle button.on{background:var(--g);color:#fff}

/* ── মূল গ্রিড: পণ্য | কার্ট | বিল ── */
.pos-grid{display:grid;grid-template-columns:1fr 1.25fr 320px;gap:12px;padding:12px;height:calc(100vh - 56px)}
.panel{background:var(--card);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}

/* পণ্য */
.filters{display:grid;grid-template-columns:1fr;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.filters select{padding:8px 10px;font-size:13px}
.filters>input{grid-column:1/-1}
@media(min-width:1500px){.filters{grid-template-columns:1fr 1fr}}
.grid{flex:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px;align-content:start}
.pcard{
  border:1.5px solid var(--line);border-radius:10px;padding:9px;cursor:pointer;
  background:#fff;transition:.12s;text-align:left;font:inherit
}
.pcard:hover{border-color:var(--g);box-shadow:0 3px 10px rgba(22,163,74,.13);transform:translateY(-1px)}
.pcard .nm{font-size:12.5px;font-weight:600;line-height:1.32;height:50px;overflow:hidden;margin-bottom:5px}
.pcard .pr{color:var(--g);font-weight:700;font-size:15px}
.pcard .st{font-size:11px;color:var(--muted);margin-top:2px}
.pcard .st.out{color:var(--danger);font-weight:700}
.pcard[disabled]{opacity:.45;cursor:not-allowed}
.pempty{color:var(--muted);padding:16px;font-size:14px}

/* ভ্যারিয়েন্ট চিহ্ন / variant marker */
.vmark{display:inline-block;background:#ede9fe;color:#6d28d9;border-radius:20px;
  padding:1px 7px;font-size:10.5px;font-weight:700;white-space:nowrap}
.pcard .vmark{margin-bottom:3px}

/* পণ্যের তালিকা ভিউ / product list view */
.view-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);font-weight:600}
.view-btns{display:inline-flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.vbtn{font:inherit;font-weight:600;font-size:12.5px;padding:5px 12px;border:none;
  background:#fff;color:var(--muted);cursor:pointer;line-height:1.2}
.vbtn+.vbtn{border-left:1.5px solid var(--line)}
.vbtn:hover{background:#f8fafc}
.vbtn.on{background:var(--g);color:#fff}
.plist{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px}
.prow-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;
  border:1.5px solid var(--line);border-radius:9px;padding:8px 11px;background:#fff;cursor:pointer;transition:.12s}
.prow-item:hover{border-color:var(--g);background:#f0fdf4}
.prow-item .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow-item .un{font-size:11.5px;color:var(--muted);min-width:42px;text-align:right}
.prow-item .st{font-size:11.5px;color:var(--muted);min-width:74px;text-align:right}
.prow-item .st.out{color:var(--danger);font-weight:700}
.prow-item .pr{color:var(--g);font-weight:700;font-size:14.5px;min-width:74px;text-align:right}
.prow-item[disabled]{opacity:.45;cursor:not-allowed}

/* কার্ট */
.barcode-row{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
#barcodeInput{font-size:16px;font-weight:600}
.customer-row{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);align-items:center}
.customer-row input{flex:1}
.pill{
  padding:8px 14px;border-radius:20px;border:1.5px solid var(--line);background:#fff;
  font:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap
}
.pill.active{background:var(--g);color:#fff;border-color:var(--g)}
.cust-info{padding:9px 12px;background:#f0fdf4;border-bottom:1px solid var(--line);font-size:13px}
.cart-table-wrap{flex:1;overflow-y:auto}
.cart-table{width:100%;border-collapse:collapse;font-size:14px}
.cart-table th{
  position:sticky;top:0;background:#f8fafc;padding:9px 8px;text-align:left;
  font-size:12px;color:var(--muted);border-bottom:1.5px solid var(--line);z-index:1
}
.cart-table td{padding:8px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.cart-table tr.empty td{text-align:center;color:var(--muted);padding:40px 8px}
.cart-table input{width:66px;padding:6px 8px;font-size:14px;text-align:right}
.cart-table .nm{font-weight:600;font-size:13.5px}
.cart-table .sub{font-size:11.5px;color:var(--muted)}
.x{background:none;border:none;color:var(--danger);font-size:19px;cursor:pointer;padding:0 6px;line-height:1}

/* বিল */
.bill{padding:14px;gap:12px}
.bill-rows{display:flex;flex-direction:column;gap:9px}
.bill .row{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.bill .row.muted{color:var(--muted);font-size:13px}
.bill .row input{width:104px;text-align:right;padding:7px 9px}
.bill .row .inline{display:flex;align-items:center;gap:6px}
.bill .row .inline small{color:var(--muted);font-size:11px;min-width:30px}
.bill .row.total{
  border-top:2px solid var(--line);padding-top:11px;margin-top:3px;font-size:17px;font-weight:700
}
.bill .row.total b{color:var(--g);font-size:24px}
.pay-buttons{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.btn.pay{padding:14px;font-size:15px;font-weight:700;color:#fff;border:none}
.btn.pay.cash{background:var(--g)}
.btn.pay.mfs{background:var(--purple)}
.btn.pay.card{background:var(--blue)}
.btn.pay.multi{background:#0891b2}
.btn.pay.due{background:var(--warn)}
.btn.pay:disabled{background:#cbd5e1;cursor:not-allowed}

/* মডাল */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;z-index:50}
.modal-box{background:#fff;border-radius:14px;padding:24px;width:440px;max-height:88vh;overflow-y:auto}
.modal-box h3{margin-bottom:14px;font-size:18px}
.pay-total{background:#f0fdf4;padding:14px;border-radius:10px;text-align:center;margin-bottom:14px;font-size:15px}
.pay-total b{display:block;font-size:30px;color:var(--g);margin-top:4px}
#paySplit{display:flex;flex-direction:column;gap:10px}
#paySplit .pay-line{display:flex;gap:8px;align-items:center}
#paySplit .pay-line span{min-width:74px;font-size:13px;font-weight:600;color:var(--muted)}
.change{background:#fef3c7;padding:11px;border-radius:9px;text-align:center;margin-top:12px;font-weight:600}
.change b{color:#92400e;font-size:21px}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn{flex:1}
.hold-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}
.hold-item{display:flex;justify-content:space-between;align-items:center;padding:11px;border:1.5px solid var(--line);border-radius:9px}
.hold-item:hover{border-color:var(--g);background:#f0fdf4}
.hold-item small{color:var(--muted);font-size:11.5px}
.hold-item.out{opacity:.5}
.hold-item.out:hover{border-color:var(--line);background:#fff}
.var-product{font-size:13px;color:var(--muted);font-weight:600;margin:-6px 0 12px}
.close-summary{background:#f8fafc;border-radius:10px;padding:14px;margin-bottom:14px;font-size:14px}
.close-summary .r{display:flex;justify-content:space-between;padding:4px 0}
.close-summary .r.big{font-weight:700;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}

/* ── শিফট বন্ধের সময় মালিকের হাতে টাকা তুলে দেওয়ার ঘর ── */
.handover{border:1.5px solid #fde68a;background:#fffbeb;border-radius:10px;padding:13px;margin-top:14px}
.ho-head{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.ho-head b{font-size:14px;color:#92400e}
.ho-head small{font-size:11.5px;color:#a16207;line-height:1.45}
.ho-line{display:flex;gap:8px;align-items:center;margin-bottom:9px}
.ho-line>span{min-width:112px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ho-line input,.ho-line select{flex:1;padding:8px 10px;font-size:14px}
.ho-fixed{flex:1;font-size:13.5px;font-weight:700}
/* গোনা টাকা বিয়োগ হস্তান্তর = পরের শিফটের শুরুর নগদ — এটাই ভুল হয় বেশি */
.ho-left{background:#fff;border:1px solid #fde68a;border-radius:8px;padding:9px 11px;
         font-size:12.5px;line-height:1.5;color:#92400e;margin:0}
.ho-left b{font-weight:700;font-size:14px}

/* টোস্ট */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:10px;z-index:99;
  font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2)
}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--g)}

/* ═══════════════════════════════════════════════════════════════════
   ছোট পর্দা — ট্যাবলেট ও মোবাইল

   ডেস্কটপে তিন কলাম (পণ্য | কার্ট | বিল) একসাথে দেখা যায় আর পাতা কখনো
   স্ক্রল করে না — height:100vh ধরে রাখা। ফোনে ওই দুটোই অচল: ৩২০px চওড়া
   বিলের কলাম একা প্রায় পুরো পর্দা খেয়ে ফেলে, আর ভেতরের প্যানেল আলাদা
   করে স্ক্রল করলে ব্যবহারকারী বুঝতেই পারে না নিচে আরও কিছু আছে।
   তাই ছোট পর্দায় প্যানেলগুলো একটার নিচে একটা বসে আর পুরো পাতাই স্ক্রল করে।
   ═══════════════════════════════════════════════════════════════════ */

/* ── ট্যাবলেট: বিল নিচে নেমে পুরো চওড়া নেয় ── */
@media (max-width:1100px){
  .pos-grid{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;height:calc(100vh - 56px)}
  .bill{grid-column:1/-1}
  .bill-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px}
  .bill .row.total{grid-column:1/-1}
  .pay-buttons{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr)}
  .btn.pay.multi,.btn.pay.due{grid-column:span 1}

  /* উপরের বারের বোতামগুলো এক সারিতে ধরে না — সারি ভেঙে না দিয়ে পাশে
     সরিয়ে দেখার ব্যবস্থা, নইলে পুরো পাতা ৯৮৮px চওড়া হয়ে কেটে যেত */
  .topbar{flex-wrap:nowrap;gap:8px;padding:7px 12px;overflow:hidden}
  .topbar .brand.sm{flex:0 0 auto}
  .tb-info{flex:0 0 auto;overflow-x:auto;scrollbar-width:none}
  .tb-info::-webkit-scrollbar{display:none}
  .tb-info .chip{flex:0 0 auto}
  .tb-actions{flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-end}
  .tb-actions::-webkit-scrollbar{display:none}
  .tb-actions>*{flex:0 0 auto}
}

/* ট্যাবলেটে বিলের সারি যত পাতলা, উপরে পণ্য ও কার্ট তত বেশি জায়গা পায় */
@media (max-width:1100px) and (min-width:821px){
  .filters{grid-template-columns:1fr 1fr;padding:10px}
  .bill{padding:10px 12px;gap:8px}
  .bill-rows{grid-template-columns:repeat(3,1fr);gap:6px 18px}
  .bill .row.total{padding-top:8px;margin-top:0;font-size:15px}
  .bill .row.total b{font-size:20px}
  .bill .row input{width:88px;padding:5px 8px}
  .pay-buttons{margin-top:8px;grid-template-columns:repeat(5,1fr);gap:7px}
  .btn.pay{padding:11px 6px;font-size:13px}
  .cart-table th,.cart-table td{padding:6px 5px}
  .cart-table input{width:56px;padding:5px 6px}
}

/* ── মোবাইল: সব একটার নিচে একটা, পাতা নিজেই স্ক্রল করে ── */
@media (max-width:820px){
  .pos-grid{
    display:flex;flex-direction:column;height:auto;min-height:calc(100vh - 56px);
    padding:8px;gap:8px
  }
  .panel{overflow:visible}
  /* পণ্যের তালিকা ছোট রাখি — নইলে বারকোড ঘর ও কার্ট পর্দার নিচে চলে যায়,
     আর তালিকার ভেতরের স্ক্রল পাতাটাকে নামতেই দেয় না */
  .products{max-height:44vh}
  .products .grid,.products .plist{overflow-y:auto;overscroll-behavior:contain}
  /* ক্যাটাগরি ও ব্র্যান্ড পাশাপাশি — তিন সারি ফিল্টারে পণ্যের ঘরের জায়গাই থাকত না */
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px 10px}
  .view-bar{padding:5px 10px;font-size:11.5px}
  .vbtn{padding:4px 10px;font-size:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px}
  /* নাম দুই লাইনে পুরো দেখাক, মাঝপথে কেটে নয় */
  .pcard .nm{height:31px;line-height:1.3;font-size:11.5px}
  .cart-table-wrap{overflow-x:visible}
  .bill-rows{display:flex;flex-direction:column}
  .pay-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .btn.pay.due{grid-column:1/-1}

  /* ফোনে লোগোর লেখা আর চিপের অর্ধেকটা ছেঁটে দিই — এক সারিতেই সব ধরে,
     ট্যাবলেটের নিয়মেই বোতামগুলো পাশে সরিয়ে দেখা যায় */
  .topbar .brand.sm b{display:none}
  .tb-info{max-width:38vw}
  .tb-actions{justify-content:flex-start}

  /* কার্টের ৬টা কলাম ৩৬০px-এ ধরে না — প্রতিটি লাইন একটা কার্ড হয়ে যায়,
     আর কোন সংখ্যাটা কী তা data-lbl থেকে পাশে বসে (renderCart দেখুন) */
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table thead{display:none}
  .cart-table tr{position:relative;border:1.5px solid var(--line);border-radius:10px;
                 padding:9px 40px 9px 11px;margin-bottom:8px}
  .cart-table tr.empty{border:0;padding:0;margin:0}
  .cart-table tr.empty td{text-align:center;padding:30px 8px}
  .cart-table td{border:0;padding:3px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .cart-table td[data-lbl]::before{
    content:attr(data-lbl);font-size:11.5px;font-weight:600;color:var(--muted)
  }
  .cart-table td:first-child{padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid #f1f5f9}
  .cart-table input{width:110px}
  .cart-table .x{position:absolute;top:7px;right:8px;font-size:23px;padding:2px 7px}

  /* বারকোড ও গ্রাহকের সারি — একটা লাইনে ধরে না, ভেঙে যাক */
  .barcode-row,.customer-row{flex-wrap:wrap;padding:10px}
  #barcodeInput{flex:1 1 100%}
  .customer-row input{flex:1 1 100%;order:-1}

  .modal{padding:10px;align-items:end}
  .modal-box{width:100%;max-width:520px;max-height:92vh;padding:18px;border-radius:14px}
  .modal-actions{flex-direction:column-reverse}
  .ho-line{flex-wrap:wrap}
  .ho-line>span{min-width:100%}
  .ho-line input,.ho-line select{flex:1 1 100%}
  .login-card{width:100%}
  .toast{left:10px;right:10px;transform:none;text-align:center;bottom:14px}
}

/* ── ছোট ফোন ── */
@media (max-width:420px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .bill .row.total b{font-size:21px}
  .pay-total b{font-size:26px}
  .btn.sm{padding:7px 9px;font-size:12.5px}
  .chip{padding:4px 9px;font-size:11.5px}
}

/* মোবাইল ব্রাউজার ১৬px-এর কম ফন্টে ইনপুটে ট্যাপ করলেই পর্দা জুম করে ফেলে,
   আর POS-এ প্রতিটি বিক্রয়ে বহুবার ট্যাপ হয় — তাই ছোট পর্দায় সব ইনপুট ১৬px */
@media (max-width:820px){
  input,select,textarea,.cart-table input,.bill .row input,.filters select{font-size:16px}
}

/* ── রসিদ: শুধু প্রিন্টে দেখা যায় ── */
.receipt{display:none}
@media print{
  body>*{display:none !important}
  .receipt{
    display:block !important;width:72mm;font-family:'Hind Siliguri',monospace;
    font-size:11.5px;color:#000;line-height:1.45
  }
  .receipt .c{text-align:center}
  .receipt .b{font-weight:700}
  .receipt hr{border:none;border-top:1px dashed #000;margin:5px 0}
  .receipt table{width:100%;border-collapse:collapse}
  .receipt td{padding:1.5px 0;vertical-align:top}
  .receipt .r{text-align:right}
  .receipt h2{font-size:15px;margin-bottom:2px}
  @page{margin:3mm;size:80mm auto}
}

/* আগের বাকি বিলে যোগ করার সুইচ */
.prev-due-add{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
              color:var(--g);cursor:pointer;margin-left:7px;white-space:nowrap}
.prev-due-add input{width:auto;padding:0;margin:0;accent-color:var(--g)}
.bill .row:not(.muted) #preDue{color:var(--danger)}
#paySplit2 .pay-line{display:flex;gap:8px;align-items:center;margin-bottom:9px}
#paySplit2 .pay-line span{min-width:78px;font-size:13px;font-weight:600;color:var(--muted)}
#paySplit2 input,#paySplit2 select{flex:1}