:root{
  /* Life Care brand palette - sampled from the logo
     green #01B657 (heart backdrop) | navy #1C2A89 (heart + wordmark) | red #EC1C24 (heart + cross) */
  --lime:#0BA14F;          /* primary - brand green */
  --lime-2:#13c062;
  --lime-dark:#077c3c;
  --lime-soft:#e7f7ee;
  --blue:#1C2A89;          /* secondary - brand navy */
  --blue-2:#3146c9;
  --blue-soft:#e9ebf8;
  --red:#EC1C24;           /* brand red - cross / pulse */
  --red-soft:#fdeaea;
  --ink:#16203a;
  --muted:#6b7585;
  --line:#e4e8ef;
  --bg:#f4f6fa;
  --card:#ffffff;
  --danger:#EC1C24;
  --warn:#f2a007;
  --ok:#0BA14F;
  --radius:14px;
  --shadow:0 1px 3px rgba(20,40,80,.06),0 6px 20px rgba(20,40,80,.05);
  --sidebar:248px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
svg.ic{display:inline-block;vertical-align:middle;flex:none}
.btn svg.ic{margin-top:-1px}
.page-head h1 svg.ic,.card-h h3 svg.ic{vertical-align:-3px;margin-right:2px}
.ico-badge{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;flex:none}
.ico-badge.lime{background:var(--lime-soft);color:var(--lime-dark)}
.ico-badge.blue{background:var(--blue-soft);color:var(--blue)}
.ico-badge.warn{background:#fff4e0;color:#b5730a}
.ico-badge.red{background:#fdeaea;color:var(--danger)}
.ico-badge.green{background:var(--lime-soft);color:var(--ok)}
.title-ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--lime-soft),var(--blue-soft));color:var(--blue);flex:none}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:700;letter-spacing:-.2px}
.small{font-size:12.5px}
.muted{color:var(--muted)}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);background:#fff;border-right:1px solid var(--line);
  position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:60;
  transition:transform .25s ease;
}
.brand{padding:16px 16px 14px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.brand .logo-img{
  width:46px;height:46px;object-fit:contain;flex:none;
}
.brand b{font-size:15px;line-height:1.15;display:block;color:var(--blue)}
.brand span{font-size:11px;color:var(--muted)}
.nav{padding:10px;overflow-y:auto;flex:1}
.nav .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 10px 6px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--ink);
  font-weight:500;margin-bottom:2px;transition:.15s;
}
.nav a svg.ic{opacity:.8}
.nav a.active svg.ic{opacity:1;color:var(--lime-dark)}
.nav a:hover{background:var(--lime-soft)}
.nav a.active{background:linear-gradient(90deg,var(--lime-soft),#fff);color:var(--lime-dark);font-weight:700;box-shadow:inset 3px 0 0 var(--lime)}
.nav .badge-mini{margin-left:auto;background:var(--danger);color:#fff;border-radius:20px;font-size:10px;padding:1px 7px;font-weight:700}

.main{flex:1;margin-left:var(--sidebar);display:flex;flex-direction:column;min-width:0}
.topbar{
  height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:12px;padding:0 18px;position:sticky;top:0;z-index:40;
}
.topbar .page-title{font-weight:700;font-size:16px}
.topbar .spacer{flex:1}
.hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink)}
.chip{background:var(--blue-soft);color:var(--blue);padding:5px 11px;border-radius:20px;font-size:12.5px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.chip.lime{background:var(--lime-soft);color:var(--lime-dark)}
.user-pill{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 12px;border:1px solid var(--line);border-radius:30px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--lime));color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.content{padding:20px;max-width:1280px;width:100%}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.card-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card-h h3{margin:0;font-size:15px}
.card-b{padding:18px}

/* KPI */
.kpi{padding:16px 18px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .k-ic{position:absolute;right:-6px;top:-6px;font-size:56px;opacity:.06}
.kpi .k-label{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi .k-val{font-size:24px;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.kpi .k-sub{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.a{border-top:3px solid var(--lime)}
.kpi.b{border-top:3px solid var(--blue)}
.kpi.c{border-top:3px solid var(--warn)}
.kpi.d{border-top:3px solid var(--ok)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  background:var(--blue);color:#fff;border:none;padding:9px 16px;border-radius:10px;
  font-weight:600;cursor:pointer;font-size:14px;transition:.15s;white-space:nowrap;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.lime{background:var(--lime-dark)}
.btn.green{background:var(--ok)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg)}
.btn.danger{background:var(--danger)}
.btn.warn{background:var(--warn)}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn.block{width:100%}
.btn.xl{padding:14px 20px;font-size:16px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
input,select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;
  font-family:inherit;background:#fff;color:var(--ink);transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-soft)}
.field{margin-bottom:14px}
.form-grid{display:grid;gap:14px}
.checkline{display:flex;align-items:center;gap:8px}
.checkline input{width:auto}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th,table.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfc;font-weight:700}
table.tbl tbody tr:hover,table.tbl tr:hover{background:#fafcff}
table.tbl tfoot td{font-weight:700;background:#fafbfc}

/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700}
.badge.ok{background:var(--lime-soft);color:var(--lime-dark)}
.badge.blue{background:var(--blue-soft);color:var(--blue)}
.badge.warn{background:#fff4e0;color:#b5730a}
.badge.d30,.badge.expired{background:#fdeaea;color:var(--danger)}
.badge.d60{background:#fff4e0;color:#b5730a}
.badge.d90{background:#fff9e6;color:#9a7b0a}
.badge.gray{background:#eef1f4;color:var(--muted)}
.badge.narc{background:#efe6fd;color:#7b3fe4}

/* flash */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-weight:600;display:flex;gap:10px;align-items:center}
.flash.success{background:var(--lime-soft);color:var(--lime-dark);border:1px solid #cfe6a3}
.flash.error{background:#fdeaea;color:var(--danger);border:1px solid #f5c2c4}
.flash.info{background:var(--blue-soft);color:var(--blue);border:1px solid #c9dcfa}

.page-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:20px;margin:0}
.page-head .spacer{flex:1}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.toolbar .search{flex:1;min-width:180px}

.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .big{font-size:40px;margin-bottom:8px;opacity:.4}

.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:9px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.active{color:var(--blue);border-bottom-color:var(--lime)}

hr.sep{border:none;border-top:1px solid var(--line);margin:16px 0}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(135deg,#eef6e2,#eaf1fc)}
.login-card{background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(20,40,80,.12);width:100%;max-width:400px;overflow:hidden}
.login-head{background:linear-gradient(135deg,var(--blue) 0%,#141e63 60%,var(--lime-dark) 165%);color:#fff;padding:26px;text-align:center}
.login-head .login-logo{display:block;width:210px;max-width:72%;margin:0 auto 14px;
  background:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.login-body{padding:26px}
.cred{font-size:11.5px;background:var(--bg);border-radius:8px;padding:8px 10px;margin-top:12px;color:var(--muted)}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1fr 400px;gap:16px}
.pos-cart{position:sticky;top:76px;align-self:start}
.prod-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.pick{border:1px solid var(--line);border-radius:12px;padding:11px;background:#fff;transition:.15s;position:relative;display:flex;flex-direction:column}
.pick:hover{border-color:var(--lime);box-shadow:var(--shadow)}
.pick .p-name{font-size:13px;font-weight:700;line-height:1.25;padding-right:22px}
.pick .p-sub{font-size:11px;color:var(--muted);margin-top:1px;min-height:14px}
.pick .p-meta{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.pick .p-price{color:var(--lime-dark);font-weight:800}
.pick .p-stock{font-size:10.5px}
.pick .p-add{display:flex;gap:5px;margin-top:9px}
.pick .p-view{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);background:#fff;cursor:pointer}
.pick .p-view:hover{color:var(--blue);border-color:var(--blue)}
.pick.out{opacity:.5}
.pick .oos{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--danger);background:rgba(255,255,255,.35);border-radius:12px;pointer-events:none}

.cart-line{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line)}
.cart-line .cl-name{flex:1;font-size:13px;font-weight:600;min-width:0}
.cart-line .cl-name .cl-sub{font-weight:400;color:var(--muted);font-size:11.5px}
.qty-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qty-step button{background:#fff;border:none;width:26px;height:28px;cursor:pointer;color:var(--ink);font-size:15px;display:grid;place-items:center;padding:0}
.qty-step button:hover{background:var(--lime-soft)}
.qty-step .qv{min-width:30px;text-align:center;font-weight:700;font-size:13px}
.totrow{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}
.totrow.big{font-size:20px;font-weight:800;border-top:2px solid var(--line);margin-top:6px;padding-top:10px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:#fff;border:none;padding:6px 12px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--blue);color:#fff}

.stat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(15,25,45,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;position:sticky;top:0;background:#fff}
.modal-h h3{margin:0;font-size:16px;flex:1}
.modal-h .x{cursor:pointer;color:var(--muted);width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.modal-h .x:hover{background:var(--bg)}
.modal-b{padding:20px}

/* ---------- Mobile bottom nav ---------- */
.bottom-nav{display:none}
.overlay{display:none}

@media(max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .pos{grid-template-columns:1fr}
  .pos-cart{position:static}
}
@media(max-width:860px){
  .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .overlay{display:block;position:fixed;inset:0;background:rgba(15,25,45,.4);z-index:55}
  .main{margin-left:0}
  .hamburger{display:block}
  .content{padding:14px 14px 90px}
  .g2,.g3{grid-template-columns:1fr}
  .topbar .hide-sm{display:none}

  /* app-like bottom nav */
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;
    border-top:1px solid var(--line);z-index:50;box-shadow:0 -4px 20px rgba(20,40,80,.06);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;color:var(--muted);font-size:10.5px;font-weight:600}
  .bottom-nav a .bic{font-size:19px}
  .bottom-nav a.active{color:var(--lime-dark)}
  .bottom-nav a.pos-fab{
    color:#fff;
  }
  .bottom-nav a.pos-fab .bic{
    background:linear-gradient(135deg,var(--lime),var(--blue));color:#fff;width:46px;height:46px;
    border-radius:50%;display:grid;place-items:center;margin-top:-20px;box-shadow:0 6px 16px rgba(27,75,156,.35);font-size:20px;
  }
  .bottom-nav a.pos-fab span{color:var(--lime-dark)}
}
@media(max-width:520px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .prod-pick{grid-template-columns:repeat(2,1fr)}
}

/* print (80mm receipt / labels) */
@media print{
  .no-print{display:none!important}
  body{background:#fff}
}

/* ---------- P&L statement table ---------- */
.tbl.pnl td{padding:6px 10px;font-size:13.5px;border-bottom:1px solid #f0f3f6}
.tbl.pnl tr.sec td{background:#f5f7f9;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  color:#6b7784;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl.pnl td.ind{padding-left:24px;color:#57626e}
.tbl.pnl td.neg{color:#c0392b}
.tbl.pnl tr.sub td{font-weight:700;border-top:1px solid var(--line);background:#fcfdfe}
.tbl.pnl tr.tot td{font-weight:800;font-size:14.5px;background:#eef3fb;border-top:2px solid #cfdcf2}
.tbl.pnl tr.tot.lime td{background:#f1f8e6;border-top:2px solid #d6e9b4}
.tbl.pnl tr.grand td{font-weight:900;font-size:17px;padding:12px 10px;border-top:2px solid #333;border-bottom:3px double #333}
.tbl.pnl tr.grand.pos td{background:#eaf7ee;color:#1e7a3c}
.tbl.pnl tr.grand.loss td{background:#fdecec;color:#b32d2d}
@media print{.tabs,.toolbar,.no-print{display:none!important}.card{break-inside:avoid;box-shadow:none}}

/* ---------- keyboard shortcut chips ---------- */
.kbd{display:inline-block;min-width:22px;padding:1px 6px;margin-right:3px;border:1px solid #cfd6e0;
  border-bottom-width:2px;border-radius:5px;background:#f7f9fb;font:600 11px/1.6 ui-monospace,Menlo,Consolas,monospace;
  color:#44506a;text-align:center}
.kbd-hint{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:5px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.22);color:#fff;vertical-align:1px}
.rack-tag{display:inline-flex;align-items:center;gap:2px;margin-left:5px;padding:0 5px;border-radius:4px;
  background:var(--blue-soft);color:var(--blue);font-size:10.5px;font-weight:700;vertical-align:1px}

/* ==================================================================
   PWA — connection pill, install helper, toast, busy buttons   v2.2
   ================================================================== */
.net-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--lime-soft);color:var(--lime-dark);border:1px solid #c9ecd8}
.net-pill svg{width:14px;height:14px;flex:none}
.net-pill .net-off{display:none}
.net-pill.off{background:#fdeaea;color:#b5151c;border-color:#f6c9cb}
.net-pill.off .net-on{display:none}
.net-pill.off .net-off{display:inline-flex}
.net-pill.off::after{content:"";width:7px;height:7px;border-radius:50%;background:#EC1C24;
  animation:netblink 1.3s infinite}
@keyframes netblink{50%{opacity:.2}}

/* a thin red rail across the top so an offline counter is impossible to miss */
body.is-offline .topbar{box-shadow:inset 0 3px 0 0 #EC1C24}

/* install helper modal rows */
.inst-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.inst-row:first-of-type{border-top:0}
.inst-row .inst-t{display:block;font-size:13.5px;margin-bottom:3px}
.inst-row .muted b{color:var(--ink)}
.inst-row .muted{display:block;line-height:1.55}
.inst-ic{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:var(--blue-soft);color:var(--blue)}
.inst-note{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 12px;
  border-radius:9px;background:var(--bg);border:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.55}
.inst-note svg{flex:none;margin-top:1px;color:var(--blue)}

/* toast */
.lc-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:9000;
  display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 28px));
  padding:11px 12px 11px 16px;border-radius:11px;background:var(--ink);color:#fff;
  font-size:13.5px;line-height:1.45;box-shadow:0 12px 34px rgba(22,32,58,.28);
  opacity:0;transition:opacity .18s ease,transform .18s ease}
.lc-toast.on{opacity:1;transform:translate(-50%,0)}
.lc-toast-btn{border:0;cursor:pointer;background:var(--lime);color:#fff;font-weight:700;
  font-size:12.5px;padding:7px 13px;border-radius:7px;white-space:nowrap}
.lc-toast-btn:hover{background:var(--lime-dark)}
.lc-toast-x{border:0;background:transparent;color:#9aa4bd;cursor:pointer;font-size:19px;
  line-height:1;padding:0 2px}
.lc-toast-x:hover{color:#fff}
@media (max-width:640px){
  .lc-toast{bottom:calc(var(--bottomnav-h,64px) + 14px)}
}

/* a submitted button must look busy, not clickable */
.btn.is-busy,button.is-busy{opacity:.6;cursor:progress}

/* standalone (installed) window: no browser chrome, so reclaim the space */
@media (display-mode:standalone){
  .topbar{padding-top:max(0px,env(safe-area-inset-top))}
  .bottom-nav{padding-bottom:max(0px,env(safe-area-inset-bottom))}
}

/* ==================================================================
   OFFLINE TILL + sync queue                                     v2.2
   ================================================================== */
.off-open{display:none}
body.is-offline .off-open{display:inline-flex}
.q-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;
  border:1px solid #f6d9a8;background:#fdf3e2;color:#9a6508;font-size:12px;font-weight:700;cursor:pointer;
  white-space:nowrap}
.q-pill:hover{background:#fbe9cb}
.q-pill svg{width:14px;height:14px}
.q-pill.has-err{border-color:#f6c9cb;background:#fdeaea;color:#b5151c}

/* full-screen offline till */
.off-pos{position:fixed;inset:0;z-index:8000;background:var(--bg);display:none;flex-direction:column}
.off-pos.open{display:flex}
.off-head{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:inset 0 3px 0 0 var(--red)}
.off-title{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.off-title svg{flex:none;color:var(--red)}
.off-title b{display:block;font-size:15px}
.off-title span{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.off-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 390px;gap:14px;padding:14px;overflow:hidden}
.off-left{min-width:0;display:flex;flex-direction:column;gap:10px}
.off-pick{display:grid;grid-template-columns:1fr 150px 90px;gap:8px}
.off-pick input,.off-pick select{width:100%}
.off-results{flex:1;min-height:0;overflow:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:9px;align-content:start}
.off-card{text-align:left;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:11px;
  padding:11px 12px;display:flex;flex-direction:column;gap:2px;transition:.12s}
.off-card:hover{border-color:var(--lime);box-shadow:0 4px 14px rgba(11,161,79,.13);transform:translateY(-1px)}
.off-card b{font-size:13.5px}
.off-price{font-size:14px;font-weight:700;color:var(--lime-dark);margin-top:3px}
.off-price i{font-size:11px;font-weight:500;font-style:normal}
.off-empty{grid-column:1/-1;padding:28px 14px;text-align:center;color:var(--muted);font-size:13px}

.off-right{background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:flex;
  flex-direction:column;min-height:0;overflow:hidden}
.off-cart-h{flex:none;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:13.5px;
  display:flex;align-items:center;gap:8px}
.off-cart{flex:1;min-height:90px;overflow:auto}
.off-line{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center;
  padding:9px 13px;border-bottom:1px solid var(--line)}
.off-ln{min-width:0}
.off-ln b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.off-ln span{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.off-qty{display:flex;align-items:center;gap:5px}
.off-qty button{width:25px;height:25px;border-radius:7px;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-size:15px;line-height:1;color:var(--ink)}
.off-qty button:hover{border-color:var(--lime);color:var(--lime-dark)}
.off-qty span{min-width:22px;text-align:center;font-weight:700;font-size:13px}
.off-lt{text-align:right;display:flex;align-items:center;gap:8px}
.off-lt b{font-size:13px;white-space:nowrap}
.off-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:17px;line-height:1}
.off-x:hover{color:var(--danger)}
.off-tot{flex:none;border-top:1px solid var(--line);padding:12px 14px;background:var(--bg);overflow:auto;
  max-height:58vh}
.off-disc{display:grid;grid-template-columns:1fr 110px;gap:7px;margin:8px 0}
.off-tot .field{margin-top:9px}

.q-row{display:grid;grid-template-columns:1fr auto auto;gap:11px;align-items:center;
  padding:10px 0;border-top:1px solid var(--line)}
.q-row:first-child{border-top:0}
.q-row.bad{color:var(--danger)}
.q-err{font-size:11.5px;color:var(--danger);margin-top:3px}

@media(max-width:900px){
  .off-body{grid-template-columns:1fr;overflow:auto}
  .off-left{min-height:46vh}
  .off-right{min-height:0}
  .off-tot{max-height:none}
  .off-pick{grid-template-columns:1fr 1fr;grid-template-areas:"s s" "u q"}
  .off-pick input#offSearch{grid-area:s}
}

/* =====================================================================
   v2.4 — barcode scanning
   ================================================================== */
.scan-ov{position:fixed;inset:0;z-index:9000;background:rgba(10,14,26,.78);display:flex;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(2px)}
.scan-sheet{background:var(--card);border-radius:16px;width:min(560px,100%);max-height:94vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.scan-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px}
.scan-x{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.scan-x:hover{color:var(--red)}
.scan-stage{position:relative;background:#06080f;aspect-ratio:4/3;overflow:hidden}
.scan-stage video{width:100%;height:100%;object-fit:cover;display:block}
.scan-stage.dead video{opacity:.15}
.scan-frame{position:absolute;inset:16% 9%;border:3px solid rgba(11,161,79,.95);border-radius:14px;box-shadow:0 0 0 2000px rgba(0,0,0,.3)}
.scan-laser{position:absolute;left:11%;right:11%;top:50%;height:2px;background:var(--red);box-shadow:0 0 10px var(--red);animation:scanSweep 2.1s ease-in-out infinite}
@keyframes scanSweep{0%,100%{transform:translateY(-70px)}50%{transform:translateY(70px)}}
.scan-msg{padding:12px 16px;font-size:13.5px;color:var(--muted);min-height:44px;line-height:1.45}
.scan-msg.good{color:var(--lime-dark,#077c3c);font-weight:600;background:var(--lime-soft,#e7f7ee)}
.scan-msg.bad{color:#9c1b21;background:#fdecec;font-weight:500}
.scan-acts{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px}
.scan-log{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.scan-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 11px;border-bottom:1px solid var(--line);font-size:13px}
.scan-row:last-child{border-bottom:none}
.scan-row.bad{background:#fdecec}
.scan-row .muted{font-size:11.5px;text-align:right}
/* pairing panel on the PC */
.pair-grid{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.pair-qr{width:168px;height:168px;background:#fff;padding:8px;border:1px solid var(--line);border-radius:12px}
.pair-qr img,.pair-qr canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.pair-code{font-size:38px;font-weight:800;letter-spacing:9px;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1.1}
.pair-step{font-size:13px;color:var(--muted);margin:3px 0}
.pair-live{display:inline-flex;align-items:center;gap:6px}
.pair-live .dotl{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.pair-live.on .dotl{background:var(--lime);animation:pairPulse 1.3s infinite}
@keyframes pairPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:620px){.pair-grid{grid-template-columns:1fr}.pair-qr{margin:0 auto}}
/* scan buttons in a toolbar */
.scan-btns{display:inline-flex;gap:6px;flex-wrap:wrap}
.flash-row{animation:flashRow .6s ease}
@keyframes flashRow{0%{background:var(--lime-soft,#e7f7ee)}100%{background:transparent}}

/* v2.5 — inline edit rows */
.batch-edit > td{background:var(--lime-soft,#e7f7ee);padding:10px 12px}
.batch-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0}
.batch-form .field{margin:0;min-width:110px}
.batch-form .field label{font-size:11px;margin-bottom:3px}
.batch-form input{padding:6px 8px;font-size:13px}
.row-edit > td{background:var(--blue-soft,#e9ebf8);padding:10px 12px}
td.nowrap{white-space:nowrap}

/* v2.6 — AJAX cart: show it is working without blocking the screen */
body.cart-busy #cartBody{opacity:.55;pointer-events:none;transition:opacity .12s}
body.cart-busy .pick{pointer-events:none}
.qty-step button{cursor:pointer}

/* =====================================================================
   v2.6 — pehli baar ki rehnumai (guided tour)
   ================================================================== */
.tour-wrap{position:fixed;inset:0;z-index:9500;pointer-events:none}
.tour-wrap::before{content:"";position:fixed;inset:0;background:rgba(10,14,26,.55);pointer-events:auto}
.tour-hole{position:fixed;border-radius:10px;box-shadow:0 0 0 4px var(--lime),0 0 0 9999px rgba(10,14,26,.55);
  transition:all .25s ease;pointer-events:none;z-index:1}
.tour-box{position:fixed;z-index:2;pointer-events:auto;background:var(--card);border-radius:14px;
  width:min(340px,calc(100vw - 24px));padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.33);
  border-top:4px solid var(--lime)}
.tour-box.center{top:50%;left:50%;transform:translate(-50%,-50%)}
.tour-box h4{margin:4px 0 6px;font-size:16px;color:var(--ink)}
.tour-box p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.tour-step{font-size:11px;font-weight:700;color:var(--lime-dark,#077c3c);letter-spacing:.6px}
.tour-acts{display:flex;gap:8px;align-items:center}
.tour-acts button{font-size:13px;padding:8px 15px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;font-family:inherit}
.tour-acts .tour-next{background:var(--lime);border-color:var(--lime);color:#fff;font-weight:600}
.tour-acts .tour-next:hover{background:var(--lime-dark,#077c3c)}
.tour-acts .tour-skip{border:none;background:none;color:var(--muted);padding-left:0}
.tour-acts .tour-skip:hover{color:var(--red);text-decoration:underline}
@media(max-width:640px){.tour-box{left:12px !important;right:12px;width:auto}}

/* =====================================================================
   v2.7 — full product card
   ================================================================== */
.prod-form{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.prod-right{display:block}
@media(max-width:1000px){.prod-form{grid-template-columns:1fr}}

.req{color:var(--red)}
.attr-pick{display:flex;gap:6px}
.attr-pick input{flex:1;min-width:0}
.attr-pick .btn{flex:0 0 auto;padding:7px 9px}

.img-box{width:100%;aspect-ratio:1/1;border:1px solid var(--line);border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.img-box img{width:100%;height:100%;object-fit:contain}
.img-ph{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}

.form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  position:sticky;bottom:10px;box-shadow:0 6px 24px rgba(0,0,0,.08);z-index:5}
/* the bar floats over the page, so leave room or it hides the last field */
#prodForm{padding-bottom:84px}
@media(max-width:700px){
  .form-actions{position:static;box-shadow:none}
  #prodForm{padding-bottom:0}
  .form-actions .btn{flex:1 1 46%}
}

.cu-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;margin-bottom:8px}
.cu-row input{width:100%}

.imp-list{max-height:380px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.imp-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.imp-row:last-child{border-bottom:none}
.imp-row:hover{background:var(--lime-soft,#e7f7ee)}

.mg-list{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.mg-item{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:7px 11px;border-bottom:1px solid var(--line);font-size:13.5px}
.mg-item:last-child{border-bottom:none}
.mg-item.off{opacity:.55}

.csv-help{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  font-size:11.5px;line-height:1.6;margin:0;white-space:pre-wrap;color:var(--ink)}

/* product thumbnail in lists and on POS tiles */
.p-thumb{width:34px;height:34px;border-radius:7px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:0 0 auto}
.pick .p-img{width:100%;height:58px;object-fit:contain;background:#fff;border-radius:7px;margin-bottom:5px}
.badge.svc{background:#eef0ff;color:#3146c9}

/* =====================================================================
   v2.8 — one-by-one stock entry
   ================================================================== */
.one-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:18px}
@media(max-width:900px){.one-grid{grid-template-columns:1fr}}
.one-col .field{margin-bottom:10px}
.one-h{margin:0 0 10px;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.sel-prod{display:flex;gap:11px;align-items:center;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;min-height:72px}
.sel-prod img{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:7px;flex:0 0 auto}
.sp-name{font-weight:700;font-size:14px;color:var(--ink)}
.sp-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.tot-chip{background:#fff7d6;border:1px solid #e9d88a;border-radius:8px;padding:8px 10px;
  font-weight:700;font-size:13px;text-align:center;color:var(--ink)}
.one-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;
  border-top:1px solid var(--line);padding-top:12px}
.one-amt{font-size:13.5px;color:var(--muted)}
.one-amt b{color:var(--ink);font-size:16px}
/* in one-by-one mode the raw table is a read-back list, not a typing grid */
#itbl.one-mode input,#itbl.one-mode select{pointer-events:auto}
.lot-extra{display:none}
.seg button{cursor:pointer}

/* v2.8 — inventory advanced search */
.adv-box{margin-bottom:12px;border-left:3px solid var(--blue)}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.adv-grid .field{margin:0}
@media(max-width:1100px){.adv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.adv-grid{grid-template-columns:1fr}}

/* =====================================================================
   v2.9 — POS entry panel
   ================================================================== */
.entry-panel{margin-bottom:12px;padding:12px 14px}
.ep-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.ep-row input{flex:1;min-width:0}
.ep-tag{flex:0 0 78px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.3px;
  background:var(--blue);color:#fff;border-radius:7px;padding:7px 6px}
.ep-tag.red{background:var(--red)}
.ep-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0 0}
.ep-grid .field{margin:0}
.ep-grid .field label{font-size:11px;margin-bottom:3px}
.ep-grid input,.ep-grid select{padding:7px 8px;font-size:13px}
@media(max-width:1200px){.ep-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.ep-grid{grid-template-columns:repeat(2,1fr)}.ep-tag{flex:0 0 62px;font-size:10.5px}}
.ep-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:11px;
  border-top:1px solid var(--line);padding-top:10px}
.ep-sel{font-size:12.5px;color:var(--muted);padding:5px 9px;border-radius:7px;background:var(--bg)}
.ep-sel.on{background:var(--lime-soft,#e7f7ee);color:var(--ink)}
.btn.warn{background:var(--warn);border-color:var(--warn);color:#3a2a00;font-weight:600}
.cart-tbl th,.cart-tbl td{padding:7px 6px;font-size:12.5px;vertical-align:middle}
.cart-tbl .qty-step{justify-content:flex-end;gap:2px}
.cart-tbl .qty-step button{width:24px;height:24px;font-size:14px}
.cart-tbl .qty-step .qv{min-width:26px;font-size:13px}
.cart-tbl .cl-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45}
.cart-tbl .btn.sm{padding:4px 6px}
.calc-out{width:100%;text-align:right;font-size:22px;font-weight:700;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);margin-bottom:10px}
.calc-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.calc-pad button{padding:13px 0;font-size:16px;border:1px solid var(--line);background:#fff;
  border-radius:8px;cursor:pointer;font-family:inherit}
.calc-pad button:hover{background:var(--bg)}
.calc-pad .op{background:var(--bg);font-weight:600}
.calc-pad .eq{background:var(--lime);color:#fff;border-color:var(--lime);font-weight:700}

/* =====================================================================
   v3.0 — Stock List (select a lot, edit it)
   ================================================================== */
/* minmax(0,…) is essential: without it the 15-column table forces the
   grid track wider than the screen and the whole page scrolls sideways
   under the sidebar. With it, the table scrolls inside its own box. */
.stock-wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;align-items:start}
.stock-wrap > .card{min-width:0}
@media(max-width:1150px){.stock-wrap{grid-template-columns:1fr}}
.stock-side{position:sticky;top:12px}
.stock-tbl th,.stock-tbl td{padding:6px 8px;font-size:12px;white-space:nowrap}
.stock-tbl tbody tr{cursor:pointer}
.stock-tbl tbody tr:hover{background:var(--lime-soft,#e7f7ee)}
.stock-tbl tbody tr.sel{background:var(--blue-soft,#e9ebf8);box-shadow:inset 3px 0 0 var(--blue)}
.stock-tbl tbody tr.sel td{font-weight:500}
.cell-prod{min-width:150px}
#itbl td{font-size:12.5px}
#itbl .v-prod{font-weight:600}

/* v3.1 — go-live danger zone */
.danger-zone{border:1px solid #f3c2c2}
.danger-zone .card-b{padding:14px}