/* BUILD200 — approved POS terminal UI implementation.
   Priority: cart visibility, compact totals, fixed action rail, F12 barcode at the bottom,
   no page scroll on desktop. Existing transaction/data logic is unchanged. */
:root{
  --b200-green:#086f3f;
  --b200-green-dark:#044c2d;
  --b200-green-deep:#033d26;
  --b200-line:#d9e7df;
  --b200-soft:#f6faf7;
  --b200-text:#10251a;
  --b200-muted:#68786f;
  --b200-rail:clamp(330px,27vw,410px);
}

/* One-screen cashier workspace. */
body:has(main.posScreen),body:has(main.posScreen) #app{height:100dvh!important;min-height:0!important;overflow:hidden!important;background:#f5f8f6!important}
#app:has(main.posScreen) header{height:50px!important;min-height:50px!important;padding:5px 13px!important;background:linear-gradient(90deg,#044c2d,#076c3d)!important}
#app:has(main.posScreen) header strong{font-size:13px!important}
#app:has(main.posScreen) .logoutBtn{min-height:34px!important;height:34px!important;padding:5px 11px!important}
main.posScreen{height:calc(100dvh - 50px)!important;min-height:0!important;padding:7px 10px 5px!important;gap:6px!important;overflow:hidden!important;background:#f5f8f6!important}

/* Header / toolbar from the approved mockup. */
.posScreen .cashier-greeting{display:none!important}
.posScreen .posHeading{min-height:54px!important;padding:6px 10px!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:0 1px 0 #e7efea!important}
.posScreen .posHeading .pageTitle{font-size:17px!important;font-weight:950!important;color:#064d2d!important}
.posScreen .posHeading>div:first-child>span{font-size:11px!important;color:#0b7745!important}
.posScreen .posStatusBar{gap:6px!important}
.posScreen .posStatusBar>span{min-width:100px!important;padding:6px 9px!important;border:1px solid #dce8e1!important;border-radius:8px!important;background:#f9fbfa!important}
.posScreen .posStatusBar small{font-size:7px!important}.posScreen .posStatusBar b{font-size:9px!important}
.posScreen .posToolbar{grid-template-columns:minmax(340px,1fr) minmax(190px,240px) 115px 130px!important;gap:7px!important;padding:5px!important;border:0!important;border-bottom:1px solid #dfe9e3!important;border-radius:0!important;background:#fff!important}
.posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{height:42px!important;min-height:42px!important;border-radius:7px!important;font-size:11px!important}
.posScreen .posToolbar input{border:1.5px solid #89bc9d!important;background:#fff!important;font-size:13px!important}
.posScreen .posToolbar button{background:#eff6f2!important;color:#173b29!important}
.posScreen .promoPosBanner{display:none!important}

/* Main cart + fixed action rail. */
.posScreen .posGrid.posCartOnly{flex:1 1 0!important;height:auto!important;min-height:0!important;overflow:hidden!important}
.posScreen .cartPanel{--rail:var(--b200-rail);height:100%!important;min-height:0!important;padding:7px!important;display:grid!important;grid-template-rows:34px auto minmax(0,1fr) 34px auto!important;gap:4px!important;border:1px solid var(--b200-line)!important;border-radius:10px!important;background:#fff!important;overflow:hidden!important}
.cartPanel>h2{height:34px!important;margin:0 calc(var(--rail) + 8px) 0 0!important;padding:0 6px!important;display:flex!important;align-items:center!important;font-size:15px!important;color:#07613a!important;text-transform:uppercase!important}
.cartPanel>h2::before{content:"🛒"!important;margin-right:7px!important;font-size:14px!important}
.cartListHeader,.cartItemsScroll,.cartStatsBar,.cartFixedFooter{margin-right:calc(var(--rail) + 8px)!important}
.cartListHeader{display:grid!important;grid-template-columns:28px minmax(210px,1fr) 128px 105px 80px 105px 118px!important;gap:6px!important;min-height:34px!important;padding:7px 8px!important;border:1px solid #e1ebe5!important;border-radius:6px!important;background:#f7faf8!important;color:#56675d!important;font-size:7.5px!important;font-weight:950!important;letter-spacing:.45px!important}
.cartListHeader span:not(:nth-child(2)){text-align:center!important}
.cartItemsScroll{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important;border-bottom:1px solid #edf2ef!important}
.cartItemsScroll::-webkit-scrollbar{width:6px}.cartItemsScroll::-webkit-scrollbar-thumb{background:#c6d9cd;border-radius:10px}

/* Dense but readable cart rows. */
.cartRow{display:grid!important;grid-template-columns:28px minmax(210px,1fr) 128px 105px 80px 105px 118px!important;gap:6px!important;align-items:center!important;min-height:72px!important;margin:0!important;padding:7px 8px!important;border:0!important;border-bottom:1px solid #e5ece8!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
.cartRow:hover{background:#fbfdfc!important}
.cartLineNo{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#0b7544;color:#fff;font-size:11px;font-weight:950}
.cartItemInfo{gap:2px!important}.cartItemName{font-size:13px!important;font-weight:950!important;color:#101c15!important}.cartItemInfo small{font-size:8px!important;color:#69786f!important}.cartUnitPrice{font-size:9px!important;font-weight:900!important;color:#096b3d!important}
.cartQtyBox{display:grid!important;grid-template-columns:34px 38px 34px!important;grid-template-rows:30px 12px!important;gap:3px!important;align-items:center!important;justify-content:center!important}
.cartQtyBox small{grid-column:1/-1;text-align:center;font-size:7px;color:#5e6d64;font-weight:800}
.cartQtyBtn{width:34px!important;height:30px!important;min-height:30px!important;padding:0!important;border:1px solid #c9ddd0!important;border-radius:7px!important;background:#eef6f1!important;color:#173c29!important;font-size:17px!important;font-weight:950!important}.cartQtyValue{height:30px;display:grid;place-items:center;border:1px solid #d5e4db;border-radius:7px;background:#fff;font-size:12px!important}
.cartRowPrice,.cartRowDiscount,.cartItemTotal{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;white-space:nowrap!important}.cartRowPrice small,.cartRowDiscount small,.cartItemTotal small{display:none!important}.cartRowPrice b,.cartRowDiscount b,.cartItemTotal strong{font-size:11px!important;color:#0e2117!important}.cartItemTotal strong{font-weight:950!important}.cartRowDiscount b{font-weight:800!important}
.cartButtons{display:flex!important;justify-content:center!important;gap:5px!important;flex-wrap:nowrap!important}.cartButtons button{min-width:34px!important;width:34px!important;height:32px!important;min-height:32px!important;padding:0!important;border-radius:7px!important;font-size:9px!important}.cartButtons .danger{background:#d5202c!important;color:#fff!important;border:0!important}

.emptyCartState{height:100%!important;min-height:0!important;border:0!important;background:#fff!important}.emptyCartIcon{width:54px!important;height:54px!important;background:#edf8f1!important;color:#07683d!important}.emptyCartState strong{font-size:18px!important}.emptyCartState>span{font-size:10px!important}.emptyCartState>small{font-size:8px!important}

/* Always-visible counts directly under cart. */
.cartStatsBar{min-height:34px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 10px;border-top:1px solid #dfe9e3;background:#fff;color:#18271e;font-size:10px}.cartStatsBar span:last-child{text-align:center}.cartStatsBar b{font-weight:950}

/* Bottom totals first; F12 barcode is last cashier control. */
.posScreen .cartFixedFooter{display:grid!important;grid-template-columns:clamp(230px,25%,320px) minmax(0,1fr)!important;grid-template-areas:"total summary" "barcode barcode"!important;gap:6px!important;padding:0!important;border:0!important;background:#fff!important}
.posScreen .cartTotal{grid-area:total!important;min-height:64px!important;padding:8px 14px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;border:1px solid #075f37!important;border-radius:8px!important;background:linear-gradient(135deg,#075c35,#087a45)!important;color:#fff!important}.posScreen .cartTotal .grandTotalLabel{font-size:9px!important;color:#fff!important;font-weight:950!important;letter-spacing:.5px!important}.posScreen .cartTotal strong{margin-top:3px!important;font-size:29px!important;line-height:1!important;color:#fff!important;text-align:center!important}
.posScreen .cartSummary{grid-area:summary!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;border:1px solid #dce8e1!important;border-radius:8px!important;overflow:hidden!important;background:#f7fbf8!important}.posScreen .cartSummary>span{min-height:64px!important;padding:7px 9px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;border:0!important;border-right:1px solid #dce8e1!important;border-radius:0!important;background:linear-gradient(180deg,#fbfdfc,#edf7f1)!important}.posScreen .cartSummary>span:last-child{border-right:0!important}.posScreen .cartSummary small{font-size:8px!important;color:#1c6c41!important;font-weight:950!important}.posScreen .cartSummary b{margin-top:4px!important;font-size:17px!important;color:#0f2317!important}.posScreen .cartSummary .summaryDiscount{color:#0f2317!important}
.posScreen .barcodeDock{grid-area:barcode!important;display:grid!important;grid-template-columns:72px minmax(0,1fr) 112px!important;gap:0!important;align-items:center!important;min-height:64px!important;padding:5px!important;border:1px solid #bad7c5!important;border-radius:8px!important;background:linear-gradient(90deg,#086d3f,#0b8050)!important;overflow:hidden!important}.posScreen .barcodeShortcut{height:52px!important;min-height:52px!important;display:grid!important;place-items:center!important;border-radius:7px 0 0 7px!important;background:#0a7545!important;color:#fff!important;font-size:24px!important;font-weight:950!important}.posScreen .barcodeInputWrap{height:52px!important}.posScreen .barcodeDock input{height:52px!important;min-height:52px!important;padding:0 120px 0 16px!important;border:0!important;border-radius:0!important;background:#fff!important;font-size:19px!important;font-weight:900!important;letter-spacing:.3px!important;color:#2d3530!important}.posScreen .barcodeInputWrap small{right:9px!important;max-width:105px!important;font-size:7px!important}.barcodeVisual{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0 7px 7px 0;background:#0a7545;color:#fff}.barcodeVisual b{font-size:26px;line-height:.8}.barcodeVisual small{font-size:9px;font-weight:900;margin-top:3px}
.posScreen .barcodeDock.scanSuccess{box-shadow:0 0 0 3px rgba(31,169,88,.18)!important}.posScreen .barcodeDock.scanFailed{background:#b92531!important}

/* Right-side payment/actions rail: colorful, compact, always visible. */
.checkoutActions{position:absolute!important;top:7px!important;right:7px!important;bottom:7px!important;width:var(--rail)!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;gap:7px!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#fff!important;z-index:5!important}
.checkoutGroup{position:relative!important;margin:0!important;padding:30px 8px 8px!important;border:1px solid #dce8e1!important;border-radius:9px!important;background:#fbfdfc!important;overflow:hidden!important}.checkoutGroup .groupLabel{position:absolute!important;top:9px!important;left:10px!important;font-size:8px!important;font-weight:950!important;color:#315b43!important;letter-spacing:.5px!important}
.checkoutGroup.shortcutGroup{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(44px,1fr)!important;gap:6px!important;align-content:stretch!important}.checkoutGroup.utilityGroup{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:42px!important;gap:5px!important;align-content:start!important}.checkoutGroup.utilityGroup .btnVoid{grid-column:1/-1!important}
.posScreen .checkoutActions .posBtn{width:100%!important;min-width:0!important;min-height:42px!important;height:auto!important;margin:0!important;padding:5px!important;border:0!important;border-radius:7px!important;color:#fff!important;font-size:10px!important;font-weight:950!important;line-height:1.05!important;box-shadow:none!important;text-shadow:none!important}.posScreen .checkoutActions .posBtn small{display:block!important;margin-bottom:2px!important;font-size:7px!important;color:rgba(255,255,255,.9)!important}.posScreen .checkoutActions .posBtn.selected{outline:2px solid #ffd046!important;outline-offset:-2px!important}
.btnCash{background:#0d944d!important}.btnGcash{background:#1178d2!important}.btnMaya{background:#0bada8!important}.btnBank{background:#285685!important}.btnCredit{background:#ea7a00!important}.btnSplit{background:#6043b7!important}.btnHold{background:#dda300!important}.btnRecall{background:#0b91a8!important}.btnRetail{background:#187fe0!important}.btnWholesale{background:#7046cb!important}.btnDeposit{background:#8737e1!important}.btnInquiry{background:#087548!important}.btnDisplay{background:#275b99!important}.btnDiscount{background:#c72e73!important}.btnExpense{background:#a84725!important}.btnLoad{background:#c24c15!important}.btnClear{background:#414b47!important}.btnVoid{background:#c8131d!important}

/* Desktop height compaction: keep totals and F12 visible before shrinking the cart. */
@media (min-width:1050px) and (max-height:820px){
  #app:has(main.posScreen) header{height:44px!important;min-height:44px!important}main.posScreen{height:calc(100dvh - 44px)!important;padding-top:4px!important}.posScreen .posHeading{min-height:42px!important}.posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{height:35px!important;min-height:35px!important}.posScreen .cartPanel{grid-template-rows:30px auto minmax(0,1fr) 28px auto!important}.cartPanel>h2{height:30px!important}.cartListHeader{min-height:28px!important;padding:5px 7px!important}.cartRow{min-height:58px!important;padding:5px 7px!important}.cartStatsBar{min-height:28px!important}.posScreen .cartTotal,.posScreen .cartSummary>span{min-height:52px!important}.posScreen .cartTotal strong{font-size:24px!important}.posScreen .barcodeDock{min-height:52px!important}.posScreen .barcodeShortcut,.posScreen .barcodeInputWrap,.posScreen .barcodeDock input,.barcodeVisual{height:42px!important;min-height:42px!important}.posScreen .barcodeDock input{font-size:16px!important}.checkoutGroup{padding-top:25px!important}.checkoutGroup.shortcutGroup{gap:4px!important;grid-auto-rows:minmax(34px,1fr)!important}.checkoutGroup.utilityGroup{grid-auto-rows:34px!important;gap:4px!important}.posScreen .checkoutActions .posBtn{min-height:34px!important;font-size:8.5px!important}
}
@media (min-width:1050px) and (max-height:680px){
  .posScreen .posHeading{display:none!important}.posScreen .cartPanel{grid-template-rows:28px auto minmax(0,1fr) 25px auto!important}.cartRow{min-height:50px!important}.posScreen .cartTotal,.posScreen .cartSummary>span{min-height:44px!important}.posScreen .barcodeDock{min-height:46px!important}.posScreen .barcodeShortcut,.posScreen .barcodeInputWrap,.posScreen .barcodeDock input,.barcodeVisual{height:36px!important;min-height:36px!important}.checkoutGroup.shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}.checkoutGroup.utilityGroup{grid-template-columns:repeat(4,minmax(0,1fr))!important}.checkoutGroup.utilityGroup .btnVoid{grid-column:auto!important}
}

/* Tablet/mobile can scroll normally; desktop remains one-screen. */
@media (max-width:1049px){
  body:has(main.posScreen),body:has(main.posScreen) #app{height:auto!important;overflow:auto!important}main.posScreen{height:auto!important;min-height:calc(100dvh - 50px)!important;overflow:visible!important}.posScreen .cartPanel{display:block!important;height:auto!important;min-height:620px!important}.cartPanel>h2,.cartListHeader,.cartItemsScroll,.cartStatsBar,.cartFixedFooter{margin-right:0!important}.cartListHeader{display:none!important}.cartRow{grid-template-columns:32px minmax(0,1fr) auto!important;grid-template-areas:"no info qty" "no price total" "no disc actions"!important}.cartLineNo{grid-area:no}.cartItemInfo{grid-area:info}.cartQtyBox{grid-area:qty}.cartRowPrice{grid-area:price;align-items:flex-start!important}.cartRowDiscount{grid-area:disc;align-items:flex-start!important}.cartItemTotal{grid-area:total;align-items:flex-end!important}.cartButtons{grid-area:actions;justify-content:flex-end!important}.checkoutActions{position:static!important;width:100%!important;margin-top:8px!important}.posScreen .cartFixedFooter{grid-template-columns:1fr!important;grid-template-areas:"total" "summary" "barcode"!important}.posScreen .posToolbar{grid-template-columns:1fr 1fr!important}.posScreen .barcodeDock{grid-template-columns:58px minmax(0,1fr)!important}.barcodeVisual{display:none!important}
}