/* BUILD208 — exact BUILD120 POS terminal appearance on the D1 + Supabase dual-server build.
   POS UI only. Live Sales, Branches, Cashier, D1 and newer transaction logic remain intact. */

/* The old BUILD120 POS did not use the newer cashier greeting card. */
.posScreen .cashier-greeting{display:none!important}

/* Restore the original clean cashier viewport. */
body:has(main.posScreen),body:has(main.posScreen) #app{
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
}
#app:has(main.posScreen)>header{
  min-height:54px!important;
  height:54px!important;
  padding:8px 18px!important;
}
main.posScreen{
  height:calc(100dvh - 54px)!important;
  min-height:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:10px 12px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  overflow:hidden!important;
  background:#f7faf8!important;
}

/* BUILD120 terminal heading/status row. */
.posScreen .posHeading{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  min-height:0!important;
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.posScreen .posHeading>div:first-child{display:flex!important;align-items:baseline!important;gap:10px!important;white-space:nowrap!important}
.posScreen .posHeading .pageTitle{margin:0!important;font-size:clamp(22px,1.4vw + 14px,34px)!important;color:#052e1b!important;letter-spacing:-.4px!important}
.posScreen .posHeading>div:first-child>span{color:#08733d!important;font-size:12px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.7px!important}
.posScreen .posStatusBar{display:flex!important;justify-content:flex-end!important;gap:7px!important;min-width:0!important}
.posScreen .posStatusBar>span{min-width:105px!important;padding:7px 11px!important;border:1px solid #d7e5dc!important;border-radius:10px!important;background:#fff!important;box-shadow:0 3px 10px rgba(5,46,27,.04)!important}
.posScreen .posStatusBar small{display:block!important;color:#75847b!important;font-size:8px!important;font-weight:900!important;letter-spacing:.8px!important}
.posScreen .posStatusBar b{display:block!important;margin-top:2px!important;max-width:160px!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#083820!important;font-size:11px!important;white-space:nowrap!important}

/* Old BUILD120 search/customer toolbar. */
.posScreen .posToolbar{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:flex-end!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0 0 10px!important;
  padding:10px!important;
  border:1px solid #d8e4dc!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(5,46,27,.06)!important;
}
.posScreen .posSearchWrap{position:relative!important;flex:1 1 360px!important;min-width:240px!important;z-index:12!important}
.posScreen .posToolbar input,.posScreen .posToolbar select{min-height:46px!important;height:auto!important;border:1px solid #b9d0c1!important;border-radius:8px!important;color:#10291b!important;font-size:14px!important;font-weight:800!important}
.posScreen .posToolbar select{flex:0 1 230px!important;max-width:100%!important}
.posScreen .posToolbar button{min-height:46px!important;height:auto!important;padding:9px 13px!important;border-radius:8px!important;font-size:12px!important;font-weight:800!important}

/* Cart returns to the wide BUILD120 panel; no side shortcut rail. */
.posScreen .posGrid.posCartOnly{
  flex:1 1 auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:0!important;
  margin:0!important;
  overflow:hidden!important;
}
.posScreen .cartPanel{
  position:static!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:16px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid #d8e4dc!important;
  border-top:5px solid #e2a72c!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(5,46,27,.08)!important;
}
.posScreen .cartPanel>h2{
  flex:0 0 auto!important;
  height:auto!important;
  margin:0 0 8px!important;
  padding:0!important;
  color:#052e1b!important;
  font-size:18px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
}
.posScreen .cartPanel>h2::before{content:none!important}
.posScreen .cartPanel>h2,.posScreen .cartListHeader,.posScreen .cartItemsScroll,.posScreen .cartFixedFooter{margin-right:0!important}
.posScreen .cartListHeader{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 108px 120px auto!important;
  gap:10px!important;
  min-height:0!important;
  padding:7px 14px!important;
  border:0!important;
  border-radius:9px!important;
  background:#edf5f0!important;
  color:#52665a!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.7px!important;
}
.posScreen .cartListHeader span:nth-child(2){text-align:center!important}
.posScreen .cartListHeader span:nth-child(3),.posScreen .cartListHeader span:nth-child(4){text-align:right!important}
.posScreen .cartItemsScroll{
  flex:1 1 auto!important;
  min-height:80px!important;
  height:auto!important;
  padding:2px 4px 8px 0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

/* Old cart rows. */
.posScreen .cartRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 108px 120px auto!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  min-height:0!important;
  margin:7px 2px!important;
  padding:12px!important;
  border:1px solid #dce6df!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#ffffff,#f7faf8)!important;
  box-shadow:0 5px 14px rgba(5,46,27,.07)!important;
}
.posScreen .cartItemInfo{display:flex!important;flex-direction:column!important;min-width:0!important;gap:3px!important}
.posScreen .cartItemName{font-size:15px!important;line-height:1.25!important;color:#052e1b!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
.posScreen .cartItemInfo small{font-size:10px!important;color:#6b7a72!important;font-weight:700!important}
.posScreen .cartUnitPrice{font-size:11px!important;color:#2d6b4b!important;font-weight:800!important}
.posScreen .cartQtyBox{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}
.posScreen .cartQtyBtn{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:9px!important;font-size:20px!important;font-weight:900!important;background:#eaf3ed!important;color:#075c35!important;border:1px solid #c9dccf!important}
.posScreen .cartQtyValue{min-width:24px!important;text-align:center!important;font-size:16px!important;color:#052e1b!important}
.posScreen .cartItemTotal{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:2px!important;white-space:nowrap!important}
.posScreen .cartItemTotal small{font-size:8px!important;letter-spacing:.8px!important;color:#75857b!important;font-weight:900!important}
.posScreen .cartItemTotal strong{font-size:16px!important;color:#052e1b!important}
.posScreen .cartButtons{display:flex!important;gap:4px!important;justify-content:flex-end!important;flex-wrap:wrap!important}
.posScreen .cartButtons button{min-width:34px!important;min-height:34px!important;height:auto!important;padding:5px 8px!important;border-radius:8px!important;font-size:10px!important;font-weight:900!important}

/* Restore the BUILD120 fixed cart footer order: F12 -> summary -> total -> buttons. */
.posScreen .cartFixedFooter{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:8px 0 0!important;
  display:block!important;
  overflow:visible!important;
  border-top:2px solid #d8e4dc!important;
  background:#fff!important;
  box-shadow:0 -8px 18px rgba(5,46,27,.07)!important;
}
.posScreen .barcodeDock{
  display:grid!important;
  grid-template-columns:55px minmax(180px,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  min-height:0!important;
  height:auto!important;
  margin:0 0 7px!important;
  padding:7px!important;
  border:2px solid #17372a!important;
  border-radius:12px!important;
  background:#f1f6f3!important;
  box-shadow:none!important;
}
.posScreen .barcodeShortcut{height:43px!important;min-height:43px!important;display:grid!important;place-items:center!important;border-radius:8px!important;background:#0b5d2f!important;color:#fff!important;font-size:13px!important;font-weight:900!important}
.posScreen .barcodeInputWrap{position:relative!important;height:auto!important;min-height:0!important}
.posScreen .barcodeDock input{width:100%!important;height:auto!important;min-height:43px!important;padding:8px 150px 8px 12px!important;border:2px solid #263c49!important;border-radius:9px!important;background:#fff!important;color:#111!important;font-size:18px!important;font-weight:900!important;letter-spacing:1px!important}
.posScreen .barcodeInputWrap small{position:absolute!important;right:11px!important;top:50%!important;transform:translateY(-50%)!important;max-width:140px!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#66776c!important;font-size:9px!important;font-weight:900!important;white-space:nowrap!important}

.posScreen .cartSummary{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 7px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.posScreen .cartSummary>span,.posScreen .cartSummary>label{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;height:auto!important;min-height:0!important;padding:8px 10px!important;border:1px solid #dbe7df!important;border-radius:9px!important;background:#f8fbf9!important}
.posScreen .cartSummary small{color:#65766c!important;font-size:8px!important;font-weight:900!important;letter-spacing:.6px!important;text-align:left!important}
.posScreen .cartSummary b{margin:0!important;color:#183b28!important;font-size:12px!important}.posScreen .cartAmountBox{margin:0!important}.posScreen .cartAmountBox input{width:100%!important;min-width:0!important;border:0!important;background:transparent!important;outline:none!important;text-align:right!important;font-size:15px!important;font-weight:900!important;color:#183b28!important;padding:0!important}.posScreen .cartAmountBox input::placeholder{color:#8aa092!important;opacity:1!important}
.posScreen .cartSummary .summaryDiscount{color:#b62c31!important}

.posScreen .cartTotal{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  height:auto!important;
  min-height:66px!important;
  margin:0!important;
  padding:11px 16px!important;
  border-radius:11px!important;
  background:linear-gradient(100deg,#052e1b,#075c31)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(5,46,27,.18)!important;
}
.posScreen .cartItemCount{display:flex!important;align-items:center!important;gap:7px!important;margin-right:auto!important;padding:7px 11px!important;border-radius:10px!important;background:#e2a72c!important;color:#171204!important}
.posScreen .cartItemCount small{font-size:9px!important;font-weight:900!important}
.posScreen .cartItemCount b{font-size:21px!important}
.posScreen .grandTotalLabel{margin-left:auto!important;font-size:12px!important;font-weight:900!important;letter-spacing:.8px!important}
.posScreen .cartTotal strong{min-width:155px!important;text-align:right!important;font-size:clamp(26px,2.2vw,34px)!important;line-height:1!important}

/* Restore old bottom horizontal action groups. */
.posScreen .checkoutActions{
  position:sticky!important;
  top:auto!important;
  right:auto!important;
  bottom:0!important;
  left:auto!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(720px,3fr) minmax(270px,1fr)!important;
  grid-template-rows:auto!important;
  gap:8px!important;
  margin:7px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  background:#fff!important;
  z-index:3!important;
}
.posScreen .checkoutGroup{
  position:relative!important;
  min-height:0!important;
  margin:0!important;
  padding:21px 7px 7px!important;
  display:grid!important;
  gap:6px!important;
  border:1px solid #d8e4dc!important;
  border-radius:13px!important;
  background:#f7faf8!important;
  overflow:visible!important;
  box-shadow:none!important;
}
.posScreen .checkoutGroup .groupLabel{position:absolute!important;top:5px!important;left:9px!important;color:#5c6e63!important;font-size:9px!important;font-weight:900!important;letter-spacing:1px!important}
.posScreen .checkoutGroup.shortcutGroup{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:auto!important;grid-auto-rows:auto!important;align-content:stretch!important}
.posScreen .checkoutGroup.utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:auto!important;grid-auto-rows:auto!important;align-content:stretch!important}
.posScreen .checkoutGroup.utilityGroup .btnVoid{grid-column:auto!important}
.posScreen .checkoutActions .posBtn{width:100%!important;min-width:0!important;min-height:54px!important;height:auto!important;margin:0!important;padding:7px 6px!important;border:0!important;border-radius:10px!important;color:#fff!important;font-size:13px!important;font-weight:900!important;line-height:1.05!important;display:block!important;box-shadow:0 3px 8px rgba(0,0,0,.16)!important;white-space:normal!important;overflow:visible!important}
.posScreen .checkoutActions .posBtn small{display:block!important;min-width:0!important;margin:0 0 4px!important;padding:0!important;border-radius:0!important;background:transparent!important;color:rgba(255,255,255,.78)!important;font-size:8px!important;font-weight:900!important;letter-spacing:.5px!important}
.posScreen .checkoutActions .posBtn:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important}
.posScreen .checkoutActions .posBtn:active{transform:translateY(1px)!important;box-shadow:none!important}
.posScreen .checkoutActions .posBtn.selected{outline:3px solid #f5c542!important;outline-offset:1px!important;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,0,0,.2)!important}
.posScreen .btnCash{background:#118847!important}.posScreen .btnGcash{background:#0876d1!important}.posScreen .btnMaya{background:#00a8a8!important}.posScreen .btnBank{background:#25476f!important}.posScreen .btnCredit{background:#d97809!important}.posScreen .btnSplit{background:#684cc1!important}.posScreen .btnHold{background:#c28b00!important;color:#171204!important}.posScreen .btnRecall{background:#0086a8!important}.posScreen .btnRetail{background:#1473e6!important}.posScreen .btnWholesale{background:#7048c8!important}.posScreen .btnDeposit{background:#7b3fe4!important}.posScreen .btnDisplay{background:#4a57b8!important}.posScreen .btnDiscount{background:#a33d96!important}.posScreen .btnExpense{background:#7d5420!important}.posScreen .btnLoad{background:#119da4!important}.posScreen .btnClear{background:#63726a!important}.posScreen .btnVoid{background:#c52f35!important}

/* Keep the footer credit tiny so it does not change the restored POS geometry. */
body:has(main.posScreen) .jimboy-credit{height:18px!important;min-height:18px!important;font-size:7px!important;opacity:.82!important}

/* Smaller desktop/laptop: preserve old look but tighten just enough to remain usable. */
@media (max-width:1180px) and (min-width:901px){
  .posScreen .posHeading{align-items:flex-start!important}
  .posScreen .posStatusBar>span{min-width:88px!important;padding:7px!important}
  .posScreen .cartListHeader{grid-template-columns:minmax(110px,1fr) 62px 86px!important}
  .posScreen .cartListHeader span:last-child{display:none!important}
  .posScreen .cartRow{grid-template-columns:minmax(110px,1fr) 62px 86px!important}
  .posScreen .cartButtons{grid-column:1/-1!important}
  .posScreen .checkoutActions{grid-template-columns:1fr 2fr!important}
  .posScreen .checkoutGroup.shortcutGroup{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .posScreen .checkoutGroup.utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{font-size:11px!important;min-height:48px!important}
}

/* Short-height screens: old layout retained, only heights condensed. */
@media (min-width:901px) and (max-height:760px){
  #app:has(main.posScreen)>header{height:48px!important;min-height:48px!important;padding:5px 14px!important}
  main.posScreen{height:calc(100dvh - 48px)!important;padding:6px 8px 8px!important}
  .posScreen .posHeading{margin-bottom:5px!important}
  .posScreen .posHeading .pageTitle{font-size:20px!important}
  .posScreen .posStatusBar>span{padding:4px 7px!important}.posScreen .posStatusBar b{font-size:9px!important}
  .posScreen .posToolbar{padding:5px!important;margin-bottom:5px!important}
  .posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{min-height:36px!important;font-size:10px!important}
  .posScreen .cartPanel{padding:8px!important;border-radius:11px!important}
  .posScreen .cartPanel>h2{font-size:15px!important;margin-bottom:4px!important}
  .posScreen .cartListHeader{padding:4px 9px!important;font-size:7px!important}
  .posScreen .cartRow{margin:3px 2px!important;padding:6px!important;grid-template-columns:minmax(0,1fr) 86px 100px auto!important}
  .posScreen .cartItemName{font-size:12px!important}.posScreen .cartQtyBtn{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;font-size:16px!important}.posScreen .cartButtons button{min-height:28px!important}
  .posScreen .cartFixedFooter{padding-top:5px!important}
  .posScreen .barcodeDock{padding:4px!important;margin-bottom:4px!important}.posScreen .barcodeShortcut{height:34px!important;min-height:34px!important}.posScreen .barcodeDock input{min-height:34px!important;font-size:14px!important}
  .posScreen .cartSummary{gap:4px!important;margin-bottom:4px!important}.posScreen .cartSummary>span{padding:5px 7px!important}
  .posScreen .cartTotal{min-height:52px!important;padding:7px 11px!important}.posScreen .cartItemCount{padding:4px 8px!important}.posScreen .cartItemCount b{font-size:17px!important}.posScreen .cartTotal strong{font-size:24px!important}
  .posScreen .checkoutActions{gap:4px!important;margin-top:4px!important}.posScreen .checkoutGroup{padding:17px 4px 4px!important;gap:3px!important}.posScreen .checkoutActions .posBtn{min-height:38px!important;padding:4px!important;font-size:10px!important}.posScreen .checkoutActions .posBtn small{font-size:7px!important;margin-bottom:2px!important}
}

/* Tablet/mobile follows the old BUILD120 stacked behavior. */
@media (max-width:900px){
  body:has(main.posScreen),body:has(main.posScreen) #app{height:auto!important;min-height:100dvh!important;overflow:auto!important}
  main.posScreen{height:auto!important;min-height:calc(100dvh - 60px)!important;overflow:visible!important;padding:8px!important}
  .posScreen .posHeading{display:none!important}
  .posScreen .posToolbar{display:grid!important;grid-template-columns:78px 1fr 1fr!important;gap:6px!important;padding:6px!important}
  .posScreen .posSearchWrap{grid-column:1/-1!important;width:100%!important;min-width:0!important}
  .posScreen .posToolbar input{width:100%!important;min-width:0!important}
  .posScreen .posToolbar select,.posScreen .posToolbar button{width:100%!important;min-width:0!important;min-height:40px!important;padding:8px 5px!important;font-size:11px!important}
  .posScreen .posGrid.posCartOnly{display:block!important;height:auto!important;overflow:visible!important}
  .posScreen .cartPanel{height:auto!important;min-height:600px!important;overflow:visible!important}
  .posScreen .cartItemsScroll{min-height:260px!important;max-height:52dvh!important}
  .posScreen .cartListHeader{display:none!important}
  .posScreen .cartRow{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  .posScreen .cartItemInfo{grid-column:1/2!important}.posScreen .cartQtyBox{grid-column:2/3!important}.posScreen .cartItemTotal{grid-column:1/2!important;align-items:flex-start!important}.posScreen .cartButtons{grid-column:2/3!important}
  .posScreen .checkoutActions{position:static!important;grid-template-columns:1fr!important;gap:4px!important}
  .posScreen .checkoutGroup.shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .checkoutGroup.utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:44px!important;font-size:10px!important}
  body:has(main.posScreen) .jimboy-credit{position:static!important;width:100%!important;transform:none!important}
}
@media (max-width:680px){
  .posScreen .posToolbar{grid-template-columns:1fr 1fr!important}
  .posScreen .posSearchWrap{grid-column:1/-1!important}
  .posScreen .cartPanel{min-height:0!important;padding:10px!important}
  .posScreen .cartItemsScroll{min-height:200px!important;max-height:46dvh!important}
  .posScreen .emptyCartState{min-height:120px!important;padding:10px!important}.posScreen .emptyCartIcon{width:40px!important;height:40px!important;font-size:23px!important}.posScreen .emptyCartState strong{font-size:18px!important}.posScreen .emptyCartTips{display:none!important}
  .posScreen .barcodeDock{grid-template-columns:42px minmax(0,1fr)!important;padding:4px!important}.posScreen .barcodeShortcut{height:36px!important;min-height:36px!important}.posScreen .barcodeDock input{min-height:36px!important;font-size:14px!important;padding-right:8px!important}.posScreen .barcodeInputWrap small{display:none!important}
  .posScreen .cartSummary{gap:3px!important}.posScreen .cartSummary>span,.posScreen .cartSummary>label{display:block!important;text-align:center!important}.posScreen .cartSummary small,.posScreen .cartSummary b{display:block!important;text-align:center!important}.posScreen .cartAmountBox input{text-align:center!important;font-size:13px!important;margin-top:2px!important}
  .posScreen .grandTotalLabel{font-size:9px!important}.posScreen .cartTotal strong{min-width:100px!important;font-size:20px!important}
  .posScreen .checkoutGroup.shortcutGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .checkoutGroup.utilityGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:42px!important;font-size:9px!important}
}

/* BUILD207 adaptation for the newer dual-server cart DOM.
   BUILD201 adds a Total Items / Total Qty bar outside cartFixedFooter and
   adds CHANGE plus a barcode visual. Keep the old BUILD120 visual language. */
.posScreen .cartStatsBar{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 7px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.posScreen .cartStatsBar>span{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  height:auto!important;
  min-height:38px!important;
  padding:8px 12px!important;
  border:1px solid #dbe7df!important;
  border-radius:9px!important;
  background:#f8fbf9!important;
  color:#183b28!important;
  font-size:13px!important;
  font-weight:900!important;
}
.posScreen .cartStatsBar>span b{font-size:11px!important;color:#65766c!important;letter-spacing:.4px!important}

/* Newer dual-server DOM puts GRAND TOTAL first inside the footer.
   Use CSS ordering to reproduce the old visual order: F12, counts, summary, total, actions. */
.posScreen .cartFixedFooter{
  display:flex!important;
  flex-direction:column!important;
}
.posScreen .cartFixedFooter .barcodeDock{order:1!important}
.posScreen .cartFixedFooter .cartSummary{order:2!important}
.posScreen .cartFixedFooter .cartTotal{order:3!important}
.posScreen .cartFixedFooter .checkoutActions{order:4!important}
.posScreen .barcodeVisual{display:none!important}
.posScreen .cartSummary{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* Keep the exact old 4-column cart layout so product names stay wide and horizontal. */
.posScreen .cartListHeader,
.posScreen .cartRow{
  grid-template-columns:minmax(320px,1fr) 108px 120px auto!important;
}
.posScreen .cartListHeader span:nth-child(1){text-align:left!important}
.posScreen .cartListHeader span:nth-child(2){text-align:center!important}
.posScreen .cartListHeader span:nth-child(3),
.posScreen .cartListHeader span:nth-child(4){text-align:right!important}

/* Make the old horizontal action bar fit all newer actions including Price Inquiry. */
.posScreen .checkoutActions{
  grid-template-columns:minmax(0,3fr) minmax(260px,1fr)!important;
}
.posScreen .shortcutGroup{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.posScreen .utilityGroup{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.posScreen .checkoutActions .posBtn{
  min-height:52px!important;
  font-size:11px!important;
}

/* Short desktop screens: preserve old look but fit all controls without page scrolling. */
@media (min-width:951px) and (max-height:760px){
  #app:has(main.posScreen)>header{height:48px!important;min-height:48px!important;padding:6px 14px!important}
  main.posScreen{height:calc(100dvh - 48px)!important;padding:6px 8px 8px!important}
  .posScreen .posHeading{margin-bottom:5px!important}
  .posScreen .posHeading .pageTitle{font-size:20px!important}
  .posScreen .posStatusBar>span{padding:4px 7px!important}
  .posScreen .posToolbar{padding:6px!important;margin-bottom:6px!important}
  .posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{min-height:36px!important;font-size:10px!important}
  .posScreen .cartPanel{padding:9px!important}
  .posScreen .cartPanel>h2{font-size:14px!important;margin-bottom:4px!important}
  .posScreen .cartListHeader{padding:4px 8px!important}
  .posScreen .cartStatsBar{margin-bottom:4px!important;gap:4px!important}
  .posScreen .cartStatsBar>span{min-height:28px!important;padding:4px 8px!important;font-size:11px!important}
  .posScreen .cartFixedFooter{padding-top:5px!important}
  .posScreen .barcodeDock{padding:4px!important;margin-bottom:4px!important}
  .posScreen .barcodeShortcut{height:34px!important;min-height:34px!important}
  .posScreen .barcodeDock input{min-height:34px!important;font-size:14px!important}
  .posScreen .cartSummary{gap:4px!important;margin-bottom:4px!important}
  .posScreen .cartSummary>span{padding:5px 7px!important}
  .posScreen .cartTotal{min-height:52px!important;padding:7px 12px!important}
  .posScreen .cartTotal strong{font-size:24px!important}
  .posScreen .checkoutActions{margin-top:4px!important;gap:4px!important}
  .posScreen .checkoutGroup{padding:18px 5px 5px!important;gap:3px!important}
  .posScreen .checkoutActions .posBtn{min-height:38px!important;font-size:8.5px!important;padding:4px!important}
  .posScreen .checkoutActions .posBtn small{font-size:6px!important}
}

/* Tablet/mobile keeps the responsive fallback from the restored UI. */
@media (max-width:950px){
  .posScreen .cartStatsBar{grid-template-columns:1fr 1fr!important}
  .posScreen .cartListHeader{display:none!important}
  .posScreen .cartRow{grid-template-columns:minmax(0,1fr) auto!important}
  .posScreen .shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}