/* ============================================================
   BabyPlus POS v7.8.1 - style.css
   (মূল :root ভ্যারিয়েবল + মূল ডিজাইন + মোবাইল পারফরম্যান্স/ফাইনাল-ফিক্স স্টাইল)
   ============================================================ */

  :root{
    --bg:#EEF0F4; --surface:#FFFFFF; --ink:#1F2937; --muted:#4B5563; --line:#D1D5DB;
    --coral:#2563EB; --coral-dark:#1D4ED8; --teal:#0D9488; --teal-dark:#0F766E;
    --amber:#D97706; --amber-dark:#B45309; --danger:#DC2626; --danger-dark:#B91C1C;
    --radius-lg:16px; --radius-md:12px; --radius-sm:8px;
    --shadow-soft:0 2px 12px rgba(0,0,0,0.04); --shadow-pop:0 10px 28px rgba(0,0,0,0.08);
  }
  *{box-sizing:border-box;}
  body{ margin:0; background:var(--bg); min-height:100vh; font-family:'Hind Siliguri','Segoe UI',Arial,sans-serif; color:var(--ink); font-size:15px; }
  h1,h2,h3,.brand,.display{ font-family:'Baloo Da 2','Hind Siliguri',sans-serif; }
  .container{ max-width:1340px; margin:0 auto; padding:20px 16px 60px; }

  #loginScreen{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:16px; }
  .login-card{
    width:100%; max-width:420px; background:var(--surface); padding:36px 30px;
    border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); text-align:center;
    border:1px solid var(--line); position:relative; overflow:hidden;
  }
  .login-mark{
    width:80px; height:80px; margin:0 auto 16px; border-radius:20px;
    background:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.08); border:1px solid var(--line); overflow:hidden;
  }
  .login-mark img{ width:100%; height:100%; object-fit:cover; }
  .login-card h2{ margin:0 0 6px; font-size:26px; color:var(--ink); font-weight:800; }
  .login-card .sub{ color:var(--muted); font-size:14.5px; margin-bottom:22px; font-weight:600; }

  .form-group{ margin-bottom:16px; text-align:left; }
  label{ display:block; margin-bottom:6px; font-weight:700; font-size:14.5px; color:var(--ink); }
  input, select, textarea{
    width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
    font-size:15px; outline:none; transition:.15s; background:#F9FAFB; font-family:inherit; color:var(--ink); font-weight:600;
  }
  input:focus, select:focus, textarea:focus{ border-color:var(--coral); box-shadow:0 0 0 3px rgba(37,99,235,0.15); background:#fff; }

  .btn{
    border:none; padding:12px 18px; border-radius:var(--radius-sm); cursor:pointer;
    font-weight:700; font-size:15px; transition:.15s; font-family:inherit;
    display:inline-flex; align-items:center; justify-content:center; gap:6px; position:relative;
  }
  .btn:disabled{ opacity:0.65; cursor:not-allowed; }
  .btn-block{ width:100%; }
  .btn-coral{ background:var(--coral); color:#fff; }
  .btn-coral:hover:not(:disabled){ background:var(--coral-dark); }
  .btn-teal{ background:var(--teal); color:#fff; }
  .btn-teal:hover:not(:disabled){ background:var(--teal-dark); }
  .btn-amber{ background:#F59E0B; color:#fff; }
  .btn-amber:hover:not(:disabled){ background:#B45309; }
  .btn-danger{ background:var(--danger); color:#fff; }
  .btn-danger:hover:not(:disabled){ background:#B91C1C; }
  .btn-ghost{ background:#E5E7EB; color:var(--ink); }
  .btn-ghost:hover:not(:disabled){ background:#D1D5DB; }
  .btn-sm{ padding:6px 10px; font-size:12.5px; border-radius:6px; }

  .spinner {
    width: 16px; height: 16px; border: 2px solid #ffffff; border-top: 2px solid transparent;
    border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; vertical-align: middle;
  }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  /* ===== রো ফ্ল্যাশ হাইলাইট — কোনো ডাটা আপডেট হলে ইউজারকে সাথে সাথে ভিজ্যুয়াল কনফার্মেশন দেখানোর জন্য ===== */
  @keyframes flashUpdate{
    0%{ background:#FEF3C7; }
    60%{ background:#FEF3C7; }
    100%{ background:transparent; }
  }
  .flash-update{ animation: flashUpdate 1.6s ease; border-radius:8px; }

  #appScreen{ display:none; }
  .topbar{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    background:var(--surface); padding:16px 20px; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft); margin-bottom:16px; border:1px solid var(--line);
  }
  .brand{ display:flex; align-items:center; gap:14px; }
  .brand .mark{
    width:56px; height:56px; border-radius:16px; flex:none;
    background:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.06); border:1px solid var(--line); overflow:hidden;
  }
  .brand .mark img{ width:100%; height:100%; object-fit:cover; }
  .brand p{ margin:2px 0 0; color:var(--muted); font-size:13.5px; font-weight:600; }
  
  .topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .topbar-right .today-pill{
    background:#F3F4F6; color:var(--ink); font-size:13.5px; font-weight:700;
    padding:8px 14px; border-radius:999px; border:1px solid #E5E7EB; white-space:nowrap;
  }

  .tabbar{
    display:flex; gap:6px; overflow-x:auto; background:var(--surface); padding:8px;
    border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); border:1px solid var(--line); margin-bottom:18px;
    position:-webkit-sticky; position:sticky; top:0; z-index:500;
  }
  .tabbtn{
    border:none; background:transparent; padding:10px 18px; border-radius:var(--radius-sm); cursor:pointer;
    font-family:inherit; font-weight:700; font-size:14.5px; color:var(--muted); white-space:nowrap; transition:.15s;
    display:inline-flex; align-items:center; gap:6px;
  }
  .tabbtn:hover{ color:var(--ink); background:#F3F4F6; }
  .tabbtn.active{ background:var(--coral); color:#fff; }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; animation:fadein .2s ease; }
  @keyframes fadein{ from{opacity:0;} to{opacity:1;} }

  .card{ background:var(--surface); padding:20px; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); margin-bottom:18px; border:1px solid var(--line); }
  .card h2{ margin:0 0 16px; font-size:19px; color:var(--ink); display:flex; align-items:center; gap:8px; font-weight:800; }
  .card h2 .num{
    width:30px; height:30px; border-radius:8px; background:#EFF6FF; color:var(--coral-dark);
    display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-family:'Baloo Da 2'; font-weight:800;
  }
  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
  @media(max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

  .grid-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:18px; }
  .stat{ padding:16px 18px; border-radius:var(--radius-md); color:#1F2937; border:1px solid var(--line); background:#FFFFFF; box-shadow:var(--shadow-soft); }
  .stat .t{ font-size:13.5px; font-weight:700; color:var(--muted); }
  .stat .a{ font-size:24px; font-weight:800; margin-top:4px; font-family:'Baloo Da 2'; color:var(--ink); }
  .stat .s{ font-size:12.5px; color:var(--muted); margin-top:3px; font-weight:600; }
  
  .stat.c1{ border-left:5px solid #2563EB; }
  .stat.c2{ border-left:5px solid #8B5CF6; }
  .stat.c3{ border-left:5px solid #10B981; }
  .stat.c4{ border-left:5px solid #EF4444; }
  .stat.c5{ border-left:5px solid #F59E0B; }

  .chartwrap{ display:flex; align-items:flex-end; gap:10px; height:120px; padding:8px 4px 0; }
  .barcol{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .bar{ width:100%; max-width:32px; background:#9CA3AF; border-radius:4px 4px 0 0; min-height:4px; }
  .barcol:hover .bar{ background:var(--coral); }
  .barcol .lbl{ font-size:11.5px; color:var(--muted); font-weight:700; }

  #lowStockList{ max-height:220px; overflow-y:auto; padding-right:4px; }
  .lowstock-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:8px; background:#FEF2F2; margin-bottom:8px; border:1px solid #FCA5A5; }
  .lowstock-row.crit{ background:#FEE2E2; border-color:#F87171; }
  .lowstock-row .nm{ font-weight:700; font-size:14.5px; color:#1F2937; }
  .lowstock-row .qty{ font-size:13.5px; color:#B91C1C; font-weight:800; }

  .order-row{ display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:8px; align-items:end; margin-bottom:12px; }
  @media(max-width:640px){ .order-row{ grid-template-columns:1fr; } }

  .prod-search-container{ position:relative; }
  .prod-results-list{
    position:absolute; top:100%; left:0; right:0; background:#fff; border:1.5px solid var(--coral);
    border-radius:var(--radius-sm); max-height:220px; overflow-y:auto; z-index:99; box-shadow:var(--shadow-pop); display:none;
  }
  .prod-result-item{ padding:10px 14px; border-bottom:1px solid #F3F4F6; cursor:pointer; font-weight:600; font-size:14px; }
  .prod-result-item:hover{ background:#EFF6FF; color:var(--coral-dark); }

  table{ width:100%; border-collapse:collapse; font-size:14.5px; }
  .cart-table th, .cart-table td{ border-bottom:1px solid var(--line); padding:10px; text-align:left; }
  .cart-table th{ background:#F9FAFB; font-weight:700; color:var(--muted); font-size:12.5px; text-transform:uppercase; }
  .cart-summary{ background:#F9FAFB; padding:14px; border-radius:var(--radius-sm); margin-top:14px; border:1px solid var(--line); }
  .cart-summary div{ display:flex; justify-content:space-between; margin-bottom:6px; font-size:14.5px; font-weight:600; }
  .cart-summary div.total{ font-weight:800; font-size:16.5px; color:var(--ink); border-top:1px dashed #9CA3AF; padding-top:8px; margin-bottom:0; }
  .btn-remove{ background:var(--danger); color:#fff; padding:4px 8px; border-radius:6px; font-size:12px; border:none; cursor:pointer; font-weight:700; }

  .table-responsive{ overflow-x:auto; }
  .sales-table th, .sales-table td{ border-bottom:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; font-size:14px; }
  .sales-table th{ background:#F9FAFB; color:var(--muted); font-weight:700; text-transform:uppercase; font-size:12px; }
  .sales-table tr:hover td{ background:#F9FAFB; }
  .prod-tag{ display:inline-block; background:#F3F4F6; color:#1F2937; padding:3px 8px; border-radius:6px; font-size:12.5px; margin:2px 2px 2px 0; font-weight:600; border:1px solid #E5E7EB; }
  
  .status{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; text-transform:capitalize; }
  .status-pending{ background:#FEF3C7; color:#92400E; }
  .status-in_review{ background:#E0E7FF; color:#3730A3; }
  .status-shipped{ background:#DBEAFE; color:#1D4ED8; }
  .status-delivered{ background:#D1FAE5; color:#065F46; }
  .status-cancelled, .status-refunded, .status-returned{ background:#FEE2E2; color:#991B1B; }

  .filter-card{ background:#F9FAFB; padding:16px; border-radius:var(--radius-md); border:1px solid var(--line); margin-bottom:18px; }
  .filter-row{ display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; align-items:end; }
  @media(max-width:760px){ .filter-row{ grid-template-columns:1fr 1fr; } }

  .pager{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:14px; }
  .pager span{ font-size:13.5px; color:var(--muted); font-weight:600; }

  .empty-hint{ text-align:center; color:var(--muted); padding:24px 10px; font-size:14.5px; font-weight:600; }

  .prod-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
  .prod-row:last-child{ border-bottom:none; }
  .prod-info .nm{ font-weight:700; font-size:15.5px; }
  .prod-info .meta{ font-size:13.5px; color:var(--muted); margin-top:2px; font-weight:600; }
  .prod-actions{ display:flex; gap:6px; flex:none; }

  #toastHost{ position:fixed; bottom:20px; right:20px; left:20px; z-index:9999; display:flex; flex-direction:column; align-items:flex-end; gap:8px; max-width:340px; margin-left:auto; }
  .toast{ background:var(--ink); color:#fff; padding:12px 16px; border-radius:10px; font-size:14px; font-weight:600; box-shadow:var(--shadow-pop); animation:toastin .2s ease; }
  .toast.ok{ background:#059669; }
  .toast.err{ background:#DC2626; }
  .toast.info{ background:#2563EB; }
  @keyframes toastin{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }

  .modal-backdrop{ position:fixed; inset:0; background:rgba(15, 23, 42, 0.4); display:none; align-items:center; justify-content:center; z-index:9998; padding:16px; }
  .modal-backdrop.show{ display:flex; }
  .modal{ background:#fff; border-radius:var(--radius-lg); max-width:540px; width:100%; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-pop); }
  .modal-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
  .modal-head h3{ margin:0; font-size:18px; font-weight:800; }
  .modal-close{ background:#F3F4F6; border:none; width:30px; height:30px; border-radius:999px; cursor:pointer; font-size:16px; color:var(--muted); }
  .modal-body{ padding:20px; }
  .modal-foot{ padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

  /* [NEW] QR স্ক্যানার মডাল */
  #qrScanVideo{ width:100%; max-width:360px; border-radius:12px; background:#000; aspect-ratio:1/1; object-fit:cover; }
  #qrScanResultBox{ margin-top:10px; min-height:24px; font-weight:800; font-size:15px; }

  #printArea{ display:none; }
  .inv-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:14px; border-bottom:1px dashed #E5E7EB; }
  .inv-total{ font-weight:800; font-size:16px; padding-top:10px; }

  /* লেবেল স্টাইল ও নিখুঁত স্পেস ফিটিং */
  .sticker-box{
    width:100%; height:100%; border:1.5px dashed var(--ink); padding:6px 10px; background:#fff;
    border-radius:8px; font-family:'Hind Siliguri', Arial, sans-serif; margin:0 auto; color:var(--ink); box-sizing:border-box;
    display:flex; flex-direction:column; justify-content:space-between; page-break-inside: avoid; break-inside: avoid;
  }
  .sticker-header{ text-align:center; border-bottom:1.5px solid var(--ink); padding-bottom:3px; margin-bottom:4px; }
  .sticker-header h2{ margin:0; font-size:17px; font-family:'Baloo Da 2'; color:var(--ink); }
  .sticker-header .meta-info{ margin:1px 0 0; font-size:10px; font-weight:700; color:var(--ink); }
  .sticker-header .order-meta{ margin:1px 0 0; font-size:10px; color:var(--muted); font-weight:700; }
  .sticker-body p{ margin:3px 0; font-size:13px; line-height:1.3; }

  /* [NEW] লেবেলে QR কোড বসানোর জন্য — বাম পাশে তথ্য, ডান পাশে QR */
  .sticker-content-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .sticker-info{ flex:1; min-width:0; }
  .sticker-qr{ flex:none; width:92px; text-align:center; }
  .sticker-qr svg{ width:100%; height:auto; display:block; }
  .sticker-qr .qr-cap{ font-size:8px; font-weight:700; color:var(--muted); margin-top:2px; line-height:1.1; }
  .print-grid-10 .sticker-qr{ width:72px !important; }
  .print-grid-10 .sticker-qr .qr-cap{ font-size:6.5px !important; }
  
  /* প্রডাক্ট ও পার্সেল আইডি বড় ও বোল্ড করার জন্য */
  .sticker-body .highlight-important {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #000000 !important;
  }
  
  /* ক্যাশ অন ডেলিভারি (ব্যাকগ্রাউন্ড ছাড়া, কালো ও বোল্ড) */
  .sticker-cod{ font-size:14.5px; font-weight:900; background:transparent; color:#000000; text-align:center; padding:3px; margin-top:2px; font-family:'Baloo Da 2'; letter-spacing:0.5px; border-top:1.5px dashed var(--ink); }

@media print{
    #loginScreen, #appScreen, .modal-backdrop, #toastHost{
      display:none !important;
    }

    #printArea{ visibility:visible; }
    #printArea, #printArea *{ visibility:visible; }
    #printArea{ 
      display:block !important; 
      position:absolute !important; 
      top:0 !important; 
      left:0 !important; 
      width:210mm !important; 
      height:297mm !important;
      padding: 4mm 2mm !important; 
      margin: 0 !important;
      overflow: hidden !important;
    }
    .print-grid-10 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(5, 1fr);
      gap: 2mm 3mm;
      width: 206mm !important;
      height: 289mm !important;
    }
    .sticker-box {
      max-height: 56mm !important;
      overflow: hidden !important;
      padding: 4px 7px !important;
    }
    .print-grid-10 .sticker-header{ padding-bottom:2px !important; margin-bottom:2px !important; }
    .print-grid-10 .sticker-header h2{ font-size:13.5px !important; }
    .print-grid-10 .sticker-header .meta-info{ font-size:7.5px !important; margin:0 0 0 !important; }
    .print-grid-10 .sticker-header .order-meta{ font-size:7.5px !important; margin:0 0 0 !important; }
    .print-grid-10 .sticker-body p{ font-size:10.5px !important; margin:1px 0 !important; line-height:1.15 !important; }
    .print-grid-10 .sticker-body .highlight-important { font-size: 12px !important; }
    .print-grid-10 .sticker-cod{ font-size:11.5px !important; padding:1.5px !important; margin-top:1.5px !important; }
    @page {
      size: A4 portrait;
      margin: 0mm;
    }
}
  .section-note{ font-size:13.5px; color:var(--muted); background:#F9FAFB; border:1px dashed var(--line); border-radius:8px; padding:10px 12px; margin-bottom:14px; font-weight:600; }
  .kpi-strip{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
  .kpi{ background:#F9FAFB; border:1px solid var(--line); border-radius:10px; padding:12px 16px; min-width:140px; }
  .kpi .k{ font-size:12px; color:var(--muted); font-weight:700; }
  .kpi .v{ font-size:19px; font-weight:800; font-family:'Baloo Da 2'; margin-top:2px; }

  .toggle-auth{ font-size:14.5px; color:var(--coral); cursor:pointer; text-decoration:underline; font-weight:700; margin-top:16px; display:inline-block; }
  .icon-svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  
  .smart-paste-box { background: #EFF6FF; border: 1.5px dashed #2563EB; border-radius: 8px; padding: 12px; margin-bottom: 14px; }
  .smart-paste-box label { color: #1D4ED8; font-weight: 800; }
  .cart-inline-input{ width:70px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:16px; }
  
  .charge-edit-btn { background:none; border:none; color:var(--coral); cursor:pointer; font-size:11.5px; text-decoration:underline; font-weight:700; padding:0 2px; }
  
  .log-container{ max-height:260px; overflow-y:auto; background:#111827; color:#E5E7EB; border-radius:8px; padding:12px; font-family:monospace; font-size:13px; line-height:1.6; }
  .log-item{ border-bottom:1px solid #1F2937; padding:4px 0; }
  .log-item:last-child{ border-bottom:none; }
  .log-time{ color:#9CA3AF; margin-right:6px; }

  input[type="file"]{ padding:9px 10px; cursor:pointer; background:#F9FAFB; }
  input[type="file"]::file-selector-button{
    border:none; background:var(--coral); color:#fff; padding:8px 14px; border-radius:6px;
    font-weight:700; font-size:13.5px; font-family:inherit; cursor:pointer; margin-right:10px;
  }
  input[type="file"]::file-selector-button:hover{ background:var(--coral-dark); }

  @media (max-width: 640px){
    .container{ padding:12px 10px 50px; }
    input, select, textarea, .btn{ font-size:16px; }
    .login-card{ padding:26px 18px; border-radius:14px; }
    .login-mark{ width:64px; height:64px; }
    .login-card h2{ font-size:21px; }
    .topbar{ padding:12px 14px; border-radius:12px; }
    .brand{ gap:10px; }
    .brand .mark{ width:44px; height:44px; border-radius:12px; }
    #headerShopName{ font-size:17px; }
    .brand p{ font-size:12px; line-height:1.4; }
    .topbar-right{ width:100%; justify-content:space-between; }
    .topbar-right .today-pill{ font-size:12px; padding:6px 10px; }
    .tabbar{ padding:6px; gap:4px; border-radius:12px; }
    .tabbtn{ padding:9px 12px; font-size:13px; gap:5px; }
    .icon-svg{ width:16px; height:16px; }
    .card{ padding:14px; border-radius:12px; margin-bottom:14px; }
    .card h2{ font-size:16.5px; gap:6px; flex-wrap:wrap; }
    .card h2 .num{ width:26px; height:26px; font-size:13px; }
    .grid-summary{ grid-template-columns:1fr 1fr; gap:8px; }
    .stat{ padding:12px 14px; }
    .stat .t{ font-size:12px; }
    .stat .a{ font-size:19px; }
    .stat .s{ font-size:11px; }
    .kpi-strip{ gap:8px; }
    .kpi{ min-width:calc(50% - 4px); padding:10px 12px; }
    .kpi .v{ font-size:16.5px; }
    .sales-table th, .sales-table td,
    .cart-table th, .cart-table td{ padding:8px; font-size:12.5px; }
    .cart-inline-input{ width:100% !important; max-width:72px; padding:6px 4px !important; font-size:16px !important; text-align:center; }
    .filter-row{ grid-template-columns:1fr !important; }
    .order-row{ grid-template-columns:1fr !important; }
    .modal{ max-height:90vh; border-radius:14px; }
    .modal-head{ padding:12px 16px; }
    .modal-head h3{ font-size:16px; }
    .modal-body{ padding:14px; }
    .modal-foot{ padding:12px 16px; flex-wrap:wrap; }
    .modal-foot .btn{ flex:1; }
    #toastHost{ bottom:12px; right:12px; left:12px; max-width:none; }
    .toast{ font-size:13.5px; }
  }

  @media (max-width: 380px){
    .grid-summary{ grid-template-columns:1fr; }
    .kpi{ min-width:100%; }
    #headerShopName{ font-size:15.5px; }
  }

/* v7.8 performance: reduce layout/paint work without changing the POS design */
.prod-row, .log-item, .card, .kpi, .stat { contain: layout paint; }
#productList, #expenseList, #syncLogsHost { contain: content; }
.tab-panel:not(.active) { content-visibility: auto; contain-intrinsic-size: 600px; }


/* ---- id="bp-mobile-performance-v77" ---- */

/* BabyPlus POS v7.7: mobile + speed layer */
/* [FIX v7.9] scroll-behavior:smooth ও overscroll-behavior-y:none সরিয়ে দেওয়া হলো —
   এগুলো html/body এর ডিফল্ট স্ক্রল আচরণে হস্তক্ষেপ করছিল এবং কিছু ব্রাউজার/মোবাইল
   ওয়েবভিউতে মাউস হুইল ও টাচ স্ক্রল ঠিকমতো কাজ না করার কারণ ছিল। */
html{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
.backup-status-box{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:13px}
.backup-status-box>div{display:flex;gap:10px;align-items:center}.backup-status-box small{opacity:.75}
@media(max-width:900px){
  .container,.main,.content,.page{width:100%!important;max-width:100%!important}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important}
  .card{border-radius:14px!important;padding:14px!important}
  table{min-width:720px}
  .table-wrap,.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .btn{min-height:42px}
  input,select,textarea{min-height:44px;font-size:16px!important}
  .backup-status-box{flex-direction:column;align-items:flex-start}
  .backup-actions .btn{flex:1 1 140px}
}
@media(max-width:560px){
  body{font-size:14px}
  h1{font-size:22px!important}h2{font-size:17px!important}
  .tabbtn{padding:10px 11px!important;font-size:13px!important}
  .card{margin-bottom:10px!important}
  .backup-actions{display:grid!important;grid-template-columns:1fr 1fr}
  .backup-actions .btn:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* [FIX] মোবাইল রেস্পন্সিভ ডিজাইন আরও ভালো করার জন্য — প্রোডাক্ট/খরচ লিস্ট বাটনগুলো
   টেক্সটের সাথে গাদাগাদি হয়ে যাচ্ছিল, পুরো পেজ পাশে স্ক্রল হয়ে যাচ্ছিল, লম্বা বাংলা
   লেখা বক্সের বাইরে চলে যাচ্ছিল — এই ব্লক সেগুলো ঠিক করছে।
   [আপডেট] এখানের html,body{overflow-x:hidden} সরিয়ে #appScreen-এ নেওয়া হয়েছে
   (নিচে একটাই জায়গায়, ~লাইন ৪৫৬ এর কাছে) — কারণ body-এর উপর সরাসরি
   overflow-x থাকলে .sidebar-এর position:sticky ভেঙে যাচ্ছিল। */
h1,h2,h3,.nm,.meta,label,.btn,.stat .a,.kpi .v{ overflow-wrap:break-word; word-break:break-word; }

.prod-row{ flex-wrap:wrap; }
.prod-info{ min-width:0; flex:1 1 220px; }
.prod-actions{ flex-wrap:wrap; }

/* [FIX] বড় সমস্যা: CSS Grid-এ (.grid-2/.grid-3/.grid-4) ভেতরে টেবিল (min-width:720px)
   থাকলে গ্রিড কলাম ডিফল্টভাবে সেই টেবিলের মাপ অনুযায়ী বড় হয়ে যায় — table-responsive-এর
   overflow-x:auto কাজ করে না, পুরো পেজটাই ৭৬০px চওড়া হয়ে যায়, তাই মোবাইলে দুই আঙুল
   দিয়ে জুম/স্ক্রল করে দেখতে হচ্ছিল। এটাই আসল কারণ — এখানে ফিক্স করা হলো। */
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.card, .tab-panel, .table-responsive, .table-wrap{ min-width:0; }
.grid-2, .grid-3, .grid-4{ min-width:0; }

@media(max-width:640px){
  .prod-row{ padding:12px 0; }
  .prod-info{ flex:1 1 100%; }
  .prod-actions{ width:100%; justify-content:flex-start; margin-top:8px; gap:8px; }
  .prod-actions .btn{ flex:1 1 auto; min-width:64px; padding:8px 10px; font-size:12.5px; }
  #pendingNotifyList .prod-row, .lowstock-row{ flex-wrap:wrap; }
  #pendingNotifyList .prod-row .btn{ width:100%; margin-top:6px; }
  .lowstock-row .nm{ min-width:0; overflow-wrap:break-word; }
  .card h2{ line-height:1.3; }
  .topbar-right{ gap:8px; }
  .kpi-strip{ width:100%; }
  .chartwrap{ gap:5px; }
  .barcol .lbl{ font-size:10px; }
  .backup-status-box{ width:100%; }
  #toastHost{ max-width:calc(100% - 24px); }
}

@supports (padding: max(0px)){
  body{ padding-bottom: env(safe-area-inset-bottom); }
  #toastHost{ bottom: max(20px, env(safe-area-inset-bottom)); }
}


/* ---- id="bp-mobile-final-fix" ---- */

/* BabyPlus — final mobile layout fix
   লক্ষ্য: মোবাইলে পুরো পেজের horizontal overflow বন্ধ করা।
   ডেস্কটপ/প্রিন্ট/JS functionality অপরিবর্তিত রাখা হয়েছে। */

/* Never let a child element force the document wider than the viewport */
html, body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* [FIX] আগে html/body-এর উপর সরাসরি overflow-x:hidden বসানো ছিল।
   এতে ব্রাউজার নিয়ম অনুযায়ী body নিজেই একটা নতুন "স্ক্রল কনটেইনার" হয়ে যায়
   (overflow-y নিজে থেকে auto হিসেবে গণনা হয়) — এর ফলেই .sidebar-এর
   position:sticky ঠিকভাবে কাজ করছিল না এবং স্ক্রল করলে সাইডবার হারিয়ে
   ফাঁকা জায়গা দেখাচ্ছিল। এখন horizontal overflow আটকানো হচ্ছে #appScreen-এ
   (body-এর বদলে), তাতে sticky ঠিকমতো কাজ করে আর পেজ চওড়া হওয়া বন্ধও থাকে। */
#appScreen{
  overflow-x: hidden;
}

#appScreen, #loginScreen, .container,
.topbar, .tabbar, .tab-panel, .card,
.grid-2, .grid-3, .grid-4,
.grid-summary, .filter-card, .filter-row,
.table-responsive, .table-wrap {
  max-width: 100%;
  min-width: 0;
}

/* Grid/flex children must be allowed to shrink */
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.topbar > *, .brand > *, .topbar-right > *,
.prod-row > *, .filter-row > * {
  min-width: 0;
}

/* Inputs/text must not create a wider layout */
input, select, textarea, button {
  max-width: 100%;
}

/* Keep tables usable without making the whole page wider.
   The table itself may scroll inside its own wrapper when there are many columns. */
.table-responsive, .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-responsive > table, .table-wrap > table {
  margin: 0;
}

/* Cart is compact enough to fit most phones; if needed, only the table scrolls. */
.cart-table {
  min-width: 560px;
}

/* Orders/report tables have many columns, so preserve every column but isolate
   horizontal scrolling to the table area instead of the entire page. */
.sales-table {
  min-width: 760px;
}

/* Prevent long generated/user text from expanding cards */
td, th, .prod-result-item, .section-note, .log-item,
.inv-row, .sticker-body, .sticker-header {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile-only refinements */
@media (max-width: 640px) {
  .container {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar {
    width: 100%;
  }

  .topbar-right {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .topbar-right .today-pill {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-right .btn {
    width: 100%;
    min-width: 0;
  }

  .tabbar {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
  }

  .tabbtn {
    flex: 0 0 auto;
  }

  .card {
    width: 100%;
    max-width: 100%;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    width: 100%;
    max-width: 100%;
  }

  .grid-summary {
    width: 100%;
    max-width: 100%;
  }

  /* Don't let action rows or badges stretch the viewport */
  .prod-actions,
  .backup-actions,
  .kpi-strip {
    max-width: 100%;
  }

  /* Horizontal scrolling is available with one-finger swipe only inside tables. */
  .table-responsive::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar {
    height: 7px;
  }

  .table-responsive,
  .table-wrap {
    scrollbar-width: thin;
  }
}

@media (max-width: 380px) {
  .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .sales-table {
    min-width: 720px;
  }

  .cart-table {
    min-width: 520px;
  }
}


/* ============================================================
   [FIX v7.8.2] চূড়ান্ত স্ক্রল ফিক্স
   সমস্যা: লগইনের পর কার্ড/গ্রিড/টেবিলের ভিতরের কোনো এলিমেন্ট পুরো পেজের চেয়ে
   চওড়া হয়ে গিয়ে পুরো ডকুমেন্টকে ভিউপোর্টের বাইরে ঠেলে দিচ্ছিল — এর ফলে ব্রাউজার
   পুরো পেজটাকে জোর করে জুম-আউট/আটকে রাখছিল, তাই মোবাইলে পিঞ্চ-জুম আর ডেস্কটপে
   মাউস হুইল স্ক্রল স্বাভাবিকভাবে কাজ করছিল না।

   সমাধান: #appScreen এর ভিতরের প্রতিটা এলিমেন্টের জন্য min-width:0 বাধ্যতামূলক
   করে দেওয়া হলো — এতে কোনো টেবিল/কার্ড আর পুরো পেজকে চওড়া করতে পারবে না
   (টেবিল দরকার হলে শুধু তার নিজের .table-responsive বক্সের ভিতরে পাশে স্ক্রল
   হবে, পুরো পেজ প্রভাবিত হবে না)। ডিজাইন/রঙ/লেআউট অপরিবর্তিত আছে।

   [FIX v7.9] এখানে আগে html/body এর উপর overflow-y:auto!important এবং
   touch-action:pan-y!important জোর করে বসানো ছিল — এই দুইটাই ছিল আসল কারণ
   যার জন্য ডেস্কটপে সাধারণ জায়গায় মাউস হুইল ও মোবাইলে টাচ স্ক্রল কাজ করছিল না
   (শুধু নেস্টেড লিস্ট বা সরাসরি স্ক্রলবারে হুইল ধরলে কাজ করতো)। পুরনো (ঠিকমতো
   কাজ করা) ভার্সনে html/body এর উপর এই ধরনের কোনো জোরপূর্বক overflow/touch-action
   ছিল না — শুধু ব্রাউজারের স্বাভাবিক (ডিফল্ট) স্ক্রল আচরণ কাজ করতো। তাই এই
   ব্লকটা সরিয়ে ডিফল্ট স্ক্রল আচরণ ফিরিয়ে আনা হলো। min-width:0 ফিক্স (নিচে)
   অপরিবর্তিত রাখা হয়েছে, কারণ ওটা horizontal overflow/layout সমস্যার সমাধান,
   scroll ব্লক করার সাথে এর কোনো সম্পর্ক নেই। */

#appScreen, #appScreen *{
  min-width: 0;
}

#appScreen .grid-2, #appScreen .grid-3, #appScreen .grid-4,
#appScreen .topbar, #appScreen .tabbar, #appScreen .card,
#appScreen .grid-summary, #appScreen .kpi-strip{
  max-width: 100%;
}

.table-responsive, .table-wrap{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* আইকন/বাটনের ভিতরের টেক্সট যাতে না ভেঙে অদ্ভুত দেখায়, তার জন্য ন্যূনতম প্রস্থ রাখা হলো */
#appScreen .tabbtn, #appScreen .btn{ min-width: max-content; }


/* ============================================================
   [NEW v7.8.2] লগইন/ডাটা লোডিং ওভারলে
   লগইনের পর ড্যাশবোর্ডের ডাটা (products/sales/expenses/settings) সার্ভার
   থেকে আসতে কিছুটা সময় লাগে — এতদিন এই সময়টায় স্ক্রিনে কোনো ভিজ্যুয়াল
   ইন্ডিকেশন ছিল না, তাই ইউজার বুঝতে পারতো না লোড হচ্ছে নাকি আটকে গেছে।
   এই ব্লকটা নতুন — বিদ্যমান কোনো স্টাইল/সেকশন পরিবর্তন করা হয়নি।
   ============================================================ */
.loading-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:100000;
  width:100%; height:100%;
  background:rgba(238,240,244,0.96);
  display:none; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.loading-overlay.show{ display:flex; }
.loading-box{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  background:#fff; padding:32px 36px; border-radius:var(--radius-lg, 16px);
  box-shadow:var(--shadow-pop, 0 10px 28px rgba(0,0,0,0.08));
  border:1px solid var(--line, #D1D5DB); max-width:86vw;
}
.loading-spinner-big{
  width:44px; height:44px; border-radius:50%;
  border:4px solid #E5E7EB; border-top:4px solid var(--coral, #2563EB);
  animation:spin 0.8s linear infinite;
}
.loading-text{
  font-family:'Hind Siliguri','Segoe UI',Arial,sans-serif;
  font-weight:700; font-size:14.5px; color:var(--ink, #1F2937); text-align:center;
}
@media(max-width:480px){
  .loading-box{ padding:24px 22px; }
  .loading-text{ font-size:13.5px; }
}


/* ============================================================
   [FIX v7.8.3] মোবাইলে অর্ডার/সেলস টেবিল "অক্ষর-বাই-অক্ষর" ভেঙে যাওয়া সমস্যা সমাধান
   ============================================================
   কারণ কী ছিল:
   উপরের v7.8.2 ফিক্সে "#appScreen, #appScreen * { min-width: 0; }" লেখা
   একটা নিয়ম বসানো হয়েছিল। এটা একটা ID সিলেক্টর (#appScreen) ব্যবহার করায়
   এর প্রায়োরিটি (specificity) .sales-table{min-width:760px} এবং
   .cart-table{min-width:560px} — এই ক্লাস-ভিত্তিক নিয়মগুলোর চেয়ে বেশি ছিল।
   ফলে অর্ডার টেবিল/কার্ট টেবিল তাদের নিজস্ব ন্যূনতম প্রস্থ হারিয়ে ফেলছিল
   এবং জোর করে ফোনের ছোট স্ক্রিনের ভেতরেই আটকে যাচ্ছিল। এত কম জায়গায়
   ৮টা কলাম বসাতে গিয়ে প্রতিটা কলাম মাত্র কয়েক পিক্সেল চওড়া হয়ে যাচ্ছিল,
   আর তার উপর সাধারণ "overflow-wrap:anywhere" নিয়মের কারণে লেখা এক
   একটা অক্ষর করে নিচে নিচে নেমে ভয়াবহ লম্বা ও অগোছালো দেখাচ্ছিল
   (স্ক্রিনশটে যেটা দেখা গিয়েছিল)।

   কী পরিবর্তন করা হলো (শুধু ডিজাইন/লেআউট — কোনো স্ক্রল আচরণ বা
   ডাটা/জেএস ফাংশনালিটি স্পর্শ করা হয়নি):
   ১) অর্ডার ও কার্ট টেবিলের আসল min-width ফিরিয়ে আনা হয়েছে, যাতে এই
      দুইটা টেবিল তাদের নিজের .table-responsive/.table-wrap বক্সের ভেতরে
      স্বাভাবিকভাবে পাশে (horizontal) স্ক্রল করতে পারে — html/body বা
      পুরো পেজ স্ক্রল করার কোনো নিয়ম এখানে বদলানো হয়নি, শুধু টেবিলের
      ভেতরের লেআউট ঠিক করা হয়েছে।
   ২) আইডি/তারিখ, টাকার অঙ্ক ইত্যাদি ছোট-কিন্তু-গুরুত্বপূর্ণ কলামগুলোকে
      এক লাইনে (nowrap) রাখা হয়েছে, আর ঠিকানা/আইটেমের মতো লম্বা লেখার
      কলামগুলো স্বাভাবিক শব্দ-ভিত্তিক wrap-এই রাখা হয়েছে (অক্ষর ভেঙে
      একটার নিচে একটা যাবে না)।
   ৩) অর্ডার তালিকার একশন কলামের বাটনগুলো (ইনভয়েস/এডিট/সেন্ড/ডেলিভার্ড/
      WhatsApp/SMS/ডিলিট) সুন্দরভাবে একটার নিচে একটা, সমান চওড়া করে
      সাজানো হয়েছে যাতে মোবাইলে কোনো বাটন কাটা বা গাদাগাদি দেখা না যায়।
      এখানে কোনো onclick/ফাংশনালিটি স্পর্শ করা হয়নি — শুধু ভিজ্যুয়াল
      স্টাইল যোগ করা হয়েছে।
   ============================================================ */

/* ১) আসল টেবিল প্রস্থ ফিরিয়ে আনা — যাতে কলামগুলো ছোট স্ক্রিনে জোর করে
      চেপে না গিয়ে টেবিলের নিজস্ব বক্সের ভেতরে পাশে স্ক্রল করে */
.sales-table{ min-width:760px !important; }
.cart-table{ min-width:560px !important; }

@media (max-width:380px){
  .sales-table{ min-width:720px !important; }
  .cart-table{ min-width:520px !important; }
}

/* ২) কলামভিত্তিক wrap আচরণ ঠিক করা — অক্ষর-বাই-অক্ষর ভাঙা বন্ধ */
.sales-table td, .sales-table th{
  overflow-wrap:normal;
  word-break:normal;
  white-space:normal;
}
/* অর্ডার তালিকার কলাম: ১-আইডি/তারিখ, ৫-মোট বিক্রি(COD), ৬-নিট লাভ — এইগুলো
   সংখ্যা-নির্ভর ছোট মান, তাই এক লাইনেই রাখা ভালো দেখায় */
#tab-orders .sales-table td:nth-child(1),
#tab-orders .sales-table th:nth-child(1),
#tab-orders .sales-table td:nth-child(5),
#tab-orders .sales-table th:nth-child(5),
#tab-orders .sales-table td:nth-child(6),
#tab-orders .sales-table th:nth-child(6){
  white-space:nowrap;
}
/* কাস্টমার/ঠিকানা/আইটেম/কুরিয়ার-চার্জ কলাম লম্বা লেখা হতে পারে — শব্দ-ভিত্তিক wrap */
#tab-orders .sales-table td:nth-child(2),
#tab-orders .sales-table td:nth-child(3),
#tab-orders .sales-table td:nth-child(4),
#tab-orders .sales-table td:nth-child(7){
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}

.cart-table td, .cart-table th{
  overflow-wrap:normal;
  word-break:normal;
  white-space:nowrap;
}
.cart-table td:first-child{
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}

/* ৩) অর্ডার তালিকার একশন কলামের বাটনগুলো সুন্দরভাবে সাজানো */
#tab-orders .sales-table td:last-child{
  min-width:150px;
}
#tab-orders .sales-table td:last-child > *{
  display:block;
  width:100%;
  margin-bottom:6px;
  text-align:center;
  box-sizing:border-box;
}
#tab-orders .sales-table td:last-child > *:last-child{
  margin-bottom:0;
}

/* সাধারণ ভিজ্যুয়াল পলিশ — শুধু চেহারা, কোনো স্ক্রল/লজিক বদল নেই */
@media (max-width:640px){
  .sales-table th, .sales-table td,
  .cart-table th, .cart-table td{
    padding:9px 10px;
  }
  .status{ white-space:nowrap; }
  .stat{ border-radius:10px; }
  .lowstock-row{ border-radius:10px; }
}


/* ============================================================
   [NEW v8.0] Bulk Print & Skip Print Options Styling
   ============================================================ */
.skip-print-box {
  background: #EFF6FF;
  border: 1.5px dashed #2563EB;
  border-radius: 8px;
  padding: 12px;
  margin-top: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.skip-print-box label {
  color: #1D4ED8;
  font-weight: 700;
  cursor: pointer;
  margin: 0;
}

@media print {
  /* বাল্ক প্রিন্টের জন্য A4 পেজ ও লেবেল গ্রিড ফরম্যাট */
  .print-grid-10 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2mm 3mm;
    width: 206mm !important;
    height: 289mm !important;
    page-break-after: always;
    break-after: page;
  }
  .print-grid-10:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }
}

@media print {
  .print-grid-10 {
    page-break-after: always !important;
    break-after: page !important;
  }
  .print-grid-10:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
}


@media print {
  /* পেজ ব্রেক এবং সঠিক উচ্চতা নিশ্চিত করার জন্য */
  body, html {
    width: 210mm !important;
    height: auto !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #printArea {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .print-grid-10 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(5, 1fr) !important;
    gap: 2mm 3mm !important;
    width: 206mm !important;
    height: 289mm !important;
    page-break-after: always !important;
    break-after: page !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .print-grid-10:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  @page {
    size: A4 portrait;
    margin: 4mm;
  }
}


/* ============================================================
   [NEW v8.3] Return, Exchange & Marketing Campaign Styling
   ============================================================ */
.campaign-box { background: #F0FDF4; border: 1.5px dashed #10B981; border-radius: var(--radius-md); padding: 20px; margin-bottom: 18px; }
.return-badge { background: #FEF2F2; color: #991B1B; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-block; }
.exchange-badge { background: #EFF6FF; color: #1D4ED8; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-block; }

/* অর্ডার টেবিল অ্যাকশন ড্রপডাউন স্টাইল */
.order-action-dropdown {
  position: relative;
  display: inline-block;
}
.order-action-select {
  padding: 6px 10px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.order-action-select:focus {
  border-color: var(--coral);
}

.print-options-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 10px;
}
.print-option-card {
  flex: 1 1 42%;
  min-width: 130px;
  background-color: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 18px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.print-option-card.active {
  background-color: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.print-option-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.print-card-icon {
  font-size: 24px;
  margin-bottom: 8px;
}
.print-card-title {
  font-size: 14px;
  font-weight: 700;
}
/* ============================================================
   BabyPlus POS — Sidebar Dashboard Redesign (v7.9)
   নতুন সাইডবার লেআউট + কালারফুল ড্যাশবোর্ড (রেফারেন্স ছবির সাথে মিল রেখে)
   ============================================================ */

.app-shell{ display:flex; align-items:flex-start; min-height:100vh; gap:0; }

/* ---------- SIDEBAR ---------- */
/* [FIX] position:sticky দুইবার চেষ্টা করেও ডেস্কটপে ঠিকভাবে কাজ করছিল না
   (কারণ যাচাই করা কঠিন — ব্রাউজার/হোস্টিং নির্দিষ্ট কোনো কারণ থাকতে পারে)।
   তাই মোবাইলে যেই position:fixed পদ্ধতি এমনিতেই নিখুঁতভাবে কাজ করছে
   (নিচে @media(max-width:1080px)-এ দেখুন), ডেস্কটপেও ঠিক সেই একই,
   ভরসাযোগ্য পদ্ধতি ব্যবহার করা হলো — sticky-নির্ভরতা সম্পূর্ণ বাদ দেওয়া হলো।
   .main-area-এ margin-left:250px দিয়ে সাইডবারের জায়গা রাখা হয়েছে। */
.sidebar{
  width:250px; flex:none; height:100vh; position:fixed; top:0; left:0;
  background:linear-gradient(180deg,#0B1739 0%, #101E45 55%, #0B1739 100%);
  color:#E2E8F0; display:flex; flex-direction:column; padding:18px 14px 16px;
  box-shadow:2px 0 18px rgba(11,23,57,0.18); z-index:600; overflow-y:auto;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:6px 6px 18px; }
.sidebar-brand .mark{
  width:46px; height:46px; border-radius:14px; flex:none; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.25);
}
.sidebar-brand .mark img{ width:100%; height:100%; object-fit:cover; }
.sidebar-brand-text .name{ display:flex; align-items:center; gap:7px; font-family:'Baloo Da 2','Hind Siliguri',sans-serif; font-weight:800; font-size:18px; color:#fff; }
.sidebar-brand-text .name .pos-chip{
  font-size:10.5px; background:#2563EB; color:#fff; padding:2px 8px; border-radius:6px; font-weight:800; letter-spacing:.5px;
}
.sidebar-brand-text .tagline{ font-size:10.5px; color:#8FA0C9; font-weight:700; margin-top:2px; letter-spacing:.2px; }

.sidebar-nav{ display:flex; flex-direction:column; gap:4px; margin-top:6px; flex:1; overflow-y:auto; padding-right:2px; }
.sidebar-nav::-webkit-scrollbar{ width:5px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:8px; }

.sidebar-nav .tabbtn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; justify-content:flex-start;
  background:transparent; color:#B9C4E0; border:none; padding:11px 14px; border-radius:11px;
  font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; transition:.15s; white-space:normal;
}
.sidebar-nav .tabbtn .icon-svg{ width:19px; height:19px; flex:none; stroke:#B9C4E0; fill:none; stroke-width:2; }
.sidebar-nav .tabbtn:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.sidebar-nav .tabbtn:hover .icon-svg{ stroke:#fff; }
.sidebar-nav .tabbtn.active{ background:#2563EB; color:#fff; box-shadow:0 6px 16px rgba(37,99,235,0.35); }
.sidebar-nav .tabbtn.active .icon-svg{ stroke:#fff; }
.sidebar-nav .tabbtn.tabbtn-special{ background:rgba(255,255,255,0.05); color:#93C5FD; }
.sidebar-nav .tabbtn.tabbtn-admin{ background:rgba(129,140,248,0.15); color:#C7D2FE; margin-top:4px; }

.sidebar-foot{
  margin-top:14px; border-top:1px solid rgba(255,255,255,0.08); padding-top:16px; text-align:center;
}
.sidebar-foot .mascot{
  width:64px; height:64px; margin:0 auto 8px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 6px 16px rgba(0,0,0,0.25); overflow:hidden;
}
.sidebar-foot .mascot img{ width:100%; height:100%; object-fit:cover; }
.sidebar-foot .foot-title{ font-family:'Baloo Da 2'; font-weight:800; color:#fff; font-size:15px; }
.sidebar-foot .foot-sub{ font-size:11.5px; color:#8FA0C9; font-weight:700; margin-top:2px; }

/* ---------- MAIN AREA / TOP HEADER ---------- */
.main-area{ flex:1; min-width:0; background:var(--bg); margin-left:250px; }
.main-area .container{ max-width:1500px; }

.topheader{
  display:flex; align-items:center; gap:14px; background:var(--surface); padding:12px 16px;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); border:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap;
}
.header-search{
  flex:1; min-width:180px; display:flex; align-items:center; gap:8px; background:#F3F5F9; border:1px solid var(--line);
  border-radius:999px; padding:9px 16px;
}
.header-search svg{ width:16px; height:16px; stroke:#94A3B8; fill:none; stroke-width:2; flex:none; }
.header-search input{ border:none; background:transparent; padding:0; font-size:14px; font-weight:600; outline:none; }
.topheader-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.header-date-pill{
  display:flex; align-items:center; gap:7px; background:#F3F5F9; color:var(--ink); font-size:13px; font-weight:700;
  padding:9px 14px; border-radius:999px; border:1px solid var(--line); white-space:nowrap;
}
.header-icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#F3F5F9; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:16px; transition:.15s; position:relative;
}
.header-icon-btn:hover{ background:#E5E9F2; }
.header-profile{ display:flex; align-items:center; gap:9px; padding-left:4px; }
.header-avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#2563EB,#1D4ED8); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex:none;
}
.header-profile-text{ line-height:1.25; }
.header-username{ font-size:13.5px; font-weight:800; color:var(--ink); }
.header-role{ font-size:11.5px; font-weight:700; color:var(--muted); }

/* ---------- WELCOME BANNER ---------- */
.welcome-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(120deg,#DCEBFF 0%, #EAF2FF 55%, #F3E8FF 100%);
  border:1px solid #DCE8FB; border-radius:var(--radius-lg); padding:20px 24px; margin-bottom:18px; position:relative; overflow:hidden;
}
.welcome-banner .wtext h2{ margin:0 0 4px; font-size:22px; font-weight:800; color:#1E3A8A; display:flex; align-items:center; gap:8px; }
.welcome-banner .wtext p{ margin:0; font-size:13.5px; font-weight:700; color:#3B5788; }
.welcome-banner .wmascot{ font-size:52px; flex:none; filter:drop-shadow(0 6px 10px rgba(30,58,138,0.18)); }
.welcome-status{
  display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:10px 16px;
  box-shadow:0 6px 16px rgba(30,58,138,0.10); flex:none;
}
.welcome-status .dot{ width:10px; height:10px; border-radius:50%; background:#10B981; box-shadow:0 0 0 4px rgba(16,185,129,0.18); flex:none; }
.welcome-status .wtitle{ font-size:13.5px; font-weight:800; color:#065F46; }
.welcome-status .wsub{ font-size:11px; font-weight:700; color:var(--muted); }
.welcome-status .wtime{ margin-left:8px; padding-left:12px; border-left:1px solid var(--line); font-size:13px; font-weight:800; color:var(--ink); white-space:nowrap; }

/* ---------- STAT CARDS (colorful gradient) ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:18px; }
.stat-card{
  position:relative; overflow:hidden; border-radius:16px; padding:18px 18px 16px; color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,0.10);
}
.stat-card.g-blue{ background:linear-gradient(135deg,#3B82F6,#1D4ED8); }
.stat-card.g-purple{ background:linear-gradient(135deg,#A78BFA,#7C3AED); }
.stat-card.g-green{ background:linear-gradient(135deg,#34D399,#059669); }
.stat-card.g-amber{ background:linear-gradient(135deg,#FBBF24,#D97706); }
.stat-card.g-pink{ background:linear-gradient(135deg,#FB7185,#E11D48); }
.stat-card .icon-badge{
  width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,0.22); display:flex; align-items:center;
  justify-content:center; font-size:18px; margin-bottom:12px;
}
.stat-card .lbl{ font-size:12.5px; font-weight:700; opacity:.95; }
.stat-card .val{ font-size:23px; font-weight:800; font-family:'Baloo Da 2'; margin-top:4px; }
.stat-card .sub{ font-size:11.5px; font-weight:700; opacity:.9; margin-top:5px; display:flex; align-items:center; gap:4px; }
.stat-card .wave{ position:absolute; left:0; right:0; bottom:-2px; height:34px; opacity:.35; }
.stat-card.pill-mode .val{ font-size:26px; }

/* ---------- CHART CARD ---------- */
.dash-card{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); border:1px solid var(--line); padding:18px 20px; margin-bottom:18px; }
.dash-card .dash-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.dash-card .dash-card-head h2{ margin:0; font-size:16.5px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; }
.dash-card .dash-card-head h2 .num{
  width:30px; height:30px; border-radius:9px; background:#EFF6FF; color:#1D4ED8; display:flex; align-items:center;
  justify-content:center; font-size:15px;
}
.dash-card .see-all{ font-size:12.5px; font-weight:800; color:#2563EB; text-decoration:none; cursor:pointer; background:none; border:none; }

.chartwrap.newchart{ height:190px; align-items:flex-end; gap:14px; padding:10px 6px 0; }
.chartwrap.newchart .barcol .bar{ background:linear-gradient(180deg,#60A5FA,#2563EB); border-radius:8px 8px 3px 3px; max-width:38px; }
.chartwrap.newchart .barcol .lbl{ font-size:12px; font-weight:800; color:var(--muted); }

/* ---------- LOW STOCK ---------- */
#lowStockList .lowstock-row{
  display:flex; align-items:center; gap:12px; background:#FFF1F2; border:1px solid #FECDD3; border-radius:13px;
  padding:10px 12px; margin-bottom:10px;
}
#lowStockList .lowstock-row.crit{ background:#FEE2E2; border-color:#FCA5A5; }
#lowStockList .lowstock-icon{
  width:40px; height:40px; border-radius:11px; background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:19px; flex:none; box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
#lowStockList .lowstock-row .nm{ font-weight:700; font-size:13.5px; color:#1F2937; flex:1; line-height:1.35; }
#lowStockList .lowstock-row .qty{
  font-size:11.5px; font-weight:800; color:#fff; background:#E11D48; padding:4px 10px; border-radius:999px; white-space:nowrap; flex:none;
}

/* ---------- RECENT ORDERS ---------- */
.recent-table{ width:100%; border-collapse:collapse; }
.recent-table th{ text-align:left; font-size:12px; color:var(--muted); font-weight:800; padding:8px 10px; border-bottom:1.5px solid var(--line); white-space:nowrap; }
.recent-table td{ padding:10px 10px; border-bottom:1px solid #F1F3F7; font-size:13.5px; vertical-align:middle; }
.recent-table tr:last-child td{ border-bottom:none; }
.recent-prod{ display:flex; align-items:center; gap:10px; }
.recent-prod .ic{ width:34px; height:34px; border-radius:9px; background:#EFF6FF; display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; }

@media(max-width:1080px){
  .sidebar{ position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); transition:.2s; width:230px; }
  .sidebar.open{ transform:translateX(0); }
  .main-area{ width:100%; margin-left:0; }
}
@media(max-width:640px){
  .app-shell{ flex-direction:column; }
  .sidebar{ position:relative; width:100%; min-height:auto; transform:none; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px; margin-left:0; }
  .sidebar-brand{ padding:2px 6px; flex:1; }
  .sidebar-nav{ flex-direction:row; overflow-x:auto; overflow-y:visible; width:100%; order:3; }
  .sidebar-nav .tabbtn{ white-space:nowrap; }
  .sidebar-foot{ display:none; }
  .topheader{ padding:10px 12px; }
  .header-search{ order:3; flex-basis:100%; }
  .welcome-banner{ padding:16px; }
  .welcome-banner .wtext h2{ font-size:18px; }
}

/* প্রিন্টে ভাসমান বাটন/ওভারলে লুকানো (A4/লেবেলে গোল বাটন আসত) */
@media print {
  .bp-io-fab, #bpFxBg, #bpCfOv, .bp-ed-ov { display: none !important; }
}

/* ===== নতুন BabyPlus লোগো (সাইডবার + মোবাইল হেডার) ===== */
.sidebar-brand.sb-logo{ display:block; padding:2px 4px 16px; text-align:center; }
.sb-logo-img img{ width:100%; max-width:200px; height:auto; display:block; margin:0 auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.sb-tagline{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; font-size:13.5px; font-weight:700; color:#DCE6FF; white-space:nowrap; letter-spacing:.2px; }
.sb-tagline::before,.sb-tagline::after{ content:''; width:14px; height:3px; border-radius:3px; flex:none; }
.sb-tagline::before{ background:#FF4F8B; }
.sb-tagline::after{ background:#38BDF8; }
.sb-gap{ display:inline-block; width:3px; }
.bp-mh-logo{ height:44px; width:auto; display:block; flex:none; }
.bp-mh-brand .bp-chip{ font-family:'Baloo Da 2',sans-serif; font-size:11px; font-weight:800; letter-spacing:.5px; color:#1E3A8A; border:2px solid #1E3A8A; border-radius:9px; padding:0 7px; line-height:18px; flex:none; }

/* ==========================================================
   BabyPlus POS — dashboard reference UI alignment (2026-10)
   Dashboard-only visual overrides; no data / API logic changed.
   ========================================================== */
#tab-dashboard{--dash-border:#e5eaf2;--dash-muted:#64748b;--dash-ink:#0f172a;}
#tab-dashboard .welcome-banner{
  background:linear-gradient(115deg,#ffffff 0%,#fbfdff 62%,#f4f7ff 100%);
  border:1px solid #e4eaf4;border-radius:18px;padding:22px 24px;
  box-shadow:0 3px 12px rgba(15,23,42,.035);animation:bpDashEnter .45s ease both;
}
#tab-dashboard .welcome-banner:after{content:"";position:absolute;right:-46px;top:-66px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.10),rgba(59,130,246,.025) 62%,transparent 70%);pointer-events:none}
#tab-dashboard .welcome-banner .wtext h2{font-size:21px;color:#0f172a;letter-spacing:-.35px}
#tab-dashboard .welcome-banner .wtext p{font-size:12.5px;color:#64748b;font-weight:500}
#tab-dashboard .welcome-banner .wmascot{font-size:43px;opacity:.9}
#tab-dashboard .welcome-status{border:1px solid #e6ebf3;border-radius:13px;padding:9px 12px;box-shadow:0 2px 5px rgba(15,23,42,.035)}
#tab-dashboard .welcome-status .wtitle{font-size:12px;color:#047857}
#tab-dashboard .welcome-status .wsub{font-size:10.5px}
#tab-dashboard .stat-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:18px}
#tab-dashboard .stat-card{
  color:#0f172a;background:#fff!important;border:1px solid #e5eaf2;border-radius:16px;
  padding:16px 16px 14px;box-shadow:0 3px 10px rgba(15,23,42,.035);min-width:0;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:bpDashEnter .45s ease both;
}
#tab-dashboard .stat-card:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(15,23,42,.075);border-color:#d4ddeb}
#tab-dashboard .stat-card .icon-badge{width:35px;height:35px;border-radius:11px;margin:0 0 12px;background:#eff6ff;color:#2563eb;font-size:17px;border:1px solid #dbeafe}
#tab-dashboard .stat-card.g-purple .icon-badge{background:#f5f3ff;color:#7c3aed;border-color:#ede9fe}
#tab-dashboard .stat-card.g-green .icon-badge{background:#ecfdf5;color:#059669;border-color:#d1fae5}
#tab-dashboard .stat-card.g-amber .icon-badge{background:#fffbeb;color:#d97706;border-color:#fef3c7}
#tab-dashboard .stat-card.g-pink .icon-badge{background:#fff1f2;color:#e11d48;border-color:#ffe4e6}
#tab-dashboard .stat-card .lbl{font-size:11.5px;line-height:1.55;color:#64748b;opacity:1;font-weight:600;min-height:34px}
#tab-dashboard .stat-card .val{font-family:'Hind Siliguri','Baloo Da 2',sans-serif;font-size:23px;line-height:1.25;font-weight:800;letter-spacing:-.3px;color:#0f172a;margin-top:5px;overflow-wrap:anywhere}
#tab-dashboard .stat-card .sub{font-size:10.5px;line-height:1.5;color:#059669;opacity:1;font-weight:700;flex-wrap:wrap}
#tab-dashboard .stat-card.g-amber .sub{color:#b45309}
#tab-dashboard .stat-card.g-pink .sub{color:#64748b}
#tab-dashboard .grid-2{gap:16px;margin-bottom:16px}
#tab-dashboard .dash-card{background:#fff;border:1px solid #e5eaf2;border-radius:16px;padding:18px 19px;margin-bottom:16px;box-shadow:0 3px 12px rgba(15,23,42,.035);transition:box-shadow .2s ease}
#tab-dashboard .dash-card:hover{box-shadow:0 6px 18px rgba(15,23,42,.05)}
#tab-dashboard .dash-card .dash-card-head{margin-bottom:15px}
#tab-dashboard .dash-card .dash-card-head h2{font-size:14px;font-weight:800;color:#1e293b;gap:9px}
#tab-dashboard .dash-card .dash-card-head h2 .num{width:31px;height:31px;border-radius:10px;background:#f1f5f9;color:#475569;font-size:15px}
#tab-dashboard .dash-card .see-all{font-size:11.5px;border-radius:8px;padding:6px 9px;background:#f8fafc;border:1px solid #e8edf5;color:#475569}
#tab-dashboard .dash-card .see-all:hover{background:#eff6ff;border-color:#dbeafe;color:#1d4ed8}
#tab-dashboard .chartwrap.newchart{height:205px;gap:12px;padding:10px 8px 0}
#tab-dashboard .chartwrap.newchart .barcol .bar{background:linear-gradient(180deg,#60a5fa,#4f46e5);border-radius:7px 7px 3px 3px;box-shadow:0 3px 8px rgba(79,70,229,.12);transition:filter .2s,transform .2s}
#tab-dashboard .chartwrap.newchart .barcol:hover .bar{filter:saturate(1.2);transform:scaleX(1.04)}
#tab-dashboard .chartwrap.newchart .barcol .lbl{font-size:10.5px;color:#64748b;font-weight:700}
#tab-dashboard #lowStockList .lowstock-row{background:#fff;border:1px solid #eef0f5;border-radius:12px;padding:9px 10px;gap:10px;margin-bottom:8px}
#tab-dashboard #lowStockList .lowstock-row.crit{background:#fff7f7;border-color:#fee2e2}
#tab-dashboard #lowStockList .lowstock-icon{width:36px;height:36px;border-radius:10px;background:#fff1f2;color:#e11d48;box-shadow:none;border:1px solid #ffe4e6}
#tab-dashboard #lowStockList .lowstock-row .nm{font-size:12.5px;color:#334155}
#tab-dashboard #lowStockList .lowstock-row .qty{font-size:10.5px;padding:4px 8px;background:#fff1f2;color:#be123c;border:1px solid #ffe4e6}
#tab-dashboard .recent-table th{font-size:10.5px;text-transform:none;color:#64748b;background:#f8fafc;padding:10px;border-bottom:1px solid #e9edf4}
#tab-dashboard .recent-table th:first-child{border-radius:8px 0 0 8px}
#tab-dashboard .recent-table td{font-size:12px;color:#334155;padding:11px 10px;border-bottom:1px solid #f1f4f8}
#tab-dashboard .recent-table tbody tr:hover{background:#fafcff}
#tab-dashboard .log-container{border-radius:12px;background:#f8fafc;border:1px solid #edf1f7}
@keyframes bpDashEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1200px){#tab-dashboard .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
 #tab-dashboard .welcome-banner{padding:16px;border-radius:15px;gap:12px}
 #tab-dashboard .welcome-banner .wtext h2{font-size:18px}
 #tab-dashboard .welcome-banner .wtext p{font-size:11.5px;line-height:1.6}
 #tab-dashboard .welcome-banner .wmascot{font-size:34px}
 #tab-dashboard .welcome-status{width:100%;box-sizing:border-box;justify-content:flex-start}
 #tab-dashboard .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #tab-dashboard .stat-card{padding:13px;border-radius:14px}
 #tab-dashboard .stat-card .icon-badge{width:31px;height:31px;font-size:15px;margin-bottom:8px}
 #tab-dashboard .stat-card .lbl{font-size:10.5px;min-height:30px}
 #tab-dashboard .stat-card .val{font-size:20px}
 #tab-dashboard .stat-card .sub{font-size:10px}
 #tab-dashboard .dash-card{padding:14px;border-radius:14px}
 #tab-dashboard .dash-card .dash-card-head h2{font-size:13px}
 #tab-dashboard .chartwrap.newchart{height:175px;gap:6px;padding-inline:0}
 #tab-dashboard .recent-table{min-width:640px}
}
@media(prefers-reduced-motion:reduce){#tab-dashboard *,#tab-dashboard *:before,#tab-dashboard *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}