/* BUILD198 — approved compact cashier UI.
   Desktop-first auto-fit layout: all transaction/action buttons remain visible without page scrolling.
   Only the cart item list may scroll internally when a sale has many lines. */
:root{
  --b198-green-950:#043d26;
  --b198-green-900:#055331;
  --b198-green-800:#07683c;
  --b198-green-700:#0a844a;
  --b198-green-100:#e9f7ee;
  --b198-surface:#ffffff;
  --b198-bg:#f4f8f5;
  --b198-line:#d7e5dc;
  --b198-text:#10261a;
  --b198-muted:#687970;
  --b198-blue:#1477d4;
  --b198-navy:#244c7d;
  --b198-teal:#0aa6a7;
  --b198-cyan:#078ca8;
  --b198-orange:#e87905;
  --b198-gold:#d59a00;
  --b198-purple:#6445bc;
  --b198-violet:#7b3fe4;
  --b198-red:#d62c31;
  --b198-magenta:#b92e77;
  --b198-gray:#69736e;
  --b198-rail:clamp(390px,29vw,485px);
}

/* POS owns one viewport: browser page itself never needs to scroll. */
body:has(main.posScreen),body:has(main.posScreen) #app{height:100dvh!important;min-height:0!important;overflow:hidden!important;background:var(--b198-bg)!important}
#app:has(main.posScreen) header{height:54px!important;min-height:54px!important;padding:6px 14px!important;background:linear-gradient(90deg,#043d26,#06653a)!important;box-shadow:0 2px 10px rgba(3,55,32,.18)!important}
#app:has(main.posScreen) header strong{font-size:13px!important}
#app:has(main.posScreen) .headerUser{gap:8px!important}
#app:has(main.posScreen) .logoutBtn{min-height:36px!important;padding:6px 12px!important;border-radius:9px!important;font-size:10px!important}
#app:has(main.posScreen) .annliemart-pos-clock{padding:5px 9px!important;font-size:10px!important}
#app:has(main.posScreen) .annliemart-pos-clock .clock-time{font-size:11px!important}
#app:has(main.posScreen) .annliemart-pos-clock .clock-date{font-size:9px!important}

main.posScreen{height:calc(100dvh - 80px)!important;min-height:0!important;max-width:none!important;width:100%!important;margin:0!important;padding:7px 10px 6px!important;display:flex!important;flex-direction:column!important;gap:6px!important;overflow:hidden!important;background:var(--b198-bg)!important;box-sizing:border-box!important}

/* Greeting card — compact, modern, still easy to read. */
.posScreen .cashier-greeting{position:relative!important;flex:0 0 auto!important;min-height:54px!important;margin:0!important;padding:8px 14px 8px 64px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;border:1px solid var(--b198-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 2px 7px rgba(5,72,41,.035)!important}
.posScreen .cashier-greeting::before{content:"●";position:absolute;left:17px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e6f5eb;color:#087643;font-size:16px;box-shadow:inset 0 0 0 1px #cbe5d4}
.posScreen .cashier-greeting .greeting-title{font-size:17px!important;line-height:1.1!important;color:#10261a!important}
.posScreen .cashier-greeting .greeting-sub{margin:3px 0 0!important;font-size:9px!important;line-height:1.1!important;letter-spacing:.45px!important;color:#087643!important}

/* Terminal/status row */
.posScreen .posHeading{flex:0 0 auto!important;min-height:43px!important;margin:0!important;padding:6px 9px!important;border:1px solid var(--b198-line)!important;border-radius:11px!important;background:#fff!important;box-shadow:none!important}
.posScreen .posHeading>div:first-child{gap:8px!important}
.posScreen .posHeading .pageTitle{font-size:14px!important;line-height:1!important;color:#0a3d25!important}
.posScreen .posHeading>div:first-child>span{font-size:9px!important;color:#078042!important}
.posScreen .posStatusBar{gap:5px!important}
.posScreen .posStatusBar>span{min-width:96px!important;padding:5px 8px!important;border:1px solid #dce8e1!important;border-radius:8px!important;background:#f8fbf9!important}
.posScreen .posStatusBar small{font-size:6.5px!important;letter-spacing:.6px!important}
.posScreen .posStatusBar b{font-size:8.5px!important;margin-top:1px!important}

/* Search/customer toolbar */
.posScreen .posToolbar{flex:0 0 auto!important;grid-template-columns:minmax(300px,1fr) minmax(180px,250px) 112px 126px!important;gap:6px!important;margin:0!important;padding:6px!important;border:1px solid var(--b198-line)!important;border-radius:11px!important;background:#fff!important;box-shadow:none!important}
.posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{min-height:38px!important;height:38px!important;border-radius:8px!important;font-size:10px!important;font-weight:850!important}
.posScreen .posToolbar input{padding:0 11px!important;background:#fbfdfc!important;border-color:#bfd2c6!important}
.posScreen .posToolbar button{background:#edf5f0!important;color:#173c29!important;border:1px solid #d9e7df!important}
.posScreen .posToolbar button:hover{background:#e4f1e8!important}
.posSearchResults{max-height:min(330px,45dvh)!important}

/* Promo information must not steal cashier space. */
.posScreen .promoPosBanner{flex:0 0 auto!important;min-height:0!important;margin:0!important;padding:4px 8px!important;border-radius:8px!important;font-size:8px!important;line-height:1.1!important}

/* Main cashier canvas */
.posScreen .posGrid.posCartOnly{flex:1 1 0!important;height:auto!important;min-height:0!important;margin:0!important;display:block!important;overflow:hidden!important}
.posScreen .cartPanel{--rail:var(--b198-rail);position:relative!important;height:100%!important;min-height:0!important;margin:0!important;padding:8px!important;display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;gap:5px!important;border:1px solid var(--b198-line)!important;border-radius:13px!important;background:#fff!important;box-shadow:0 2px 7px rgba(5,72,41,.035)!important;overflow:hidden!important}
.cartPanel>h2{height:25px!important;margin:0 calc(var(--rail) + 10px) 0 0!important;padding:0 4px!important;display:flex!important;align-items:center!important;color:#08623a!important;font-size:14px!important;font-weight:950!important;letter-spacing:.35px!important}
.cartPanel>h2::before{content:"▰";margin-right:7px;color:#078043;font-size:13px}
.cartListHeader,.cartItemsScroll,.cartFixedFooter{margin-right:calc(var(--rail) + 10px)!important}
.cartListHeader{min-height:30px!important;padding:6px 10px!important;border:1px solid #e0eae4!important;border-radius:7px!important;background:#f7faf8!important;font-size:7px!important}
.cartItemsScroll{min-height:0!important;padding:0!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable!important;overscroll-behavior:contain!important}
.cartItemsScroll::-webkit-scrollbar{width:7px}.cartItemsScroll::-webkit-scrollbar-thumb{background:#c5d8cc;border-radius:9px}
.emptyCartState{height:100%!important;min-height:0!important;padding:8px!important;gap:3px!important;border:1px dashed #d1e3d7!important;border-radius:9px!important;background:#fbfdfc!important}
.emptyCartIcon{width:46px!important;height:46px!important;border-radius:50%!important;font-size:25px!important}
.emptyCartState strong{font-size:17px!important}.emptyCartState>span{font-size:10px!important}.emptyCartState>small{font-size:8px!important}.emptyCartTips{margin-top:5px!important}.emptyCartTips span{padding:3px 6px!important;font-size:6.5px!important}

/* Cart rows remain readable while consuming less height. */
.cartRow{min-height:52px!important;margin:0 0 4px!important;padding:5px 7px!important;border-radius:8px!important}
.cartItemName{font-size:11px!important}.cartItemInfo small,.cartUnitPrice{font-size:7px!important}.cartQtyBtn{width:27px!important;height:27px!important;min-height:27px!important}.cartQtyValue{font-size:11px!important}.cartButtons button{min-height:28px!important;padding:4px 6px!important;font-size:8px!important}.cartItemTotal strong{font-size:11px!important}

/* Left footer: barcode + totals only. Right action rail is pinned to the cart's full height. */
.cartFixedFooter{position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr) clamp(190px,18vw,255px)!important;grid-template-areas:"barcode barcode" "summary total"!important;gap:6px!important;padding:0!important;border:0!important;background:#fff!important}
.barcodeDock{grid-area:barcode!important;min-height:45px!important;margin:0!important;padding:5px!important;grid-template-columns:52px minmax(0,1fr)!important;gap:6px!important;border:1.5px solid #198150!important;border-radius:9px!important;background:#f8fcf9!important;box-shadow:none!important}
.barcodeShortcut{height:33px!important;min-height:33px!important;border-radius:7px!important;background:linear-gradient(180deg,#087445,#055d35)!important;font-size:9px!important}
.barcodeDock input{height:33px!important;min-height:33px!important;padding:0 115px 0 10px!important;border:1px solid #bcd2c4!important;border-radius:7px!important;font-size:12px!important;font-weight:850!important;letter-spacing:.25px!important}
.barcodeInputWrap small{right:8px!important;max-width:105px!important;font-size:7px!important}
.cartSummary{grid-area:summary!important;margin:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
.cartSummary>span{min-height:58px!important;padding:7px 8px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;border:1px solid #dfe9e3!important;border-radius:9px!important;background:#fbfdfc!important}
.cartSummary small{font-size:7px!important}.cartSummary b{margin-top:3px!important;font-size:14px!important}
.cartTotal{grid-area:total!important;min-height:58px!important;margin:0!important;padding:7px 10px!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;border-radius:9px!important;background:linear-gradient(135deg,#05492c,#087743)!important;box-shadow:none!important}
.cartTotal .cartItemCount{display:none!important}.grandTotalLabel{margin:0!important;font-size:7px!important;letter-spacing:.5px!important}.cartTotal strong{min-width:0!important;font-size:clamp(18px,2.3vw,27px)!important;text-align:right!important}

/* Full-height action rail. This is the key to keeping every shortcut visible. */
.checkoutActions{position:absolute!important;top:8px!important;right:8px!important;bottom:8px!important;width:var(--rail)!important;min-width:0!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) auto!important;gap:7px!important;overflow:hidden!important;z-index:2!important;background:#fff!important}
.checkoutGroup{min-height:0!important;margin:0!important;padding:23px 7px 7px!important;border:1px solid #dce8e1!important;border-radius:10px!important;background:#fbfdfc!important;box-shadow:none!important;overflow:hidden!important}
.checkoutGroup .groupLabel{top:7px!important;left:9px!important;color:#3f6651!important;font-size:7px!important;letter-spacing:.65px!important}
.checkoutGroup.shortcutGroup{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(31px,1fr)!important;gap:5px!important;align-content:stretch!important}
.checkoutGroup.utilityGroup{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:36px!important;gap:5px!important;align-content:start!important}
.posScreen .checkoutActions .posBtn{width:100%!important;min-width:0!important;min-height:31px!important;height:auto!important;margin:0!important;padding:4px 5px!important;border:0!important;border-radius:7px!important;color:#fff!important;font-size:9px!important;font-weight:950!important;line-height:1!important;letter-spacing:.1px!important;box-shadow:none!important;text-shadow:0 1px 0 rgba(0,0,0,.08)!important;white-space:normal!important;overflow:hidden!important}
.posScreen .checkoutActions .posBtn small{display:block!important;margin:0 0 2px!important;color:rgba(255,255,255,.86)!important;font-size:6.5px!important;line-height:1!important}
.posScreen .checkoutActions .posBtn:hover{filter:brightness(1.04)!important}.posScreen .checkoutActions .posBtn:active{filter:brightness(.96)!important}
.posScreen .checkoutActions .posBtn.selected{outline:2px solid #ffc62e!important;outline-offset:-1px!important}

/* Approved professional color palette. */
.posScreen .btnCash{background:linear-gradient(135deg,#078444,#129b57)!important}
.posScreen .btnGcash{background:linear-gradient(135deg,#167ad6,#0d69bf)!important}
.posScreen .btnMaya{background:linear-gradient(135deg,#0bb4aa,#099794)!important}
.posScreen .btnBank{background:linear-gradient(135deg,#315d8c,#244a78)!important}
.posScreen .btnCredit{background:linear-gradient(135deg,#eb8705,#df6d03)!important}
.posScreen .btnSplit{background:linear-gradient(135deg,#684cc1,#5438a6)!important}
.posScreen .btnHold{background:linear-gradient(135deg,#dda607,#c98d00)!important}
.posScreen .btnRecall{background:linear-gradient(135deg,#0798ae,#087e9c)!important}
.posScreen .btnRetail{background:linear-gradient(135deg,#2381df,#136fc9)!important}
.posScreen .btnWholesale{background:linear-gradient(135deg,#774ed0,#623bb8)!important}
.posScreen .btnDeposit{background:linear-gradient(135deg,#8a43e6,#7338d0)!important}
.posScreen .btnInquiry{background:linear-gradient(135deg,#096b43,#075b39)!important}
.posScreen .btnDisplay{background:linear-gradient(135deg,#285797,#21487e)!important}
.posScreen .btnDiscount{background:linear-gradient(135deg,#c23b7e,#a92d6c)!important}
.posScreen .btnExpense{background:linear-gradient(135deg,#8345b6,#6c379e)!important}
.posScreen .btnLoad{background:linear-gradient(135deg,#119da4,#0b858e)!important}
.posScreen .btnClear{background:linear-gradient(135deg,#75807a,#616b66)!important}
.posScreen .btnVoid{background:linear-gradient(135deg,#e2383d,#c9272d)!important}

/* Footer bar like the approved mockup. */
body:has(main.posScreen) .jimboy-credit{left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100%!important;height:26px!important;justify-content:center!important;margin:0!important;background:linear-gradient(90deg,#04452a,#07663a)!important;color:#d8f3e3!important;font-size:9px!important;z-index:9998!important}
body:has(main.posScreen) .jimboy-credit .copyright-circle{width:14px!important;height:14px!important;font-size:8px!important}

/* Subtle LIVE blink remains visible but does not animate large UI areas. */
.networkBadge.networkOnline i,.d1AutoLiveBadge::before{will-change:opacity!important}

/* Auto-fit shorter desktop monitors. */
@media (max-height:780px) and (min-width:951px){
  main.posScreen{gap:4px!important;padding-top:4px!important}
  .posScreen .cashier-greeting{min-height:43px!important;padding-top:5px!important;padding-bottom:5px!important}.posScreen .cashier-greeting::before{width:29px;height:29px}.posScreen .cashier-greeting .greeting-title{font-size:14px!important}.posScreen .cashier-greeting .greeting-sub{font-size:7.5px!important}
  .posScreen .posHeading{min-height:36px!important;padding:4px 7px!important}.posScreen .posHeading .pageTitle{font-size:12px!important}.posScreen .posStatusBar>span{padding:3px 6px!important;min-width:86px!important}.posScreen .posStatusBar b{font-size:7.5px!important}
  .posScreen .posToolbar{padding:4px!important}.posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{height:32px!important;min-height:32px!important;font-size:8px!important}
  .checkoutGroup{padding-top:19px!important}.checkoutGroup .groupLabel{top:5px!important}.checkoutGroup.shortcutGroup{gap:4px!important}.checkoutGroup.utilityGroup{grid-auto-rows:30px!important;gap:4px!important}.posScreen .checkoutActions .posBtn{min-height:27px!important;font-size:7.5px!important;padding:2px 3px!important}.posScreen .checkoutActions .posBtn small{font-size:5.5px!important}
  .barcodeDock{min-height:39px!important}.barcodeDock input,.barcodeShortcut{height:29px!important;min-height:29px!important}.cartSummary>span,.cartTotal{min-height:48px!important}.cartSummary b{font-size:11px!important}.cartTotal strong{font-size:20px!important}
  .emptyCartIcon{width:38px!important;height:38px!important;font-size:21px!important}.emptyCartState strong{font-size:14px!important}.emptyCartTips{display:none!important}
}

@media (max-height:670px) and (min-width:951px){
  .posScreen .cashier-greeting{display:none!important}
  .posScreen .posHeading{min-height:34px!important}
  .posScreen .promoPosBanner{display:none!important}
  .checkoutGroup.utilityGroup{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:27px!important}
  .checkoutGroup.shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:minmax(25px,1fr)!important}
  .cartSummary>span,.cartTotal{min-height:42px!important;padding:4px 6px!important}
}

/* Narrow screens fall back to stacked layout; desktop no-scroll rule does not trap the user. */
@media (max-width:950px){
  body:has(main.posScreen),body:has(main.posScreen) #app{height:auto!important;overflow:auto!important}
  #app:has(main.posScreen) header{height:auto!important;min-height:58px!important}
  main.posScreen{height:auto!important;min-height:calc(100dvh - 58px)!important;overflow:visible!important;padding-bottom:36px!important}
  .posScreen .posGrid.posCartOnly{overflow:visible!important}
  .posScreen .cartPanel{height:auto!important;min-height:620px!important;display:block!important;overflow:visible!important}
  .cartPanel>h2,.cartListHeader,.cartItemsScroll,.cartFixedFooter{margin-right:0!important}
  .cartItemsScroll{max-height:45dvh!important}
  .checkoutActions{position:static!important;width:100%!important;margin-top:7px!important;display:grid!important;grid-template-columns:1fr!important;overflow:visible!important}
  .checkoutGroup.shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}.checkoutGroup.utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cartFixedFooter{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"barcode" "summary" "total" "actions"!important}
  .posScreen .posToolbar{grid-template-columns:1fr 1fr!important}
}

@media(prefers-reduced-motion:reduce){.networkBadge.networkOnline i,.d1AutoLiveBadge::before{animation:none!important;opacity:1!important}}