/* ═══════════════════════════════════════════════════════════
   PIXEL BLACK GROCERY POS — STYLES
   ═══════════════════════════════════════════════════════════ */

.gpos-shell { display:flex; height:calc(100vh - var(--header-h) - 38px); overflow:hidden; }

/* ── CATEGORY PANEL ── */
.gcat-panel { width:160px; background:#fff; border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; }
.gcat-head  { padding:8px 10px 6px; border-bottom:1px solid var(--border); flex-shrink:0; }
.gcat-head-txt { font-size:0.6rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.5px; }
.gcat-list  { flex:1; overflow-y:auto; padding:5px 0; }
.gcat-item  { display:flex; align-items:center; gap:7px; padding:8px 10px; cursor:pointer; transition:0.12s; border-left:3px solid transparent; }
.gcat-item:hover  { background:var(--bg); }
.gcat-item.active { background:var(--green-lt); border-left-color:var(--green); }
.gcat-icon  { font-size:0.95rem; flex-shrink:0; }
.gcat-name  { font-size:0.7rem; font-weight:600; flex:1; line-height:1.2; }
.gcat-count { font-size:0.56rem; font-weight:700; background:var(--bg); color:var(--t4); border:1px solid var(--border); padding:1px 4px; border-radius:99px; min-width:18px; text-align:center; }
.gcat-item.active .gcat-count { background:var(--green-dim); color:var(--green); border-color:var(--green-glow); }

/* ── PRODUCT AREA ── */
.gprod-area { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; background:var(--bg); }

/* Barcode Bar */
.barcode-bar { height:46px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 12px; gap:8px; flex-shrink:0; }
.barcode-icon-wrap { display:flex; align-items:center; gap:5px; background:var(--green); color:#fff; height:30px; padding:0 10px; border-radius:var(--radius); font-size:0.72rem; font-weight:700; white-space:nowrap; flex-shrink:0; }
.barcode-input { flex:1; max-width:260px; height:30px; border:1.5px solid var(--green); border-radius:var(--radius); padding:0 10px; font-size:0.8rem; font-weight:700; background:var(--green-lt); color:var(--t1); letter-spacing:1px; }
.barcode-input:focus { outline:none; border-color:var(--green-dk); background:#fff; }
.barcode-input::placeholder { font-size:0.7rem; font-weight:400; letter-spacing:0; color:var(--t4); }
.prod-search-g { flex:1; height:30px; border:1px solid var(--border); border-radius:var(--radius); padding:0 10px 0 26px; font-size:0.72rem; background:var(--bg); color:var(--t1); }
.prod-search-g:focus { border-color:var(--green); outline:none; background:#fff; }
.search-ic-wrap { position:relative; flex:1; max-width:220px; }
.search-ic-g { position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--t4); }
.barcode-status { font-size:0.65rem; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.barcode-status.found    { background:var(--green-lt); color:var(--green); }
.barcode-status.notfound { background:var(--red-lt); color:var(--red); }
.barcode-status.idle     { background:var(--bg); color:var(--t3); border:1px solid var(--border); }
.gst-filter-wrap { display:flex; gap:4px; margin-left:auto; }
.gst-pill { height:22px; padding:0 8px; border-radius:99px; border:1px solid var(--border); background:var(--bg); font-size:0.6rem; font-weight:700; color:var(--t3); cursor:pointer; transition:0.15s; }
.gst-pill:hover  { border-color:var(--green); color:var(--green); }
.gst-pill.active { background:var(--green); border-color:var(--green); color:#fff; }

/* Product Grid */
.gprod-scroll { flex:1; overflow-y:auto; padding:10px; }
.gprod-grid   { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px; }

/* Product Card */
.gprod-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:10px 9px 0; cursor:pointer; transition:all 0.15s; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:var(--shadow-sm); user-select:none; }
.gprod-card:hover  { border-color:var(--green); box-shadow:0 4px 14px var(--green-glow); transform:translateY(-2px); }
.gprod-card:active { transform:scale(0.97); }
.gprod-card.in-cart { border-color:var(--green); background:var(--green-lt); }
.gprod-card.oos     { opacity:0.4; pointer-events:none; filter:grayscale(0.7); }
.gprod-card.expiring { border-color:rgba(245,158,11,0.5); }
.gprod-gst { position:absolute; top:6px; left:6px; font-size:0.54rem; font-weight:800; padding:1px 5px; border-radius:3px; background:var(--bg); color:var(--t3); border:1px solid var(--border); }
.gprod-gst.g0  { background:var(--green-lt); color:var(--green); border-color:var(--green-glow); }
.gprod-gst.g5  { background:var(--blue-lt);  color:var(--blue);  border-color:rgba(59,130,246,0.2); }
.gprod-gst.g12 { background:var(--orange-lt);color:var(--orange);border-color:var(--orange-dim); }
.gprod-gst.g18 { background:var(--red-lt);   color:var(--red);   border-color:var(--red-dim); }
.gprod-qty-badge { position:absolute; top:5px; right:5px; min-width:19px; height:19px; border-radius:99px; background:var(--green); color:#fff; font-size:0.6rem; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 3px; opacity:0; transform:scale(0.7); transition:0.15s; }
.gprod-card.in-cart .gprod-qty-badge { opacity:1; transform:scale(1); }
.gprod-expiry { position:absolute; bottom:26px; left:0; right:0; font-size:0.56rem; font-weight:700; padding:2px; text-align:center; }
.gprod-expiry.exp-soon { background:rgba(245,158,11,0.15); color:var(--gold); }
.gprod-expiry.exp-done { background:rgba(239,68,68,0.15); color:var(--red); }
.gprod-barcode { font-size:0.52rem; color:var(--t4); letter-spacing:0.5px; margin-bottom:4px; }
.gprod-emoji  { font-size:2.2rem; margin:2px 0 6px; }
.gprod-name   { font-size:0.7rem; font-weight:700; line-height:1.2; margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; width:100%; }
.gprod-unit   { font-size:0.6rem; color:var(--t4); margin-bottom:2px; }
.gprod-price  { font-size:0.85rem; font-weight:900; color:var(--green); margin-bottom:2px; }
.gprod-stock  { font-size:0.58rem; margin-bottom:3px; }
.gprod-stock.ok  { color:var(--t4); }
.gprod-stock.low { color:var(--gold); font-weight:700; }
.gprod-stock.oos { color:var(--red); font-weight:700; }
.gprod-add-strip { width:calc(100% + 18px); margin:0 -9px; padding:5px 0; background:var(--green); color:#fff; font-size:0.62rem; font-weight:700; text-align:center; transform:translateY(100%); transition:0.15s; }
.gprod-card:hover .gprod-add-strip { transform:translateY(0); }

/* ── BILLING PANEL ── */
.gbill-panel  { width:368px; background:#fff; border-left:1.5px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; }
.gbill-header { background:var(--green); padding:8px 10px; flex-shrink:0; }
.gbill-hdr-row1 { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.gbill-no   { font-size:0.9rem; font-weight:800; color:#fff; }
.gbill-hdr-actions { display:flex; gap:4px; }
.gbhdr-btn  { height:22px; padding:0 7px; border-radius:5px; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.28); color:#fff; font-size:0.6rem; font-weight:700; cursor:pointer; transition:0.15s; }
.gbhdr-btn:hover { background:rgba(255,255,255,0.28); }
.gbill-hdr-row2 { display:flex; gap:5px; }
.gbill-meta { flex:1; background:rgba(0,0,0,0.12); border-radius:5px; padding:4px 8px; display:flex; flex-direction:column; gap:1px; }
.gbm-lbl { font-size:0.56rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.4px; }
.gbm-val { font-size:0.72rem; font-weight:700; color:#fff; }
.gbill-cust  { padding:6px 8px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:5px; flex-shrink:0; }
.cust-loyalty { background:var(--gold-lt); border:1px solid rgba(245,158,11,0.3); border-radius:5px; padding:3px 8px; font-size:0.62rem; font-weight:700; color:var(--gold); white-space:nowrap; flex-shrink:0; }
.gbill-items-area { flex:1; overflow-y:auto; min-height:0; }
.gbill-ledger-head { display:grid; grid-template-columns:18px 1fr 72px 58px 20px; gap:4px; padding:5px 8px; background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1; }
.glh-cell { font-size:0.57rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.3px; }
.glh-cell.right  { text-align:right; }
.glh-cell.center { text-align:center; }
.gbill-row  { display:grid; grid-template-columns:18px 1fr 72px 58px 20px; gap:4px; padding:7px 8px; border-bottom:1px solid var(--border); align-items:center; transition:0.1s; }
.gbill-row:hover { background:var(--bg); }
.gbill-row:last-child { border-bottom:none; }
.gbi-sno  { font-size:0.6rem; font-weight:600; color:var(--t4); }
.gbi-info { min-width:0; }
.gbi-name { font-size:0.7rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gbi-unit { font-size:0.58rem; color:var(--t3); }
.gbi-gst  { font-size:0.55rem; color:var(--t4); }
.gbi-qty-ctrl { display:flex; align-items:center; gap:2px; justify-content:center; }
.gbi-qty-btn  { width:18px; height:18px; border-radius:4px; background:var(--bg); border:1px solid var(--border); font-size:12px; font-weight:700; color:var(--t2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.12s; flex-shrink:0; }
.gbi-qty-btn:hover { background:var(--green); border-color:var(--green); color:#fff; }
.gbi-qty-num { font-size:0.7rem; font-weight:800; min-width:20px; text-align:center; }
.gbi-qty-num.weight { font-size:0.65rem; background:var(--green-lt); border:1px solid var(--green-glow); border-radius:4px; padding:0 3px; min-width:30px; cursor:pointer; }
.gbi-amt { font-size:0.72rem; font-weight:700; text-align:right; }
.gbi-del { color:var(--red); font-size:11px; cursor:pointer; opacity:0.3; text-align:center; transition:0.12s; }
.gbi-del:hover { opacity:1; }
.gbill-empty { text-align:center; padding:30px 14px; color:var(--t4); }
.gbill-empty-icon { font-size:2rem; opacity:0.4; margin-bottom:7px; }
.gbill-disc-row { padding:5px 8px; border-top:1px solid var(--border); display:flex; align-items:center; gap:6px; flex-shrink:0; }
.gdisc-label { font-size:0.67rem; font-weight:600; color:var(--t2); white-space:nowrap; }
.gbill-totals { padding:7px 10px; background:var(--bg); border-top:1.5px solid var(--border); flex-shrink:0; }
.gtot-row { display:flex; justify-content:space-between; font-size:0.7rem; margin-bottom:3px; color:var(--t2); }
.gtot-row .gtv { font-weight:700; color:var(--t1); }
.gtot-row.disc .gtv { color:var(--green); }
.gtot-slab-row { display:flex; justify-content:space-between; font-size:0.65rem; margin-bottom:2px; color:var(--t3); padding-left:8px; }
.gtot-grand { display:flex; justify-content:space-between; align-items:center; padding-top:6px; margin-top:4px; border-top:1.5px dashed var(--border-md); }
.gtgr-lbl { font-size:0.9rem; font-weight:800; }
.gtgr-val { font-size:1.1rem; font-weight:900; color:var(--green); }
.gbill-cash { padding:5px 10px; border-top:1px solid var(--border); background:var(--green-lt); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.gcash-lbl { font-size:0.67rem; font-weight:700; color:var(--green); white-space:nowrap; }
.gcash-in  { flex:1; height:28px; border:1.5px solid var(--green); border-radius:6px; background:#fff; padding:0 8px; font-size:0.82rem; font-weight:700; color:var(--t1); }
.gcash-in:focus { outline:none; }
.gcash-bal { font-size:0.7rem; font-weight:700; white-space:nowrap; }
.gcash-bal.change { color:var(--green); }
.gcash-bal.short  { color:var(--red); }
.gbill-pay { padding:5px 8px; border-top:1px solid var(--border); display:flex; gap:4px; flex-shrink:0; }
.gpm-btn   { flex:1; height:28px; border-radius:6px; border:1px solid var(--border); background:var(--bg); font-size:0.63rem; font-weight:700; color:var(--t3); cursor:pointer; transition:0.15s; display:flex; align-items:center; justify-content:center; gap:3px; }
.gpm-btn:hover  { border-color:var(--green); color:var(--green); }
.gpm-btn.active { background:var(--green); border-color:var(--green); color:#fff; }
.gbill-actions { padding:7px 8px; border-top:1.5px solid var(--border); display:flex; gap:6px; flex-shrink:0; background:#fff; }
.gact-hold   { height:38px; padding:0 10px; border-radius:7px; background:var(--bg); border:1px solid var(--border); color:var(--t2); font-size:0.72rem; font-weight:700; cursor:pointer; transition:0.15s; display:flex; align-items:center; gap:4px; }
.gact-hold:hover { border-color:var(--gold); color:var(--gold); }
.gact-print  { flex:1; height:38px; border-radius:7px; background:var(--blue-lt); border:1.5px solid var(--blue); color:var(--blue); font-size:0.72rem; font-weight:700; cursor:pointer; transition:0.15s; display:flex; align-items:center; justify-content:center; gap:4px; }
.gact-print:hover { background:var(--blue); color:#fff; }
.gact-settle { flex:2; height:38px; border-radius:7px; background:var(--green); border:none; color:#fff; font-size:0.85rem; font-weight:800; cursor:pointer; transition:0.15s; display:flex; align-items:center; justify-content:center; gap:5px; box-shadow:0 3px 10px var(--green-glow); }
.gact-settle:hover    { background:var(--green-dk); }
.gact-settle:disabled { opacity:0.4; cursor:not-allowed; box-shadow:none; }

/* Weight Modal */
.weight-modal-box { max-width:340px; }
.weight-modal-product { display:flex; align-items:center; gap:12px; background:var(--bg); border-radius:var(--radius); padding:12px; margin-bottom:14px; }
.wm-emoji  { font-size:2rem; }
.wm-name   { font-size:0.85rem; font-weight:700; }
.wm-price  { font-size:0.72rem; color:var(--green); font-weight:700; margin-top:2px; }
.weight-keypad  { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
.wk-btn { height:40px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg); font-size:0.9rem; font-weight:700; color:var(--t1); cursor:pointer; transition:0.12s; }
.wk-btn:hover    { background:var(--green); border-color:var(--green); color:#fff; }
.wk-btn.special  { background:var(--green-lt); color:var(--green); font-size:0.75rem; }
.wk-btn.del-key  { background:var(--red-lt); color:var(--red); font-size:0.75rem; }
.wk-btn.add-key  { background:var(--green); color:#fff; font-size:0.8rem; font-weight:800; }
.wk-btn.add-key:hover { background:var(--green-dk); }
.weight-display  { background:var(--t1); color:#fff; border-radius:var(--radius); padding:10px 14px; text-align:right; margin-bottom:8px; font-size:1.4rem; font-weight:900; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.weight-display .wd-unit  { font-size:0.75rem; color:var(--t4); margin-left:4px; }
.weight-display .wd-total { font-size:0.72rem; color:var(--green); display:block; margin-top:2px; }