/* ---- style.css ---- */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  background: #edf7f0;
  color: #173a27;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button,
input,
select {
  font: inherit;
}
button {
  border: 0;
  border-radius: 9px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  background: #e5eee8;
  color: #173a27;
}
button:hover {
  filter: brightness(0.97);
}
.primary {
  background: #168a45;
  color: #fff;
}
.danger {
  background: #c83b3b;
  color: #fff;
}
.gold {
  background: #e2a72c;
  color: #241d08;
}
.full {
  width: 100%;
}
.installAppBtn {
  margin-top: 9px;
}
header .installAppBtn {
  margin-top: 0;
  padding: 7px 10px;
  font-size: 11px;
}
.hidden {
  display: none !important;
}
.loginScreen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #07552b, #168a45, #63bd69);
}
.landingShell{width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);align-items:stretch;border:1px solid rgba(255,255,255,.24);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 32px 90px rgba(0,0,0,.34);backdrop-filter:blur(10px)}
.landingIntro{padding:clamp(34px,6vw,78px);display:flex;flex-direction:column;justify-content:center;color:#fff;background:linear-gradient(145deg,rgba(2,45,24,.88),rgba(13,112,61,.72))}
.landingEyebrow{color:#f0b429;font-size:12px;font-weight:900;letter-spacing:1.4px}.landingIntro h1{margin:13px 0;font-size:clamp(38px,5vw,68px);line-height:1.02;color:#fff}.landingIntro p{max-width:620px;color:#d9f2e4;font-size:clamp(15px,1.4vw,19px);line-height:1.6}.landingFeatures{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.landingFeatures span{padding:9px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;font-weight:800}
.landingShell .loginBox{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;background:#fff;display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,4vw,48px)}
.loginBox {
  width: min(390px, 92vw);
  background: #fff;
  border-radius: 24px;
  padding: 34px 32px 30px;
  box-shadow: 0 24px 70px #001b0e55;
  text-align: center;
}
.loginLogoWrap {
  width: 104px;
  height: 104px;
  margin: -2px auto 14px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: #f4faf6;
  border: 1px solid #d4e8da;
  overflow: hidden;
  box-shadow: 0 10px 24px #0b5d2f22;
}
.loginLogoWrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media(max-width:820px){.landingShell{grid-template-columns:1fr;max-width:500px}.landingIntro{display:none}.landingShell .loginBox{border-radius:24px}.landingShell{border-radius:24px}}
.brand {
  font-size: 25px;
  font-weight: 900;
  color: #168a45;
}
.subbrand {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.2px;
  margin: 6px 0 22px;
  color: #53675a;
}
.loginBox input {
  display: block;
  width: 100%;
  padding: 13px;
  margin: 11px 0;
  border: 1px solid #b7c9bc;
  border-radius: 9px;
  color: #182b20;
  background: #fff;
}
.loginField {
  display: block;
  text-align: left;
  margin-top: 12px;
}
.loginField span {
  display: block;
  margin: 0 2px 6px;
  color: #17281d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
}
.loginField input { margin: 0; min-height: 47px; }
.loginBox #loginBtn {
  min-height: 48px;
  margin-top: 14px;
  font-size: 15px;
  letter-spacing: .5px;
}
.activationLandingLink,.providerLandingLink{display:block;width:100%;border:0;background:transparent;color:#0b5d2f;font-weight:900;font-size:12px;padding:10px 6px;letter-spacing:.35px}
.providerLandingLink{color:#34453a;font-size:11px;padding-top:3px}
.activationTerms{display:flex;align-items:flex-start;gap:9px;margin:12px 0;color:#101a13;font-weight:800}.activationTerms input{width:20px;height:20px;flex:0 0 auto}
.handoffCard{padding:16px;border:2px solid #0b5d2f;border-radius:12px;background:#f1faf4}.handoffCard input{font-weight:900;color:#000;background:#fff}.activationHandoff .balance{background:#fff2d9;padding:11px;border-radius:8px}
.hint {
  font-size: 12px;
  color: #6c7b71;
  margin-top: 13px;
}
.error {
  color: #b92e2e;
  min-height: 18px;
  margin-top: 8px;
}
header {
  height: 64px;
  background: #0b5d2f;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 5;
}
header span {
  font-size: 12px;
  opacity: 1;
  color: #f2fff6;
  font-weight: 800;
  margin-left: 7px;
}
#userBadge {
  font-size: 13px;
  color: #fff;
  font-weight: 800;
}
.headerUser {
  display: flex;
  align-items: center;
  gap: 10px;
}
.networkBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 7px 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3px;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px #fff4;
}
.networkBadge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: networkBlink 1s infinite;
}
.networkOnline { background: #129447; }
.networkOffline { background: #c72f2f; }
.networkQueued { background: #df9815; color: #211700; }
@keyframes networkBlink {
  0%, 45% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  55%, 100% { opacity: .25; box-shadow: 0 0 0 5px transparent; }
}
@media (max-width: 720px) {
  .networkBadge { padding: 6px 8px; }
  .networkBadge span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  header > div:first-child span { display: none; }
  header .installAppBtn { display: none; }
}

/* Build 59 compact, organized financial reports */
.reportPeriod{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 10px;padding:9px 12px;border-left:4px solid #0b5d2f;border-radius:7px;background:#f3f7f4;color:#17271d;font-size:12px}
.reportPeriod span{color:#52685a}
.reportSection{margin:10px 0;border:1px solid #d5e0d8;border-radius:11px;background:#fff;overflow:hidden}
.reportSection>summary{cursor:pointer;list-style:none;padding:11px 13px;background:#edf5ef;color:#07170d;font-size:13px;font-weight:900}
.reportSection>summary::-webkit-details-marker{display:none}.reportSection>summary:before{content:'▾';display:inline-block;margin-right:8px;color:#0b5d2f}.reportSection:not([open])>summary:before{content:'▸'}
.reportSection>summary small{float:right;color:#5c6b61;font-size:10px;font-weight:700}
.reportTableWrap{max-width:100%;overflow:auto;border:1px solid #d8e0da;border-radius:9px;background:#fff;-webkit-overflow-scrolling:touch}
.compactReportTable{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;font-size:11px;font-variant-numeric:tabular-nums}
.compactReportTable th,.compactReportTable td{padding:7px 8px;border-right:1px solid #e4e9e5;border-bottom:1px solid #e1e7e2;white-space:nowrap;text-align:right}
.compactReportTable th:first-child,.compactReportTable td:first-child,.compactReportTable th:nth-child(2),.compactReportTable td:nth-child(2){text-align:left}
.compactReportTable thead th{position:sticky;top:0;z-index:2;background:#173f29;color:#fff;font-size:10px;letter-spacing:.02em}
.compactReportTable tbody tr:nth-child(even){background:#f7faf8}.compactReportTable tbody tr:hover{background:#fff6d9}
.compactReportTable tfoot th{position:sticky;bottom:0;z-index:2;background:#dcecdf;color:#07170d;border-bottom:0;font-size:10px}
.compactReportTable small{display:block;margin-top:1px;color:#5b6a60;font-size:9px;font-weight:700}
.compactReportTable .reportPrimaryAmount{background:#edf8f0;color:#064922}
.compactSalesGraph{max-height:330px;overflow:auto;margin:0;padding:9px 12px;gap:4px}
.compactSalesGraph .salesGraphRow{grid-template-columns:minmax(130px,210px) minmax(130px,1fr) 105px;gap:8px;min-height:28px;padding:2px 0;border-bottom:1px solid #edf1ee}
.compactSalesGraph .salesGraphTrack{height:12px}.compactSalesGraph .salesGraphLabel b{font-size:11px}.compactSalesGraph .salesGraphLabel span{font-size:9px}.compactSalesGraph .salesGraphRow strong{font-size:11px}
.allBranchKpis{margin:8px 0 10px;gap:7px}.allBranchKpis>div{padding:9px 11px;border-radius:9px}.allBranchKpis span{font-size:10px}.allBranchKpis b{font-size:16px}
@media(max-width:720px){.reportPeriod{align-items:flex-start;flex-direction:column;gap:2px}.reportSection>summary small{float:none;display:block;margin:3px 0 0 22px}.compactReportTable{font-size:10px}.compactReportTable th,.compactReportTable td{padding:7px 6px}.compactSalesGraph{max-height:300px}.compactSalesGraph .salesGraphRow{grid-template-columns:minmax(90px,1fr) minmax(75px,1.2fr) 86px}.compactSalesGraph .salesGraphRow strong{grid-column:auto}.allBranchKpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.logoutBtn {
  background: #fff;
  color: #a52323;
  border: 2px solid #fff;
  padding: 8px 12px;
}
.logoutBtn:hover {
  background: #ffe9e9;
}
main {
  max-width: 1800px;
  margin: auto;
  padding: 18px 18px 100px;
}
.pageTitle {
  margin: 0 0 14px;
}
.pageSubtitle {
  margin: -8px 0 16px;
  color: #51665a;
  font-size: 13px;
  font-weight: 700;
}
.taxReportHeader { text-align: center; margin: 8px 0 16px; color: #07170d; }
.taxReportHeader h2 { margin-bottom: 6px; letter-spacing: .4px; }
.taxReportHeader p { line-height: 1.55; }
.taxSection h3 { margin-top: 0; color: #07170d; }
.complianceNote { padding: 13px 15px; border-left: 4px solid #e2a72c; background: #fff8e8; color: #2b250f; font-weight: 700; }
.inventoryGuide { border-left: 5px solid #168a45; color: #17281d; margin-bottom: 14px; line-height: 1.5; }
.purchaseTerminal { width: min(1380px, 94vw); min-width: min(1280px, 94vw); max-height: 92dvh; overflow: auto; padding: clamp(18px,2vw,28px); }
.addPurchaseHero { width:100%; min-height:150px; margin:0 0 16px; display:grid; place-items:center; align-content:center; gap:3px; border:2px solid #0b6a38; border-radius:20px; background:linear-gradient(135deg,#063b27,#108a50); color:#fff; box-shadow:0 12px 28px rgba(5,75,40,.22); }
.addPurchaseHero span { font-size:34px; line-height:1; color:#f0b429; }
.addPurchaseHero strong { font-size:clamp(24px,3vw,38px); letter-spacing:.04em; }
.addPurchaseHero small { color:#d8f3e4; font-size:13px; }
.businessOperationsPanel .historyPanelTitle { align-items:center; }
.businessOperationsPanel .actions { margin-top:14px; }
.purchasePosGrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 14px; margin-top: 16px; }
.purchasePosGrid > section { border: 1px solid #d3e5d8; background: #f8fbf9; border-radius: 14px; padding: 14px; min-width: 0; }
.purchasePosGrid h3 { margin: 0 0 10px; color: #07170d; }
.purchaseScanBar input { width: 100%; min-height: 52px; border: 2px solid #168a45; border-radius: 11px; padding: 12px 14px; font-weight: 800; background: #fff; }
.purchaseEntry { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; align-items: end; margin-top: 12px; }
.purchaseEntry label { min-width: 0; }
.purchaseEntry input { width: 100%; }
.purchaseEntry button { min-height: 47px; }
.purchaseCart { max-height: 590px; overflow: auto; }
.fieldHelp { display: block; margin-top: 5px; color: #52685a; font-size: 11px; font-weight: 700; line-height: 1.35; }
.documentTitlePreview { margin-top: 8px; padding: 9px; border: 1px dashed #789681; background: #fff; color: #000; text-align: center; font-weight: 900; letter-spacing: .5px; }
@media (max-width: 820px) {
  .purchaseTerminal { width:94vw; min-width:0; max-height:90dvh; }
  .purchasePosGrid { grid-template-columns: 1fr; }
  .purchaseEntry { grid-template-columns: 1fr 1fr; }
  .purchaseEntry button { grid-column: 1 / -1; }
}
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.card,
.panel {
  background: #fff;
  border: 1px solid #d7e7dc;
  border-radius: 15px;
  padding: 17px;
  box-shadow: 0 3px 14px #174c2a10;
  margin-bottom: 14px;
}
.kpi {
  font-size: 28px;
  font-weight: 900;
  color: #168a45;
}
.muted {
  color: #708077;
}
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar input,
.toolbar select,
.field,
.form input,
.form select {
  padding: 10px;
  border: 1px solid #bdcabe;
  border-radius: 8px;
  color: #172a20;
  background: #fff;
}
.toolbar input {
  min-width: 250px;
}
.posGrid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 14px;
}
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.product {
  border: 1px solid #dbe8df;
  border-radius: 11px;
  padding: 12px;
  background: #fbfffc;
}
.productName {
  font-weight: 800;
}
.productPrice {
  font-size: 18px;
  font-weight: 900;
  color: #168a45;
  margin: 7px 0;
}
.stock {
  font-size: 12px;
  color: #66776c;
}
.cartRow {
  display: grid;
  grid-template-columns: 1fr 70px 100px 34px;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e2ebe5;
}
.cartRow input {
  width: 100%;
  padding: 7px;
  border: 1px solid #bdcabe;
  border-radius: 7px;
}
.total {
  font-size: 21px;
  font-weight: 900;
  margin-top: 13px;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 13px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 9px;
  border-bottom: 1px solid #e3ebe6;
  text-align: left;
}
th {
  background: #eff8f1;
  color: #0d6332;
}
.paid {
  color: #168a45;
  font-weight: 800;
}
.balance {
  color: #bd2929;
  font-weight: 800;
}
.low {
  background: #fff3f3;
}
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #084f28;
  padding: 8px;
  display: flex;
  gap: 6px;
  overflow: auto;
  z-index: 10;
}
nav button {
  background: #116d37;
  color: #fff;
  white-space: nowrap;
}
.modal {
  position: fixed;
  inset: 0;
  background: #0008;
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 30;
}
.modalBox {
  background: #fff;
  border-radius: 18px;
  border-top: 6px solid #168a45;
  padding: 22px;
  width: min(780px, 96vw);
  max-height: 90vh;
  overflow: auto;
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form label {
  font-size: 12px;
  font-weight: 800;
}
.form input,
.form select {
  display: block;
  width: 100%;
  margin-top: 5px;
}
.receipt {
  max-width: 520px;
  margin: auto;
}
.receipt h2 {
  text-align: center;
}
.receipt .r {
  display: flex;
  justify-content: space-between;
}
.receipt table {
  margin: 10px 0;
}
.saleReceiptScreen {
  width: min(100%, 900px);
  margin: 0 auto;
  color: #163326;
}
.saleReceiptSuccess {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: -22px -22px 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #063b23, #0b7540);
  color: #fff;
}
.saleReceiptSuccess h2,
.saleReceiptSuccess p { margin: 0; }
.saleReceiptSuccess h2 { color: #fff; font-size: 28px; letter-spacing: .5px; }
.saleReceiptSuccess small { color: #f4c33d; font-weight: 900; letter-spacing: 1.1px; }
.saleReceiptSuccess p { margin-top: 3px; color: #d9eee2; }
.saleReceiptCheck {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #f4bd2c;
  color: #123421;
  font-size: 34px;
  font-weight: 1000;
  box-shadow: 0 8px 22px #0003;
}
.saleReceiptLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  gap: 18px;
  align-items: start;
}
.saleReceiptPaper {
  width: 100%;
  padding: 22px;
  border: 1px solid #cbd9d0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(18, 65, 39, .10);
}
.saleReceiptBrand { text-align: center; }
.saleReceiptBrand strong { display: block; font-size: 20px; color: #073f25; }
.saleReceiptBrand span { display: block; margin-top: 4px; color: #5d7165; font-size: 12px; font-weight: 800; }
.saleReceiptRule { margin: 15px 0; border-top: 1px dashed #9fb1a6; }
.saleReceiptMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.saleReceiptMeta span { min-width: 0; }
.saleReceiptMeta small { display: block; color: #6a7a70; font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.saleReceiptMeta b { display: block; margin-top: 2px; overflow-wrap: anywhere; font-size: 12px; }
.saleReceiptItemsHead,
.saleReceiptItem,
.saleReceiptTotalRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.saleReceiptItemsHead { color: #63756a; font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.saleReceiptItem { padding: 9px 0; border-bottom: 1px dotted #d3ddd7; }
.saleReceiptItem:last-child { border-bottom: 0; }
.saleReceiptItem strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.saleReceiptItem small { display: block; margin-top: 3px; color: #68786e; font-size: 10px; }
.saleReceiptItem > b { white-space: nowrap; font-size: 13px; }
.saleReceiptEmpty { padding: 14px 0; color: #6b7a71; text-align: center; }
.saleReceiptTotalRow { padding: 5px 0; }
.saleReceiptTotalRow.grand { padding: 9px 0; color: #063b23; font-size: 22px; font-weight: 1000; }
.saleReceiptTotalRow b { white-space: nowrap; }
.saleReceiptChange,
.saleReceiptBalance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: #f4bd2c;
  color: #18331f;
  font-weight: 1000;
}
.saleReceiptChange strong,
.saleReceiptBalance strong { font-size: 26px; white-space: nowrap; }
.saleReceiptBalance { background: #fff1d8; color: #8a4d00; }
.saleReceiptFooter { margin-top: 18px; color: #607068; font-size: 11px; text-align: center; white-space: pre-wrap; }
.saleReceiptSummary {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px;
  border-radius: 14px;
  background: #062f1d;
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 30px #052e1b30;
}
.saleReceiptSummary > span { color: #c6ddcf; font-size: 9px; font-weight: 900; letter-spacing: .9px; }
.saleReceiptSummary > strong { margin: 8px 0 3px; color: #f4bd2c; font-size: clamp(29px, 4vw, 42px); line-height: 1; white-space: nowrap; }
.saleReceiptSummary > small { font-weight: 900; }
.saleReceiptNotice { margin-top: 14px; color: #ffe4a1; font-size: 11px; line-height: 1.35; }
.saleReceiptNotice:empty { display: none; }
.saleReceiptActions {
  position: sticky;
  bottom: -22px;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  margin: 18px -22px -22px;
  padding: 14px 22px 20px;
  border-top: 1px solid #d6e1da;
  background: #fff;
}
.saleReceiptActions button { min-height: 54px; font-size: 14px; }
@media (max-width: 1000px) {
  .grid4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
  .posGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .grid4 {
    grid-template-columns: 1fr;
  }
  .products {
    grid-template-columns: 1fr;
  }
  .form {
    grid-template-columns: 1fr;
  }
}
@media print {
  header,
  nav,
  .noPrint {
    display: none !important;
  }
  main {
    padding: 0;
  }
  .panel,
  .card {
    box-shadow: none;
    border: 0;
  }
}

.modalBox {
  width: min(1100px, 97vw);
}
.form {
  gap: 14px;
}
.form input,
.form select {
  min-height: 42px;
}
.panel {
  overflow-x: auto;
}
.pricePair {
  display: grid;
  gap: 5px;
  margin: 9px 0;
  font-size: 13px;
}
.pricePair span {
  display: flex;
  justify-content: space-between;
  padding: 5px 7px;
  border-radius: 7px;
  background: #eff8f1;
}
.productActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 9px;
}
.productActions button {
  padding: 8px 6px;
  font-size: 11px;
}
.cartRow {
  grid-template-columns: minmax(140px, 1fr) 70px 100px minmax(170px, auto);
}
.cartRow small {
  display: block;
  color: #168a45;
  font-weight: 800;
  margin-top: 3px;
}
.cartButtons,
.tableActions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cartButtons button,
.tableActions button {
  padding: 7px 8px;
  font-size: 11px;
}
.livePurchase > input {
  width: 100%;
  padding: 13px;
  border: 2px solid #168a45;
  border-radius: 10px;
  font-size: 16px;
}
.purchaseResults {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  margin: 9px 0;
}
.purchaseResult {
  text-align: left;
  display: grid;
  gap: 4px;
  border: 1px solid #c9ddcf;
  background: #fff;
}
.purchaseResult:hover {
  border-color: #168a45;
  background: #eff8f1;
}
.purchaseResult.keyboardSelected { border: 3px solid #0b6b3a; background: #e5f7eb; box-shadow: 0 0 0 3px #b9e8c8; transform: translateY(-1px); }
.purchaseResult small { color: #4c5d52; font-weight: 700; }
.selectedCost { margin-top: 8px; padding: 9px 11px; border-radius: 8px; background: #073b22; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.selectedCost strong { color: #ffd166; font-size: 18px; }
.btnDeposit { background: linear-gradient(135deg,#7c3aed,#a855f7)!important; color:#fff!important; border-color:#6d28d9!important; }
.btnDeposit.selected { box-shadow:0 0 0 4px #d8b4fe!important; }
.depositBillLine { display:flex; justify-content:space-between; gap:10px; color:#6d28d9; font-weight:900; }
.depositTabs { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.depositTabs section { border:1px solid #d9d4e8; border-radius:14px; padding:15px; background:#faf9ff; }
.depositTabs section > button { width:100%; margin-top:8px; }
.depositClaimStatus { display:grid; gap:7px; margin-top:12px; padding:13px; border-radius:11px; }
.depositClaimStatus.active { background:#e7f8ed; border:2px solid #168a45; color:#07582b; }
.depositClaimStatus.claimed { background:#fff0f0; border:2px solid #c62828; color:#8e1010; }
@media(max-width:700px){.depositTabs{grid-template-columns:1fr}}
.transferSelectors { display:grid; grid-template-columns:1fr 1.35fr; gap:14px; }
.transferSelectors section { border:1px solid #d6e2da; border-radius:14px; padding:14px; background:#f8fbf9; min-width:0; }
.transferCheckList { display:grid; gap:6px; max-height:340px; overflow:auto; margin-top:9px; }
.transferCheckList label,.checkAllRow { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid #d9e5dc; border-radius:9px; background:#fff; font-weight:800; }
.transferCheckList label small { margin-left:auto; color:#68776d; }
.transferSuccess { display:grid; gap:6px; padding:13px; margin-top:12px; border:2px solid #168a45; border-radius:11px; background:#e8f8ed; }
@media(max-width:760px){.transferSelectors{grid-template-columns:1fr}.transferCheckList label{align-items:flex-start;flex-wrap:wrap}.transferCheckList label small{width:100%;margin-left:27px}}
.purchaseResult span {
  font-size: 12px;
  color: #66776c;
}
.purchaseResult strong {
  color: #168a45;
}
.selectedProduct {
  padding: 11px;
  border-radius: 9px;
  background: #eff8f1;
  margin-bottom: 10px;
}
.voided {
  opacity: 0.65;
  background: #f1f1f1;
  text-decoration: line-through;
}
.moneyCounter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.moneyCounter label {
  background: #f5faf6;
  border: 1px solid #cfe0d3;
  border-radius: 10px;
  padding: 9px;
  display: grid;
  gap: 5px;
  text-align: center;
  font-weight: 800;
}
.moneyCounter input {
  width: 100%;
  padding: 9px;
  border: 1px solid #b9cabd;
  border-radius: 7px;
  text-align: center;
}
.moneyCounter small {
  color: #168a45;
}
.drawerTotal {
  background: #0b5d2f;
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.cashPayment {
  max-width: 720px;
  margin: auto;
}
.cashPayment h2 {
  text-align: center;
  font-size: 28px;
  margin-top: 0;
}
.cashDue,
.cashChange {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-radius: 12px;
  background: #0b5d2f;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  margin: 10px 0;
}
.cashDue strong,
.cashChange strong {
  font-size: 30px;
}
.cashChange {
  background: #e2a72c;
  color: #241d08;
}
.cashInputLabel {
  display: block;
  font-weight: 900;
  margin: 14px 0;
}
.cashInputLabel input {
  width: 100%;
  margin-top: 6px;
  padding: 16px;
  border: 3px solid #168a45;
  border-radius: 12px;
  font-size: 30px;
  font-weight: 900;
  text-align: right;
}
.tenderButtons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.tenderButtons button {
  min-height: 62px;
  border: 2px solid #b8d2c0;
  background: #f4faf6;
  font-size: 16px;
}
.cashKeypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 420px;
  margin: 14px auto;
}
.cashKeypad button,
.referenceKeypad button {
  min-height: 58px;
  border: 2px solid #c5d7ca;
  background: #fff;
  font-size: 22px;
}
.referenceKeypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 520px;
  margin: 16px auto;
}
.referencePayment .cashInputLabel input {
  text-align: center;
  letter-spacing: 2px;
}
.cashActions {
  justify-content: center;
}
.cashActions button {
  min-height: 54px;
  font-size: 16px;
}
.cashPaymentHeader{text-align:center;margin-bottom:12px}.cashPaymentHeader>span{display:inline-block;padding:5px 10px;border-radius:999px;background:#e6f4eb;color:#08723d;font-size:9px;font-weight:900;letter-spacing:1px}.cashPaymentHeader h2{margin:7px 0 2px}.cashPaymentHeader small{color:#65766c;font-size:11px;font-weight:700}.cashPaymentMessage{min-height:24px;margin:7px 0 0;text-align:center;color:#9b3d06;font-size:13px;font-weight:900}.cashChange{transition:background .16s,color .16s,box-shadow .16s}.cashChange.cashWaiting{background:#e8eeea;color:#344b3d}.cashChange.cashShort{background:#c83238;color:#fff;box-shadow:0 0 0 3px rgba(200,50,56,.12)}.cashChange.cashReady{background:#e2a72c;color:#241d08;box-shadow:0 0 0 3px rgba(226,167,44,.16)}#confirmCashPaymentBtn{min-width:230px;font-size:17px;font-weight:900}#confirmCashPaymentBtn:disabled{background:#aab6ae;color:#eef2ef;cursor:not-allowed;box-shadow:none}.cashKeyboardHint{text-align:center;margin:9px 0 0;color:#65766c;font-size:10px;font-weight:800}
.dialogPanel {
  max-width: 560px;
  margin: auto;
  text-align: center;
  padding: 10px;
}
.dialogPanel h2 {
  margin: 8px 0 14px;
  color: #0b5d2f;
}
.dialogIcon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  background: #168a45;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
}
.confirmPanel .dialogIcon {
  background: #e2a72c;
  color: #241d08;
}
.dialogMessage {
  white-space: pre-wrap;
  background: #f3f8f4;
  border: 1px solid #d1e1d5;
  border-radius: 12px;
  padding: 18px;
  font-size: 17px;
  line-height: 1.5;
}
.dialogActions {
  justify-content: center;
  margin-top: 18px;
}
.dialogActions button {
  min-width: 140px;
  min-height: 52px;
}
.adminPinPanel .cashInputLabel input {
  text-align: center;
  letter-spacing: 8px;
}
.smallKpi {
  font-size: 18px;
}
.permissionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0 18px;
}
.permissionGrid label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid #c9ddce;
  border-radius: 10px;
  background: #f3f8f4;
  font-weight: 750;
}
.permissionGrid input {
  width: 20px;
  height: 20px;
  accent-color: #168a45;
}
.recordCheckbox {
  width: 22px;
  height: 22px;
  accent-color: #168a45;
}
.loginCloudPanel {
  display: grid;
  gap: 9px;
  margin-top: 15px;
  padding: 13px;
  border: 1px solid #c9ddce;
  border-radius: 12px;
  background: #f3f8f4;
}
.loginCloudPanel b {
  color: #0b5d2f;
  font-size: 13px;
}
@media (max-width: 800px) {
  .moneyCounter {
    grid-template-columns: repeat(2, 1fr);
  }
  .tenderButtons {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .permissionGrid {
    grid-template-columns: 1fr;
  }
  .purchaseResults {
    grid-template-columns: 1fr;
  }
  .cartRow {
    grid-template-columns: 1fr 60px 85px;
  }
  .cartButtons {
    grid-column: 1/-1;
  }
  .productActions {
    grid-template-columns: 1fr;
  }
}

/* V34 COMMERCIAL RESPONSIVE UI */
:root {
  --brand-950: #052e1b;
  --brand-900: #064325;
  --brand-800: #075c31;
  --brand-700: #08783d;
  --brand-600: #0a9148;
  --brand-100: #e7f5ec;
  --ink: #101b14;
  --muted-ink: #53645a;
  --line: #cfded4;
  --surface: #ffffff;
  --canvas: #f3f7f4;
  --gold-commercial: #f0b429;
  --danger-commercial: #bd2c2c;
  --shadow-commercial: 0 8px 28px rgba(5, 46, 27, 0.10);
}
html {
  min-width: 320px;
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Aptos", "Inter", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: clamp(14px, 0.25vw + 13px, 16px);
  line-height: 1.42;
}
h1,h2,h3,.pageTitle,.kpi,.brand,.total,strong,b,button { font-family:"Aptos Display","Inter","SF Pro Display","Segoe UI Variable Display","Segoe UI",ui-sans-serif,system-ui,sans-serif; }
h1,h2,h3,.pageTitle { letter-spacing:-.025em; font-weight:800; }
button { letter-spacing:.015em; }
input,select,textarea { font-weight:550; }
table { font-variant-numeric:tabular-nums; }
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: max(16px, 1em);
}
button {
  min-height: 44px;
  border-radius: 10px;
  padding: 10px 15px;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
}
button:active:not(:disabled) {
  transform: translateY(1px) scale(.99);
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(240, 180, 41, .55);
  outline-offset: 2px;
}
button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.primary { background: var(--brand-700); }
.gold { background: var(--gold-commercial); color: #171204; }
.danger { background: var(--danger-commercial); }
.loginScreen {
  min-height: 100dvh;
  padding: 20px;
  background: radial-gradient(circle at 15% 10%, #168a45 0, transparent 34%), linear-gradient(145deg, var(--brand-950), var(--brand-800));
}
.loginBox {
  width: min(460px, 100%);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}
.brand { color: var(--brand-700); letter-spacing: .4px; }
.subbrand { color: var(--muted-ink); font-size: 13px; letter-spacing: .5px; }
.loginBox input,
.toolbar input,
.toolbar select,
.field,
.form input,
.form select,
.form textarea {
  min-height: 46px;
  border: 1px solid #b8cabd;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
header {
  height: auto;
  min-height: 68px;
  gap: 14px;
  padding: 9px clamp(12px, 2vw, 24px);
  background: linear-gradient(90deg, var(--brand-950), var(--brand-800));
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
header strong { letter-spacing: .35px; }
.headerUser { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
main {
  width: min(100%, 1920px);
  padding: clamp(12px, 1.7vw, 26px) clamp(10px, 1.8vw, 28px) 104px;
}
.pageTitle {
  color: var(--brand-950);
  font-size: clamp(22px, 1.4vw + 14px, 34px);
  letter-spacing: -.4px;
}
.card,
.panel {
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-commercial);
}
.panel h2,
.card h2 { color: var(--brand-950); }
.muted { color: var(--muted-ink); }
.grid4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}
.kpi { font-size: clamp(22px, 1.4vw + 12px, 34px); color: var(--brand-700); }
.toolbar {
  align-items: flex-end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}
.toolbar input { min-width: min(270px, 100%); flex: 1 1 230px; }
.toolbar select { flex: 0 1 230px; max-width: 100%; }
.posGrid {
  grid-template-columns: minmax(0, 1.6fr) minmax(370px, .85fr);
  align-items: start;
  gap: clamp(12px, 1.3vw, 22px);
}
.productPanel { min-width: 0; }
.cartPanel {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 180px);
  max-height: calc(100dvh - 190px);
  overflow: hidden;
  border-top: 5px solid var(--gold-commercial);
}
.cartPanel > h2 { flex: 0 0 auto; }
.cartItemsScroll {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 4px;
}
.cartFixedFooter {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  padding-top: 8px;
  background: #fff;
  border-top: 2px solid var(--line);
  box-shadow: 0 -8px 18px rgba(5,46,27,.07);
}
.products {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 11px;
}
.product {
  display: flex;
  flex-direction: column;
  min-height: 205px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(5,46,27,.05);
}
.productName { color: var(--ink); font-size: 15px; }
.productActions { margin-top: auto; }
.productActions button { min-height: 43px; font-size: 12px; }
.cartRow {
  display:grid;
  grid-template-columns:minmax(0,1fr) 108px 120px auto;
  align-items:center;
  gap:10px;
  min-width:0;
  margin:7px 2px;
  padding:12px;
  border:1px solid #dce6df;
  border-radius:14px;
  background:linear-gradient(145deg,#ffffff,#f7faf8);
  box-shadow:0 5px 14px rgba(5,46,27,.07);
}
.cartItemInfo{display:flex;flex-direction:column;min-width:0;gap:3px}
.cartItemName{font-size:15px;line-height:1.25;color:var(--brand-950);white-space:normal;word-break:normal;overflow-wrap:break-word}
.cartItemInfo small{font-size:10px;color:#6b7a72;font-weight:700}
.cartUnitPrice{font-size:11px;color:#2d6b4b;font-weight:800}
.cartQtyBox{display:flex;align-items:center;justify-content:center;gap:6px}
.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:var(--brand-900)!important;border:1px solid #c9dccf!important}
.cartQtyBtn:hover{background:var(--gold-commercial)!important;color:#171204!important}
.cartQtyValue{min-width:24px;text-align:center;font-size:16px;color:var(--brand-950)}
.cartItemTotal{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.cartItemTotal small{font-size:8px;letter-spacing:.8px;color:#75857b;font-weight:900}
.cartItemTotal strong{font-size:16px;color:var(--brand-950)}
.cartButtons{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.cartButtons button{min-width:34px!important;min-height:34px!important;padding:5px 8px!important;border-radius:8px!important;font-size:10px!important;font-weight:900!important}
.cartItemsScroll{padding:2px 4px 8px 0}

.cartTotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 12px;
  background: var(--brand-950);
  color: #fff;
}
.cartTotal strong { font-size: clamp(22px, 2vw, 30px); }
.checkoutActions {
  display: grid;
  grid-template-columns: minmax(720px,3fr) minmax(270px,1fr);
  gap: 8px;
  margin-top: 8px;
}
.checkoutGroup { position:relative; display:grid; gap:6px; padding:20px 7px 7px; border:1px solid var(--line); border-radius:13px; background:#f7faf8; }
.priceGroup { grid-template-columns:repeat(2,minmax(0,1fr)); }
.paymentGroup { grid-template-columns:repeat(5,minmax(0,1fr)); }
.actionGroup { grid-template-columns:repeat(3,minmax(0,1fr)); }
.shortcutGroup { grid-template-columns:repeat(5,minmax(0,1fr)); }
.utilityGroup { grid-template-columns:repeat(2,minmax(0,1fr)); }
.groupLabel { position:absolute; top:5px; left:9px; color:#5c6e63; font-size:9px; font-weight:900; letter-spacing:1px; }
.checkoutActions .posBtn { min-height:48px; padding:8px 6px; border:0; border-radius:10px; color:#fff; font-size:11px; font-weight:900; box-shadow:0 3px 8px rgba(0,0,0,.16); transition:transform .12s,filter .12s,box-shadow .12s; }
.checkoutActions .posBtn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.checkoutActions .posBtn:active { transform:translateY(1px); box-shadow:none; }
.checkoutActions .posBtn.selected { outline:3px solid #f5c542; outline-offset:1px; box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,0,0,.2); }
.btnRetail{background:#1473e6}.btnWholesale{background:#7048c8}.btnCash{background:#118847}.btnGcash{background:#0876d1}.btnMaya{background:#00a8a8}.btnBank{background:#25476f}.btnCredit{background:#d97809}.btnHold{background:#c28b00;color:#171204!important}.btnRecall{background:#0086a8}.btnDisplay{background:#4a57b8}.btnDiscount{background:#a33d96}.btnClear{background:#63726a}.btnVoid{background:#c52f35}
table {
  min-width: 680px;
  font-size: 13px;
}
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--brand-100);
  color: var(--brand-900);
  white-space: nowrap;
}
th, td { padding: 10px; vertical-align: middle; }
.tableActions { min-width: max-content; }
nav {
  min-height: 66px;
  padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(5, 46, 27, .97);
  box-shadow: 0 -6px 22px rgba(0,0,0,.22);
  scrollbar-width: thin;
}
nav button {
  flex: 1 0 auto;
  min-height: 48px;
  padding-inline: 15px;
  border: 1px solid rgba(255,255,255,.13);
  background: var(--brand-800);
}
nav button.active {
  background: var(--gold-commercial);
  color: #171204;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
nav.posNavHidden { display: none; }
.catalogBottomActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.catalogBottomActions button { min-height: 44px; }
.posScreen {
  height: calc(100dvh - 68px);
  padding-bottom: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.posScreen .pageTitle { flex:0 0 auto; margin-bottom:8px; }
.posScreen .posToolbar { flex:0 0 auto; margin-bottom:10px; }
.posScreen .posGrid { flex:1 1 auto; min-height:0; align-items:stretch; }
.posScreen .posGrid.posCartOnly { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
.posScreen .productPanel,
.posScreen .cartPanel { height:100%; max-height:none; margin-bottom:0; overflow:hidden; }
.posScreen .productPanel { display:flex; flex-direction:column; }
.posScreen .productPanel > h2,
.posScreen .catalogBottomActions { flex:0 0 auto; }
.posScreen .products { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; }
.posScreen .cartPanel { position:static; }
.qtyMultiplierButton { min-width:78px; font-weight:900; background:var(--gold-commercial); color:#171204; }
.barcodeDock { display:grid; grid-template-columns:auto minmax(180px,1fr) 82px; gap:7px; align-items:center; padding:7px; margin-bottom:7px; border:2px solid #1b2730; border-radius:12px; background:#eef2f4; }
.barcodeDock > span { padding:0 5px; color:#1b2730; font-size:11px; font-weight:900; white-space:nowrap; }
.barcodeDock input { width:100%; min-height:43px; padding:8px 12px; border:2px solid #263c49; border-radius:9px; background:#fff; color:#111; font-size:18px; font-weight:900; letter-spacing:1px; }
.barcodeDock input:focus { border-color:#118847; box-shadow:0 0 0 3px rgba(17,136,71,.18); outline:0; }
.barcodeDock input.scanError { border-color:#c52f35; background:#fff1f1; }
.posSearchWrap { position:relative; flex:1 1 360px; min-width:240px; z-index:12; }
.posSearchWrap > input { width:100%; }
.posSearchResults { position:absolute; left:0; right:0; top:calc(100% + 4px); max-height:min(430px,60vh); overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 38px rgba(0,0,0,.22); }
.posSearchResults:empty { display:none; }
.posSearchResults > button { width:100%; min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); text-align:left; }
.posSearchResults > button:hover { background:var(--brand-100); }
.posSearchResults > button.active { background:var(--brand-700); color:#fff; box-shadow:inset 5px 0 0 var(--gold-commercial); }
.posSearchResults > button.active small,
.posSearchResults > button.active strong { color:#fff; }
.posSearchResults > button.negativeStock{background:#fff6e8;box-shadow:inset 5px 0 0 #e17a09}.posSearchResults > button.negativeStock small{color:#a14609;font-weight:900}.posSearchResults > button.negativeStock:hover{background:#ffedd1}.posSearchResults > button.negativeStock.active{background:var(--brand-700);box-shadow:inset 5px 0 0 #f5c542}.posSearchResults > button.negativeStock.active small{color:#fff}
.posSearchResults > button span { display:flex; flex-direction:column; min-width:0; }
.posSearchResults small { color:var(--muted-ink); }
.posSearchResults strong { color:var(--brand-700); white-space:nowrap; }
.posSearchEmpty { padding:18px; color:var(--muted-ink); text-align:center; }
.cartItemCount { margin-right:auto; padding:7px 12px; border-radius:10px; background:var(--gold-commercial); color:#171204; font-size:15px; }
.cartItemCount b { font-size:22px; }
.emptyCartState { height:100%; min-height:110px; display:grid; place-items:center; color:var(--muted-ink); font-size:24px; font-weight:900; letter-spacing:2px; }
.priceModeBottom { border:2px solid var(--brand-700); }
.displayAdGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:14px 0; }
.displayAdGrid > div { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#111; }
.displayAdGrid img { width:100%; height:120px; object-fit:cover; display:block; }
.displayAdGrid button { width:100%; border-radius:0; }
.moduleHeader { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; padding:15px 18px; border-radius:16px; background:linear-gradient(120deg,#052e1b,#0b6a38); color:#fff; box-shadow:0 8px 24px rgba(5,46,27,.2); }
.moduleHeader > div { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.moduleHeader .pageTitle { margin:0; color:#fff; }
.moduleActions { justify-content:flex-end; }
.todayBadge { display:inline-flex; align-items:center; min-height:30px; padding:5px 12px; border-radius:999px; background:#f0b429; color:#171204; font-size:11px; font-weight:900; letter-spacing:1px; }
.dateFilterButton { background:#fff; color:#0b5931; border:1px solid #d5e5da; font-weight:900; }
.dateFilterTray { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:0 0 12px; padding:12px; border:1px solid #cbdcd0; border-radius:13px; background:#eef6f0; }
.dateFilterTray label { display:flex; flex-direction:column; gap:4px; color:#31533f; font-size:11px; font-weight:900; }
.dateFilterTray input,.dateFilterTray select { min-height:42px; padding:8px 10px; border:1px solid #aebfb3; border-radius:9px; background:#fff; }
.historyPanel,.purchaseHistoryPanel { border-top:5px solid #168a45; }
.historyPanelTitle { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.historyPanelTitle h2 { margin:0; }
.historyPanelTitle > span { padding:5px 10px; border-radius:999px; background:#e5f4e9; color:#08703a; font-size:11px; font-weight:900; }
.historySearchBar { background:#f7faf8; }
.historyPanel > div[id$="Result"] { overflow-x:auto; }
.modernHistoryTable { min-width:900px; border-collapse:separate; border-spacing:0; }
.modernHistoryTable th { background:#0d5f34; color:#fff; }
.modernHistoryTable td { background:#fff; border-bottom:1px solid #e1eae4; }
.modernHistoryTable tr:hover td { background:#f2f8f4; }
.purchaseSummary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.purchaseSummary > div { display:flex; flex-direction:column; gap:5px; padding:13px; border-radius:12px; background:#eef7f0; border:1px solid #cfe2d4; }
.purchaseSummary span { color:#52705d; font-size:10px; font-weight:900; letter-spacing:.8px; }
.purchaseSummary b { color:#075d31; font-size:22px; }
.qtyPill,.paymentPill { display:inline-flex; align-items:center; justify-content:center; min-width:42px; padding:5px 9px; border-radius:999px; background:#f0b429; color:#171204; font-weight:900; }
.paymentPill { background:#e4efff; color:#174d89; }
.purchaseProductLine { display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dotted #d6dfd9; }
.purchaseProductLine small { color:#617168; white-space:nowrap; }
.supplierDetails summary { cursor:pointer; color:#0a6335; font-weight:900; }
.supplierDetails[open] summary { margin-bottom:14px; }
.qtyStepper { display:grid; grid-template-columns:44px minmax(70px,1fr) 44px; gap:5px; }
.qtyStepper button { min-height:46px; padding:5px; border-radius:9px; background:#0b6a38; color:#fff; font-size:22px; font-weight:900; }
.qtyStepper input { min-width:0; text-align:center; font-size:20px; font-weight:900; }
.modernQtyEntry { grid-template-columns:minmax(180px,.8fr) minmax(150px,.8fr) minmax(150px,1fr); }
.addReceivingBtn { min-height:48px; }
.purchaseGrandTotal { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:14px; border-radius:12px; background:#052e1b; color:#fff; }
.purchaseGrandTotal strong { color:#f0b429; font-size:25px; }
.compactBtn { padding:7px 9px; font-size:10px; }
.modal { padding: clamp(8px, 2vw, 22px); }
.modalBox {
  width: min(1120px, 100%);
  max-height: min(92vh, 92dvh);
  padding: clamp(16px, 2.2vw, 28px);
  border-radius: 19px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.cashPayment { width: min(100%, 760px); }
.cashKeypad button,
.referenceKeypad button { min-height: 62px; }

@media (max-width: 1180px) {
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posGrid { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr); }
  .products { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
  .cartRow { grid-template-columns: minmax(110px, 1fr) 62px 86px; }
  .cartButtons { grid-column: 1 / -1; }
  .posScreen .checkoutActions { grid-template-columns:1fr 2fr; }
  .posScreen .priceGroup { grid-column:1; }
  .posScreen .paymentGroup { grid-column:2; }
  .posScreen .actionGroup { grid-column:1 / -1; grid-template-columns:repeat(6,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  header { align-items: flex-start; }
  .posGrid { grid-template-columns: 1fr; }
  .cartPanel { position: sticky; top: 68px; height: calc(100dvh - 86px); max-height: calc(100dvh - 86px); order: -1; }
  .posScreen .cartPanel { position:static; height:100%; max-height:none; }
  .posScreen .posGrid { grid-template-rows:minmax(0, .9fr) minmax(0, 1.1fr); }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkoutActions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .posScreen .checkoutActions { grid-template-columns:1fr 2fr; }
  .posScreen .priceGroup { grid-column:1; }
  .posScreen .paymentGroup { grid-column:2; }
  .posScreen .actionGroup { grid-column:1 / -1; grid-template-columns:repeat(6,minmax(0,1fr)); }
  .moneyCounter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  header { min-height: 60px; align-items: center; }
  header > div:first-child span,
  header .installAppBtn,
  #userBadge { display: none; }
  header strong { font-size: 13px; }
  .headerUser { flex-wrap: nowrap; gap: 6px; }
  .networkBadge span { max-width: 82px; }
  .logoutBtn { min-height: 40px; padding: 7px 10px; font-size: 12px; }
  main { padding: 12px 8px 98px; }
  .grid4 { grid-template-columns: 1fr; }
  .card, .panel { padding: 13px; border-radius: 13px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .product { min-height: 190px; padding: 10px; }
  .productActions { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; }
  .toolbar input,
  .toolbar select,
  .toolbar button { width: 100%; flex-basis: 100%; }
  .posScreen { height:calc(100dvh - 60px); padding:8px; }
  .posScreen .pageTitle { display:none; }
  .posScreen .posToolbar { display:grid; grid-template-columns:78px 1fr 1fr; gap:6px; padding:6px; }
  .posScreen .posSearchWrap { grid-column:1 / -1; width:100%; min-width:0; }
  .posScreen .posToolbar input { width:100%; min-width:0; }
  .posScreen .posToolbar select,
  .posScreen .posToolbar button { width:100%; min-width:0; flex-basis:auto; padding:8px 5px; font-size:11px; }
  .posScreen .posGrid { grid-template-rows:minmax(0,1fr); }
  .posScreen .checkoutActions { grid-template-columns:1fr; gap:4px; }
  .posScreen .priceGroup,.posScreen .paymentGroup,.posScreen .actionGroup { grid-column:1; }
  .posScreen .priceGroup { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .posScreen .paymentGroup { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .posScreen .actionGroup { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .posScreen .checkoutActions .posBtn { min-height:34px; padding:4px 2px; font-size:8px; }
  .posScreen .checkoutGroup { padding:15px 4px 4px; gap:3px; }
  .posScreen .barcodeDock { grid-template-columns:1fr 70px; padding:4px; }
  .posScreen .barcodeDock > span { display:none; }
  .posScreen .barcodeDock input { min-height:36px; font-size:14px; }
  .moduleHeader { align-items:flex-start; padding:12px; }
  .moduleHeader,.moduleActions { flex-direction:column; }
  .moduleActions { width:100%; align-items:stretch!important; }
  .moduleActions button { width:100%; }
  .purchaseSummary { grid-template-columns:1fr 1fr; }
  .purchaseSummary > div:last-child { grid-column:1 / -1; }
  .modernQtyEntry { grid-template-columns:1fr; }
  .posScreen .cartTotal { padding:8px; }
  .posScreen .cartTotal strong { font-size:20px; }
  .form { grid-template-columns: 1fr; }
  .checkoutActions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchaseResults { grid-template-columns: 1fr; }
  .permissionGrid { grid-template-columns: 1fr; }
  .modal { align-items: end; padding: 0; }
  .modalBox { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); }
  .saleReceiptSuccess { margin: -16px -12px 15px; padding: 16px 14px; }
  .saleReceiptSuccess h2 { font-size: 23px; }
  .saleReceiptSuccess p { font-size: 11px; }
  .saleReceiptCheck { flex-basis: 44px; width: 44px; height: 44px; font-size: 27px; }
  .saleReceiptLayout { grid-template-columns: 1fr; gap: 10px; }
  .saleReceiptPaper { padding: 15px 12px; }
  .saleReceiptSummary { position: static; padding: 15px; }
  .saleReceiptSummary > strong { font-size: 32px; }
  .saleReceiptActions { bottom: calc(-16px - env(safe-area-inset-bottom)); grid-template-columns: 1fr; margin: 14px -12px calc(-16px - env(safe-area-inset-bottom)); padding: 11px 12px calc(13px + env(safe-area-inset-bottom)); }
  .cashPayment h2 { font-size: 22px; }
  .cashDue, .cashChange { padding: 12px; font-size: 15px; }
  .cashDue strong, .cashChange strong { font-size: 23px; }
  .cashInputLabel input { font-size: 25px; padding: 13px; }
  .tenderButtons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moneyCounter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  nav button { font-size: 12px; padding-inline: 12px; }
}

@media (max-width: 390px) {
  .products { grid-template-columns: 1fr; }
  .checkoutActions { grid-template-columns: 1fr 1fr; }
  .networkBadge { display: none; }
}

@media (hover: none) and (pointer: coarse) {
  button { min-height: 48px; }
  .tableActions button { min-height: 42px; }
}

@media print {
  body { background: #fff; color: #000; font-size: 12px; }
  main { width: 100%; max-width: none; }
  table { min-width: 0; }
  th { position: static; color: #000; background: #eee; }
}
.cartSummary{display:grid;gap:5px;padding:10px 12px;border:1px solid #f0d58a;border-radius:10px;background:#fff8df;color:#111;font-weight:800}

/* Build 49 software subscription, developer credit and contract */
.licenseLockScreen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:auto;padding:24px;background:radial-gradient(circle at top,#17482d 0,#07150d 48%,#020503 100%);color:#050705}
.licenseLockScreen.hidden{display:none}
.licenseLockCard{width:min(720px,100%);padding:clamp(22px,4vw,42px);border:1px solid #d8e3da;border-radius:26px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.55);text-align:center}
.licenseLockCard>img{width:82px;height:82px;border-radius:20px;object-fit:contain}
.licenseLockCard h1{margin:8px 0 10px;color:#000;font-size:clamp(25px,4vw,38px)}
.licenseLockCard p{color:#111}
.licenseEyebrow{margin-top:14px;color:#9a5e00;font-size:12px;font-weight:900;letter-spacing:.18em}
.licenseLockDetails,.licenseSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;text-align:left}
.licenseLockDetails>div,.licenseSummary>div{min-width:0;padding:13px;border:1px solid #cfdbd2;border-radius:12px;background:#f4f8f5}
.licenseLockDetails span,.licenseSummary span{display:block;color:#405047;font-size:12px;font-weight:800}
.licenseLockDetails b,.licenseSummary b{display:block;overflow-wrap:anywhere;margin-top:4px;color:#000;font-size:15px}
.developerCredit{margin:20px 0 0!important;color:#000!important;font-size:13px}
.developerBrand{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-4px 0 18px;padding:16px;border-radius:14px;background:linear-gradient(135deg,#07150d,#154d2f);color:#fff}
.developerBrand div>*{display:block}.developerBrand span{margin-top:3px;color:#c7d9ce;font-size:12px}.developerBrand strong{color:#ffe19a;text-align:right}
.licenseManagement{margin-top:18px;padding:14px;border:1px solid #d1ddd5;border-radius:13px;background:#f7faf8}
.licenseManagement summary{cursor:pointer;color:#000;font-weight:900}
.customerDueSummary{grid-template-columns:repeat(4,minmax(0,1fr))}
.paymentInstruction{padding:13px 15px;border-left:4px solid #b47a11;border-radius:8px;background:#fff6dc;color:#000!important;font-weight:700}
.providerAccessButton{border-color:#28332d;background:#202923;color:#fff}
.providerLandingLink{min-height:30px;margin:9px auto 0;padding:3px 8px;border:0;background:transparent;color:#627067;font-size:10px;font-weight:800;letter-spacing:.08em;box-shadow:none}
.providerLandingLink:hover{color:#0b5d2f;background:transparent}
.standaloneProvider .providerUnlocked{margin-top:12px}
.providerBranchToolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:12px;align-items:end;margin:12px 0 16px;padding:14px;border:1px solid #d7c078;border-radius:13px;background:#fff8de}
.providerBranchToolbar label{margin:0;color:#000;font-weight:900}.providerBranchToolbar select{margin-top:5px;background:#fff;color:#000}
.resellerCenter{width:min(1280px,96vw)}.resellerCenter table{min-width:1050px}
@media(max-width:680px){.providerBranchToolbar{grid-template-columns:1fr}.providerBranchToolbar button{width:100%}}
.providerUnlocked{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;border-radius:10px;background:#e5f6e9;color:#000}
.providerUnlocked span{flex:1;color:#34443a;font-size:12px}.providerUnlocked button{min-height:38px}
.termsPublicPanel{border:2px solid #d5b260;background:linear-gradient(180deg,#fffdf5,#fff9e8)}
.termsContract{max-width:850px;margin:auto;color:#000;line-height:1.55}
.termsContract h2,.termsContract h3{color:#000}.termsContract h2{text-align:center}.termsContract h3{margin:16px 0 4px;font-size:15px}
.termsMeta,.termsNotice{text-align:center}.termsNotice{padding:12px;border:1px solid #bf8a23;background:#fff5d8;font-weight:700}
.termsSignature{display:grid;grid-template-columns:1fr 1fr 130px;gap:28px;margin-top:55px}
.termsSignature div{border-top:1px solid #000;padding-top:5px;text-align:center}
@media(max-width:680px){.licenseLockScreen{padding:10px}.licenseLockCard{padding:20px 14px;border-radius:19px}.licenseLockDetails,.licenseSummary,.customerDueSummary{grid-template-columns:1fr 1fr}.developerBrand{align-items:flex-start;flex-direction:column}.developerBrand strong{text-align:left}.providerUnlocked{align-items:stretch;flex-direction:column}.termsSignature{grid-template-columns:1fr;gap:45px}}

/* Build 41 anti-lag rendering containment */
.panel{content-visibility:auto;contain-intrinsic-size:1px 420px}
.products>*{contain:layout paint style}
table{contain:layout style}
tbody tr{content-visibility:auto;contain-intrinsic-size:1px 42px}

/* Build 43 all-branch sales graph */
.allBranchKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}
.allBranchKpis > div {
  padding: 14px;
  border-radius: 13px;
  background: #f1f8f3;
  border: 1px solid #d2e8d8;
}
.allBranchKpis span { display: block; color: #52685a; font-size: 12px; font-weight: 700; }
.allBranchKpis b { display: block; margin-top: 4px; color: #07170d; font-size: 20px; }
.salesGraph { display: grid; gap: 9px; margin: 12px 0 22px; }
.salesGraphRow { display: grid; grid-template-columns: minmax(150px, 230px) minmax(130px, 1fr) 120px; gap: 10px; align-items: center; }
.salesGraphLabel { min-width: 0; }
.salesGraphLabel b, .salesGraphLabel span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #07170d; }
.salesGraphLabel span { color: #52685a; font-size: 11px; }
.salesGraphTrack { height: 20px; overflow: hidden; border-radius: 999px; background: #e1ece4; }
.salesGraphTrack i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0b5d2f, #24ad59, #e2a72c); }
.salesGraphRow strong { color: #07170d; text-align: right; }
.tableScroll { overflow-x: auto; }
@media (max-width: 720px) {
  .allBranchKpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salesGraphRow { grid-template-columns: minmax(105px, 1fr) minmax(90px, 1.4fr); }
  .salesGraphRow strong { grid-column: 2; font-size: 12px; }
}

@media (max-width:900px){
  .cartRow{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .cartItemInfo{grid-column:1/2}.cartQtyBox{grid-column:2/3}.cartItemTotal{grid-column:1/2;align-items:flex-start}.cartButtons{grid-column:2/3}
}

/* Modern dashboard refresh inspired by the clean sidebar/card layout. */
:root{--dash-green:#08733d;--dash-green-dark:#075b31;--dash-soft:#eef8f2;--dash-line:#dce8df;--dash-shadow:0 10px 28px rgba(13,67,39,.08)}
.dashboardHome{max-width:1500px;margin:0 auto;padding:2px 4px 34px}
.dashboardWelcome{min-height:190px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 36px;border:1px solid #dcefe3;border-radius:22px;background:linear-gradient(110deg,#f0faf4 0%,#e8f6ee 62%,#f7fbf8 100%);box-shadow:var(--dash-shadow);overflow:hidden}
.dashboardEyebrow{font-size:11px;font-weight:900;letter-spacing:1.2px;color:#1d8650;margin-bottom:8px}
.dashboardWelcome h1{margin:0;color:#075b31;font-size:clamp(28px,3vw,42px);line-height:1.05}
.dashboardWelcome p{margin:10px 0 0;color:#53665c;font-size:14px;font-weight:600}
.dashboardPills{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.dashboardPills span{padding:7px 10px;border:1px solid #cfe4d6;border-radius:999px;background:#fff;color:#397052;font-size:10px;font-weight:800}
.storeIllustration{position:relative;width:270px;height:150px;flex:0 0 270px;margin-right:8px;margin-top:25px}.storeSign{position:absolute;z-index:3;left:78px;top:8px;padding:6px 11px;border-radius:7px;background:#159354;color:#fff;font-size:10px;font-weight:900;box-shadow:0 5px 12px #0a653a33}.storeRoof{position:absolute;left:52px;top:34px;width:175px;height:28px;border-radius:12px 12px 5px 5px;background:repeating-linear-gradient(90deg,#0e8848 0 28px,#fff 28px 42px);box-shadow:0 5px 10px #1f754522}.storeBuilding{position:absolute;left:67px;top:60px;width:145px;height:76px;border-radius:4px 4px 12px 12px;background:#dff1e4;border:3px solid #a6d1b3}.storeWindow{position:absolute;left:18px;top:17px;width:55px;height:40px;background:#7bc0e1;border:4px solid #20714c}.storeDoor{position:absolute;right:18px;bottom:0;width:40px;height:52px;background:#8ec7df;border:4px solid #20714c;border-bottom:0}.storeTree{position:absolute;bottom:4px;width:30px;height:48px;border-radius:50% 50% 42% 42%;background:#79bd4e}.storeTree:after{content:"";position:absolute;left:13px;bottom:-11px;width:6px;height:17px;background:#8c6a42}.treeA{left:22px}.treeB{right:14px;transform:scale(.85)}
.dashboardKpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:16px 0 24px}.dashboardKpi{padding:18px 20px;border:1px solid var(--dash-line);border-radius:16px;background:#fff;box-shadow:var(--dash-shadow)}.dashboardKpi span{display:block;color:#6b7c72;font-size:11px;font-weight:800}.dashboardKpi strong{display:block;margin-top:6px;color:#075b31;font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}.dashboardKpi small{display:block;margin-top:4px;color:#8a978f;font-size:9px;font-weight:700}
.dashboardSectionHead{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px}.dashboardSectionHead h2{margin:0;color:#173c29;font-size:21px}.dashboardSectionHead p{margin:3px 0 0;color:#748078;font-size:11px;font-weight:600}.dashboardModules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.dashboardModule{position:relative;min-height:188px;padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;border:1px solid #e0e8e3;border-radius:17px;background:#fff;color:#263c31;box-shadow:var(--dash-shadow);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.dashboardModule:hover{transform:translateY(-3px);border-color:#bcd9c7;box-shadow:0 16px 32px rgba(13,67,39,.12);filter:none}.moduleIcon{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#eef8f1;font-size:27px;margin-bottom:13px}.dashboardModule strong{font-size:14px;color:#243b30}.dashboardModule>span:not(.moduleIcon){font-size:10px;line-height:1.45;color:#718078;font-weight:600;margin-top:5px;max-width:170px}.dashboardModule i{position:absolute;bottom:13px;width:31px;height:31px;display:grid;place-items:center;border:1px solid #d9e6de;border-radius:50%;background:#fff;color:#14824a;font-style:normal;font-size:17px;font-weight:900}
.dashboardBottom{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:16px}.dashboardBottom .panel{min-width:0}.dashboardStats{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}.dashboardStats span{padding:9px 11px;border-radius:10px;background:#f4f8f5;color:#66756d;font-size:10px;font-weight:700}.dashboardStats b{color:#075b31;font-size:13px}
@media(max-width:1100px){.dashboardModules{grid-template-columns:repeat(3,minmax(0,1fr))}.storeIllustration{display:none}.dashboardKpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.dashboardWelcome{padding:22px}.dashboardModules{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dashboardModule{min-height:165px}.dashboardBottom{grid-template-columns:1fr}.dashboardSectionHead{align-items:flex-end}.dashboardKpi strong{font-size:19px}}

/* Clean desktop sidebar for the back-office/dashboard. POS terminal keeps its dedicated bottom navigation behavior. */
@media(min-width:900px){
  #app:not(:has(.posScreen)){padding-left:230px}
  #app:not(:has(.posScreen)) nav{position:fixed;left:0;top:68px;bottom:0;width:230px;min-height:0;padding:18px 13px;display:flex;flex-direction:column;align-items:stretch;gap:6px;overflow-y:auto;overflow-x:hidden;background:#fff;border-right:1px solid #e1ebe4;box-shadow:5px 0 20px rgba(5,46,27,.05);z-index:9}
  #app:not(:has(.posScreen)) nav button{flex:0 0 auto;min-height:44px;padding:10px 14px;text-align:left;border:0;border-radius:10px;background:transparent;color:#31463b;font-size:12px;font-weight:800}
  #app:not(:has(.posScreen)) nav button:hover{background:#edf7f0;color:#0b6b38}
  #app:not(:has(.posScreen)) nav button.active{background:#168a45;color:#fff;box-shadow:0 5px 12px rgba(22,138,69,.18)}
  #app:not(:has(.posScreen)) main{padding:24px 28px 70px;max-width:none}
}

/* Build 104 — cashier-first POS terminal */
.posHeading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 10px}.posHeading>.posStatusBar+*{min-width:0}.posHeading>div:first-child{display:flex;align-items:baseline;gap:10px;white-space:nowrap}.posHeading .pageTitle{margin:0}.posHeading>div:first-child>span{color:#08733d;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.7px}
.posStatusBar{display:flex;justify-content:flex-end;gap:7px;min-width:0}.posStatusBar>span{min-width:105px;padding:7px 11px;border:1px solid #d7e5dc;border-radius:10px;background:#fff;box-shadow:0 3px 10px rgba(5,46,27,.04)}.posStatusBar small{display:block;color:#75847b;font-size:8px;font-weight:900;letter-spacing:.8px}.posStatusBar b{display:block;margin-top:2px;max-width:160px;overflow:hidden;text-overflow:ellipsis;color:#083820;font-size:11px;white-space:nowrap}
.posScreen .posToolbar{box-shadow:0 5px 16px rgba(5,46,27,.06)}.posScreen .posToolbar input,.posScreen .posToolbar select{min-height:46px;border:1px solid #b9d0c1;color:#10291b;font-weight:800}.posScreen .posToolbar button{min-height:46px;font-size:12px}
.cartPanel>h2{margin:0 0 8px;font-size:18px;text-transform:uppercase;letter-spacing:.5px}.cartListHeader{display:grid;grid-template-columns:minmax(0,1fr) 108px 120px auto;gap:10px;padding:7px 14px;border-radius:9px;background:#edf5f0;color:#52665a;font-size:9px;font-weight:900;letter-spacing:.7px}.cartListHeader span:nth-child(2){text-align:center}.cartListHeader span:nth-child(3),.cartListHeader span:nth-child(4){text-align:right}
.emptyCartState{height:100%;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:22px;color:#52665a;letter-spacing:0;text-align:center}.emptyCartIcon{width:54px;height:54px;display:grid;place-items:center;margin-bottom:4px;border-radius:16px;background:#e7f5ec;color:#08783d;font-size:31px;box-shadow:inset 0 0 0 1px #c9e4d2}.emptyCartState strong{color:#064325;font-size:24px;text-transform:uppercase}.emptyCartState>span{color:#243d30;font-size:14px;font-weight:900}.emptyCartState>small{color:#75847b;font-size:11px;font-weight:700}.emptyCartTips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:9px}.emptyCartTips span{padding:5px 8px;border:1px solid #d5e5da;border-radius:999px;background:#fff;color:#476052;font-size:8px;font-weight:900;letter-spacing:.4px}
.barcodeDock{grid-template-columns:55px minmax(180px,1fr);gap:8px;margin-bottom:7px;padding:7px;border:2px solid #17372a;background:#f1f6f3;transition:border-color .18s,background .18s,box-shadow .18s}.barcodeShortcut{height:43px;display:grid;place-items:center!important;border-radius:8px;background:#0b5d2f;color:#fff!important;font-size:13px!important}.barcodeInputWrap{position:relative}.barcodeInputWrap input{padding-right:150px}.barcodeInputWrap small{position:absolute;right:11px;top:50%;transform:translateY(-50%);max-width:140px;overflow:hidden;text-overflow:ellipsis;color:#66776c;font-size:9px;font-weight:900;white-space:nowrap}.barcodeDock.scanSuccess{border-color:#0d9b4e;background:#ebfaF1;box-shadow:0 0 0 3px rgba(13,155,78,.12)}.barcodeDock.scanSuccess input{border-color:#0d9b4e}.barcodeDock.scanSuccess small{color:#08733d}.barcodeDock.scanFailed{border-color:#cf3439;background:#fff2f2;box-shadow:0 0 0 3px rgba(207,52,57,.10)}.barcodeDock.scanFailed small{color:#b42127}
.cartSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:0;margin:0 0 7px;border:0;background:transparent}.cartSummary>span,.cartSummary>label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #dbe7df;border-radius:9px;background:#f8fbf9}.cartSummary small{color:#65766c;font-size:8px;font-weight:900;letter-spacing:.6px}.cartSummary b{color:#183b28;font-size:12px}.cartSummary .summaryDiscount{color:#b62c31}.cartAmountBox{margin:0}.cartAmountBox input{width:100%;min-width:0;border:0;background:transparent;outline:none;text-align:right;font-size:15px;font-weight:900;color:#183b28;padding:0}.cartAmountBox input::placeholder{color:#8aa092;opacity:1}
.cartTotal{min-height:66px;padding:11px 16px;border-radius:11px;background:linear-gradient(100deg,#052e1b,#075c31);box-shadow:0 6px 16px rgba(5,46,27,.18)}.cartItemCount{display:flex;align-items:center;gap:7px;margin-right:auto;padding:7px 11px}.cartItemCount small{font-size:9px;font-weight:900}.cartItemCount b{font-size:21px}.grandTotalLabel{margin-left:auto;font-size:12px;font-weight:900;letter-spacing:.8px}.cartTotal strong{min-width:155px;text-align:right;font-size:clamp(26px,2.2vw,34px)}
.checkoutActions{position:sticky;bottom:0;grid-template-columns:minmax(720px,3fr) minmax(270px,1fr);gap:8px;margin-top:7px}.checkoutGroup{padding:21px 7px 7px}.checkoutActions .posBtn{min-height:54px;padding:7px 6px;font-size:13px;line-height:1.05}.checkoutActions .posBtn small{display:block;margin-bottom:4px;color:rgba(255,255,255,.78);font-size:8px;font-weight:900;letter-spacing:.5px}.btnHold,.btnRetail,.btnWholesale,.btnRecall,.btnDisplay,.btnDiscount,.btnClear{filter:saturate(.82)}

@media(max-width:1180px){.posHeading{align-items:flex-start}.posStatusBar>span{min-width:88px;padding:7px}.cartListHeader{grid-template-columns:minmax(110px,1fr) 62px 86px}.cartListHeader span:last-child{display:none}.checkoutActions .posBtn{font-size:11px}}
@media(max-width:900px){.posHeading{display:none}.cartListHeader{display:none}.checkoutActions{grid-template-columns:1fr 2fr}.barcodeInputWrap input{padding-right:115px}.barcodeInputWrap small{max-width:105px}.cartSummary>span{padding:6px}.cartSummary small{font-size:7px}.cartSummary b{font-size:10px}}
@media(max-width:680px){.emptyCartState{min-height:120px;padding:10px}.emptyCartIcon{width:40px;height:40px;font-size:23px}.emptyCartState strong{font-size:18px}.emptyCartTips{display:none}.barcodeDock{grid-template-columns:42px minmax(0,1fr)!important}.barcodeShortcut{display:grid!important;height:36px}.barcodeInputWrap input{padding-right:8px}.barcodeInputWrap small{display:none}.cartSummary{gap:3px}.cartSummary>span,.cartSummary>label{display:block;text-align:center}.cartSummary small,.cartSummary b{display:block}.cartAmountBox input{text-align:center;font-size:13px;margin-top:2px}.grandTotalLabel{font-size:9px}.cartTotal strong{min-width:100px}.posScreen .checkoutActions .posBtn{min-height:39px;font-size:9px}.checkoutActions .posBtn small{font-size:7px;margin-bottom:2px}}

/* Build 110 — crisp black typography and complete purchase history controls */
:root{--ink:#000000;--muted-ink:#181818}
body{color:#000;font-size:clamp(15px,.3vw + 14px,17px);font-weight:520}
main,.panel,.card,.modalBox,.toolbar,.form,.dateFilterTray{color:#000}
input,select,textarea{color:#000!important;font-weight:650}
.muted{color:#181818;font-weight:600;opacity:1}
td{color:#000;font-size:14px;font-weight:600}
.panel p,.panel label,.card p,.card label,.modalBox p,.modalBox label{color:#000}
.purchaseDateFilters{align-items:end;padding:14px;border:2px solid #b9d1c0;background:#f7faf8}
.purchaseDateFilters label{min-width:150px;color:#000;font-size:11px;font-weight:1000;letter-spacing:.5px}
.purchaseDateFilters button{min-height:42px;font-weight:900}
.purchaseHistoryTable{min-width:1320px}
.purchaseHistoryTable th{font-size:11px;white-space:nowrap}
.purchaseHistoryTable td{font-size:14px;line-height:1.4}
.purchaseHistoryPanel .historyPanelTitle span{color:#000;font-size:11px}
.purchaseHistoryPanel .purchaseProductLine span,.purchaseHistoryPanel .purchaseProductLine small{color:#000;font-size:12px;font-weight:750}
.purchaseActions{min-width:185px;gap:5px}
.purchaseActions button{flex:1 1 auto;min-height:38px;font-size:10px;font-weight:1000}
.purchaseStatus{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:1000;letter-spacing:.5px;text-transform:uppercase}
.purchaseStatus.posted{border:1px solid #85c99e;background:#e6f7ec;color:#075c31}
.purchaseStatus.voided{border:1px solid #e7a1a1;background:#fff0f0;color:#a51019;opacity:1;text-decoration:none}
.purchaseVoidedRow td{background:#fff7f7!important;color:#3f2020}

/* Build 113 — compact Business Operations date range and search controls */
.commercialDatePanel{padding-bottom:10px}.commercialDatePanel .historyPanelTitle{align-items:flex-start}.commercialDateFilters{margin:0;align-items:end}.commercialDateFilters label{min-width:145px;color:#000}.commercialDateFilters .commercialSearchField{min-width:min(320px,100%);flex:1 1 280px}.commercialDateFilters button{min-height:42px;font-weight:900}.commercialDatePanel .todayBadge{white-space:nowrap}
.purchaseVoidedRow td:first-child{box-shadow:inset 5px 0 0 #c82f36}
.purchaseView{width:min(100%,920px);margin:auto;color:#000}
.purchaseViewHeader{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-28px -28px 20px;padding:22px 28px;border-radius:14px 14px 0 0;background:linear-gradient(135deg,#052e1b,#08733d);color:#fff}
.purchaseViewHeader small{display:block;color:#f0c24f;font-size:10px;font-weight:1000;letter-spacing:1px}
.purchaseViewHeader h2{margin:3px 0 8px;color:#fff;font-size:26px}
.purchaseViewHeader>strong{color:#fff;font-size:30px;white-space:nowrap}
.purchaseViewMeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:20px}
.purchaseViewMeta span{min-width:0;padding:12px;border:1px solid #d6e3da;border-radius:10px;background:#f8fbf9}
.purchaseViewMeta small{display:block;color:#303030;font-size:9px;font-weight:1000;letter-spacing:.7px}
.purchaseViewMeta b{display:block;margin-top:3px;color:#000;overflow-wrap:anywhere;font-size:13px}
.purchaseViewTable{min-width:720px}
.purchaseViewTable td,.purchaseViewTable th{padding:11px}
.purchaseViewActions{position:sticky;bottom:-28px;margin:18px -28px -28px;padding:14px 28px 20px;border-top:1px solid #d4e0d8;background:#fff}
@media(max-width:680px){.purchaseDateFilters label{width:100%;min-width:0}.purchaseDateFilters button{flex:1 1 calc(33.333% - 8px);padding:8px 5px;font-size:10px}.purchaseViewHeader{margin:-16px -12px 15px;padding:17px 13px}.purchaseViewHeader h2{font-size:20px}.purchaseViewHeader>strong{font-size:22px}.purchaseViewMeta{grid-template-columns:1fr 1fr}.purchaseViewActions{bottom:calc(-16px - env(safe-area-inset-bottom));margin:15px -12px calc(-16px - env(safe-area-inset-bottom));padding:12px}.purchaseViewActions button{width:100%}}

/* BUILD 140: split payment + customer advance */
.splitPaymentGrid{display:grid;gap:10px;margin:14px 0}.splitPaymentRow{display:grid;grid-template-columns:48px minmax(150px,1fr) minmax(130px,1fr) minmax(180px,1.2fr);gap:8px;align-items:center;padding:10px;border:1px solid var(--line,#d8e0e8);border-radius:12px;background:rgba(255,255,255,.7)}.splitPaymentRow>b{text-align:center}.splitPaymentRow input,.splitPaymentRow select{min-width:0}.btnSplit{font-weight:800}.splitPayment .customerDueSummary{margin-top:12px}@media(max-width:800px){.splitPaymentRow{grid-template-columns:36px 1fr}.splitPaymentRow input{grid-column:2}}
/* BUILD 150 — Credit Customer PDF report framework */
.creditPdfFilter{max-width:820px!important}.creditPdfHero{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px;border-radius:16px;background:linear-gradient(125deg,#0d6339,#17894e 65%,#d7a928);color:#fff;margin-bottom:14px}.creditPdfKicker{font-size:11px;font-weight:900;letter-spacing:1.5px;opacity:.9}.creditPdfHero h2{margin:3px 0;font-size:24px}.creditPdfHero p{margin:0;opacity:.92;max-width:580px}.creditPdfBadge{min-width:74px;height:74px;border-radius:18px;display:grid;place-items:center;background:#fff;color:#12693d;font-size:22px;font-weight:1000;box-shadow:0 6px 18px #0002}.creditPdfForm{grid-template-columns:1fr 1fr 2fr!important}.creditPdfForm label{font-weight:850}.creditPdfForm input,.creditPdfForm select{min-height:48px;font-size:15px}.creditPdfHint{padding:10px 12px;margin:8px 0 12px;background:#eef8f1;border-left:5px solid #16864d;border-radius:8px;color:#315342}@media(max-width:720px){.creditPdfHero{align-items:flex-start}.creditPdfHero h2{font-size:19px}.creditPdfBadge{min-width:58px;height:58px}.creditPdfForm{grid-template-columns:1fr!important}.creditPdfCustomer{grid-column:auto!important}}

/* BUILD157 - Add/Edit Product keyboard shortcut panel */
.productModalShortcutBar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;padding:12px;border:1px solid rgba(0,0,0,.14);border-radius:12px;background:rgba(0,0,0,.035);align-items:center}
.productModalShortcutBar b{width:100%;font-size:13px;letter-spacing:.04em}
.productModalShortcutBar span{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border:1px solid rgba(0,0,0,.16);border-radius:9px;font-weight:800;font-size:12px;background:var(--panel,#fff)}
.productModalActions button{min-height:48px;font-weight:900}.productModalActions button small{display:block;font-size:10px;opacity:.75}
@media(max-width:600px){.productModalShortcutBar{gap:5px}.productModalShortcutBar span{font-size:10px;padding:5px 7px;min-height:28px}}

/* BUILD158 — polished Add Product validation UI */
.productModalActions{display:grid;grid-template-columns:minmax(220px,1fr) minmax(120px,.35fr);gap:10px;position:sticky;bottom:-28px;margin:16px -28px -28px;padding:14px 28px 20px;background:linear-gradient(180deg,rgba(255,255,255,.94),#fff 35%);border-top:1px solid #d9e4dc;z-index:5}
.productModalActions button{border-radius:12px;box-shadow:0 5px 14px rgba(0,0,0,.08)}
#saveProductButton.productSaveReady{background:linear-gradient(135deg,#08733d,#0e9c53);border-color:#08733d;color:#fff;box-shadow:0 7px 18px rgba(8,115,61,.22)}
#saveProductButton.productSaveBlocked,#saveProductButton.productSaveBlocked:disabled{background:linear-gradient(135deg,#b91c1c,#dc2626)!important;border-color:#991b1b!important;color:#fff!important;opacity:1!important;cursor:not-allowed;box-shadow:0 7px 18px rgba(185,28,28,.18)}
.productFieldInvalid{border:2px solid #dc2626!important;background:#fff1f2!important;box-shadow:0 0 0 3px rgba(220,38,38,.10)!important}
.productFieldValid{border-color:#16a34a!important;background:#f0fdf4!important}
.productValidationError,.productValidationReady{display:grid;gap:3px;margin:12px 0;padding:12px 14px;border-radius:12px;border:1px solid}
.productValidationError{background:#fff1f2;border-color:#fecaca;color:#991b1b}
.productValidationReady{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.productValidationError b,.productValidationReady b{font-size:13px;font-weight:1000;letter-spacing:.3px}.productValidationError span,.productValidationReady span{font-size:12px;font-weight:700}
@media(max-width:600px){.productModalActions{grid-template-columns:1fr;bottom:-16px;margin:14px -12px -16px;padding:12px}.productModalActions button{width:100%}}


/* BUILD160 — Back to Supplier / Bad Order */
.supplierReturnBtn{background:linear-gradient(135deg,#7f1d1d,#b91c1c)!important;color:#fff!important;border-color:#991b1b!important;font-weight:900!important}
.supplierReturnPanel{max-width:980px!important}
.supplierReturnHero{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px;border-radius:18px;background:linear-gradient(135deg,#fff7ed,#fee2e2);border:1px solid #fecaca;margin-bottom:16px}
.supplierReturnHero span{font-size:.75rem;font-weight:900;letter-spacing:.14em;color:#991b1b}.supplierReturnHero h2{margin:3px 0 6px;font-size:1.55rem}.supplierReturnHero p{margin:0;color:#57534e;font-weight:600}.supplierReturnBadge{padding:13px 16px;border-radius:14px;background:#991b1b;color:#fff;font-weight:900;white-space:nowrap}
.supplierReturnForm{grid-template-columns:repeat(2,minmax(0,1fr))!important}.supplierReturnNotes{grid-column:1/-1}.supplierReturnNotes textarea{width:100%;resize:vertical}
.supplierReturnWarning{margin:14px 0;padding:13px 15px;border-radius:12px;background:#fff7ed;border:1px solid #fdba74;color:#7c2d12;font-weight:700}.supplierReturnActions .danger{min-height:48px;font-weight:900}
.supplierReturnHistory{max-width:1120px!important}.supplierReturnHistory table{min-width:900px}
@media(max-width:700px){.supplierReturnHero{align-items:flex-start;flex-direction:column}.supplierReturnForm{grid-template-columns:1fr!important}.supplierReturnNotes{grid-column:auto}}

/* BUILD161 — Back to Supplier scan/search product picker (no dropdown) */
.supplierReturnProductBox{position:relative;margin:0 0 16px;padding:16px;border:1px solid #cbd5e1;border-radius:16px;background:#f8fafc}
.supplierReturnProductBox label{display:grid;gap:7px;font-weight:900}.supplierReturnProductBox input#srProductSearch{min-height:50px;font-size:1rem;font-weight:800;border:2px solid #94a3b8;border-radius:12px;padding:0 14px;background:#fff}
.supplierReturnProductBox input#srProductSearch:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12);outline:none}
.supplierReturnSearchResults{display:none;position:absolute;z-index:20;left:16px;right:16px;top:82px;max-height:330px;overflow:auto;padding:7px;border:1px solid #cbd5e1;border-radius:13px;background:#fff;box-shadow:0 16px 35px rgba(15,23,42,.18)}
.supplierReturnSearchResults.show{display:grid;gap:6px}.supplierReturnSearchResults button{display:grid!important;grid-template-columns:1fr!important;text-align:left!important;gap:3px!important;width:100%!important;min-height:55px!important;padding:10px 12px!important;border-radius:10px!important;background:#fff!important;color:#0f172a!important;border:1px solid #e2e8f0!important}
.supplierReturnSearchResults button:hover,.supplierReturnSearchResults button:focus{background:#eff6ff!important;border-color:#60a5fa!important}.supplierReturnSearchResults button b{font-size:.95rem}.supplierReturnSearchResults button span{font-size:.78rem;color:#475569}.supplierReturnNoResult{padding:14px;text-align:center;color:#b91c1c;font-weight:900}
.supplierReturnSelectedProduct{display:grid;gap:3px;margin-top:12px;padding:12px 14px;border-radius:12px;background:#ecfdf5;border:1px solid #86efac;color:#14532d}.supplierReturnSelectedProduct b{font-size:1rem}.supplierReturnSelectedProduct span{font-size:.8rem;font-weight:700}
#srStockHint{display:block;margin-top:7px;font-weight:800;color:#334155}

/* BUILD162 — Multi-item Back to Supplier / Bad Order workspace */
.supplierReturnMultiPanel{max-width:1180px!important}.supplierReturnWorkspace{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.35fr);gap:16px;align-items:start}.supplierReturnEntryCard,.supplierReturnCartCard,.supplierReturnBatchCard{border:1px solid #d9e2ea;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06)}.supplierReturnEntryCard,.supplierReturnCartCard{padding:16px}.supplierReturnBatchCard{margin-top:16px;padding:16px}.supplierReturnSectionTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #e2e8f0}.supplierReturnSectionTitle b{font-size:.9rem;letter-spacing:.04em;color:#0f172a}.supplierReturnSectionTitle small{font-weight:800;color:#64748b}.supplierReturnQuickRow{display:grid;grid-template-columns:minmax(120px,.4fr) minmax(220px,1fr);gap:10px;align-items:end}.supplierReturnQuickRow label{display:grid;gap:6px;font-weight:900}.supplierReturnQuickRow input{min-height:52px;font-size:1.1rem;font-weight:900}.supplierReturnAddBtn{min-height:58px!important;border:0!important;border-radius:14px!important;background:linear-gradient(135deg,#075e36,#0b8f50)!important;color:#fff!important;display:grid!important;grid-template-columns:auto 1fr!important;grid-template-rows:auto auto!important;column-gap:8px!important;align-items:center!important;text-align:left!important;padding:9px 16px!important;box-shadow:0 9px 20px rgba(8,115,61,.22)!important}.supplierReturnAddBtn span{grid-row:1/3;font-size:1.6rem;font-weight:1000}.supplierReturnAddBtn b{font-size:.9rem}.supplierReturnAddBtn small{font-size:.68rem;opacity:.85}.supplierReturnCartEmpty{min-height:245px;display:grid;place-items:center;border:2px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:#64748b;font-weight:900}.supplierReturnCartList{display:grid;gap:8px;max-height:390px;overflow:auto;padding-right:3px}.supplierReturnCartRow{display:grid;grid-template-columns:34px minmax(180px,1fr) 110px 120px 86px;gap:9px;align-items:center;padding:10px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc}.supplierReturnLineNo{width:30px;height:30px;border-radius:9px;background:#0f5132;color:#fff;display:grid;place-items:center;font-weight:1000}.supplierReturnCartInfo{display:grid;gap:2px;min-width:0}.supplierReturnCartInfo b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.supplierReturnCartInfo span{font-size:.74rem;color:#64748b;font-weight:700}.supplierReturnCartRow label{display:grid;gap:3px;font-size:.65rem;font-weight:900;color:#475569}.supplierReturnCartRow input{min-height:40px;font-weight:900}.supplierReturnCartValue{display:grid;gap:2px}.supplierReturnCartValue small{font-size:.62rem;color:#64748b;font-weight:900}.supplierReturnCartValue b{font-size:.83rem}.supplierReturnRemoveBtn{min-height:40px!important;padding:7px 9px!important;border-radius:10px!important;background:#fff1f2!important;color:#991b1b!important;border:1px solid #fecaca!important;font-weight:900!important}.supplierReturnPostAll{min-height:54px!important;font-size:.95rem!important;box-shadow:0 8px 18px rgba(153,27,27,.18)!important}
@media(max-width:900px){.supplierReturnWorkspace{grid-template-columns:1fr}.supplierReturnCartList{max-height:330px}.supplierReturnCartRow{grid-template-columns:32px minmax(160px,1fr) 92px 80px}.supplierReturnCartValue{display:none}.supplierReturnRemoveBtn{grid-column:2/-1}}
@media(max-width:600px){.supplierReturnEntryCard,.supplierReturnCartCard,.supplierReturnBatchCard{padding:11px}.supplierReturnQuickRow{grid-template-columns:1fr}.supplierReturnCartRow{grid-template-columns:30px 1fr 84px}.supplierReturnCartValue{display:none}.supplierReturnRemoveBtn{grid-column:2/4}.supplierReturnSectionTitle{align-items:flex-start;flex-direction:column}.supplierReturnActions{display:grid!important;grid-template-columns:1fr!important}.supplierReturnActions button{width:100%!important}}

/* BUILD165 — automatic D1 live sync indicator */
.d1AutoLiveBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.d1AutoLiveBadge{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;font-weight:800;font-size:.82rem;letter-spacing:.03em;background:#e8f8ef;border:1px solid #9bd8b4;color:#146b37}.d1AutoLiveBadge::first-letter{font-size:1.1em}

/* ---- build322.css ---- */
/* BUILD322 — supplier sales + bottle refund PDF report center */
#app .reportCenter321{border:1px solid #cfe4d7;background:linear-gradient(180deg,#fbfffc,#f4faf6);box-shadow:0 12px 28px rgba(15,74,45,.08)}
#app .reportCenter321 .historyPanelTitle{align-items:flex-start}
#app .reportInsightGrid321{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
#app .reportInsightCard321{display:flex;flex-direction:column;gap:8px;min-height:170px;padding:14px;border:1px solid #d7e7dd;border-radius:16px;background:#fff;box-shadow:0 7px 18px rgba(0,0,0,.05)}
#app .reportInsightCard321>b{font-size:15px;line-height:1.15;color:#0d4b31}
#app .reportInsightCard321>span{font-size:11px;font-weight:700;color:#52645a;line-height:1.4;min-height:32px}
#app .reportInsightCard321 label{font-size:10px;font-weight:900;color:#1d2b23;margin-top:auto}
#app .reportInsightCard321 input{width:100%;margin-top:5px;min-height:38px;border:1px solid #bfd4c7;border-radius:9px;padding:7px 9px;background:#fff;color:#111;font-weight:800}
#app .reportInsightCard321 button{margin-top:auto;min-height:42px;font-weight:900}
#app .reportSecondaryButtons321{padding-top:10px;border-top:1px dashed #c6dacf}
@media(max-width:1200px){#app .reportInsightGrid321{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){#app .reportInsightGrid321{grid-template-columns:1fr}.reportInsightCard321{min-height:auto}}

/* ---- build323.css ---- */
/* BUILD323 - Electronic Payment PDF Report Center */
#app .electronicReportCenter323{border:1px solid #b8d8cb;background:linear-gradient(145deg,#08291f 0%,#0d4938 58%,#126b50 100%);color:#fff;box-shadow:0 16px 36px rgba(6,54,39,.18);overflow:hidden;position:relative}
#app .electronicReportCenter323:before{content:"";position:absolute;right:-90px;top:-120px;width:270px;height:270px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
#app .electronicHead323{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;position:relative;z-index:1}
#app .electronicHead323 h2{margin:3px 0 6px;color:#fff;font-size:20px;letter-spacing:.2px}
#app .electronicHead323 p{margin:0;max-width:900px;color:#d6ebe2;font-size:12px;font-weight:650;line-height:1.5}
#app .electronicEyebrow323{display:inline-block;font-size:10px;font-weight:900;letter-spacing:1.1px;color:#ffdb74}
#app .electronicMonth323{min-width:225px;padding:12px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.09);backdrop-filter:blur(4px)}
#app .electronicMonth323 label{display:block;color:#fff;font-size:10px;font-weight:900;letter-spacing:.4px}
#app .electronicMonth323 input{display:block;width:100%;margin-top:6px;min-height:40px;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:#fff;color:#111;padding:7px 9px;font-weight:900}
#app .electronicMonth323 button{width:100%;margin-top:8px;min-height:38px;border:0;border-radius:9px;background:#ffcf5a;color:#241c04;font-weight:900}
#app .electronicMethodGrid323{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:16px 0 14px;position:relative;z-index:1}
#app .electronicMethod323{min-height:112px;padding:12px 10px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.1);color:#fff;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:5px;box-shadow:none;transition:transform .15s ease,background .15s ease}
#app .electronicMethod323:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
#app .electronicMethod323.all323{background:linear-gradient(145deg,#ffcf5a,#e6aa22);color:#241c04;border-color:#ffe39a}
#app .electronicMethod323 span{font-size:9px;font-weight:900;letter-spacing:.7px;opacity:.85}
#app .electronicMethod323 b{font-size:14px;line-height:1.12}
#app .electronicMethod323 small{font-size:9px;line-height:1.35;opacity:.82}
#app #electronicPaymentPreview323{position:relative;z-index:1;background:#fff;color:#17241e;border-radius:16px;padding:14px;border:1px solid rgba(255,255,255,.36)}
#app .electronicLoading323{padding:24px;text-align:center;font-weight:900;color:#496158}
#app .electronicStatus323{display:flex;align-items:center;gap:8px;padding:5px 2px 12px;color:#2f4e40}
#app .electronicStatus323 b{font-size:11px}
#app .electronicStatus323 small{margin-left:auto;font-weight:900;color:#0d684b}
#app .liveDot323{width:9px;height:9px;border-radius:50%;background:#19a66a;box-shadow:0 0 0 4px rgba(25,166,106,.13)}
#app .electronicKpis323{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#app .electronicKpis323>div{border:1px solid #dce8e1;border-radius:12px;padding:11px 12px;background:linear-gradient(180deg,#fff,#f5faf7)}
#app .electronicKpis323 span{display:block;font-size:9px;font-weight:900;color:#60736a;letter-spacing:.45px}
#app .electronicKpis323 b{display:block;margin:4px 0;font-size:17px;color:#0c5b42}
#app .electronicKpis323 small{color:#75857d;font-size:9px}
#app .electronicBreakdown323{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 0}
#app .electronicBreakdown323>div{border-left:4px solid #0b7b59;background:#eef8f3;border-radius:10px;padding:9px}
#app .electronicBreakdown323 span{display:block;font-size:9px;font-weight:900;color:#4e665b}
#app .electronicBreakdown323 b{display:block;font-size:14px;color:#0b5f44;margin:3px 0}
#app .electronicBreakdown323 small{font-size:9px;color:#718078}
#app .electronicLatest323 h3{font-size:11px;color:#0c5b42;margin:11px 0 6px}
#app .electronicLatest323 table{font-size:11px}
#app .electronicLatest323 th{background:#0e5e45;color:#fff}
@media(max-width:1400px){#app .electronicMethodGrid323{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:950px){#app .electronicHead323{flex-direction:column}#app .electronicMonth323{width:100%;min-width:0}#app .electronicKpis323{grid-template-columns:repeat(2,minmax(0,1fr))}#app .electronicBreakdown323{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){#app .electronicMethodGrid323,#app .electronicKpis323,#app .electronicBreakdown323{grid-template-columns:1fr}#app .electronicMethod323{min-height:auto}}

/* ---- pagination.css ---- */
/* Screen-only paging. Reports and receipts print every matching record. */
.recordPage { width:100%; min-width:0; margin:10px 0 16px; color:#000; }
.recordTableViewport { width:100%; max-height:58vh; overflow:auto; border:1px solid #c9d8cf; border-radius:8px; }
.recordTableViewport table { margin:0; }
.recordPage tr.record-page-hidden { display:none!important; }
.recordPager { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; font-size:13px; font-weight:750; color:#000; }
.recordRange { font-variant-numeric:tabular-nums; }
.recordPageControls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.recordPageControls label { display:flex; align-items:center; gap:5px; margin:0; white-space:nowrap; color:#000; }
.recordPageControls input,.recordPageControls select { width:auto; min-height:36px; height:36px; margin:0; padding:5px 7px; border:1px solid #9bab9f; border-radius:7px; background:#fff; color:#000; font-size:13px; }
.recordPageControls input { width:62px; text-align:center; }
.recordPageControls button { min-height:36px; padding:7px 11px; border:1px solid #096637; background:#096637; color:#fff; font-size:12px; font-weight:800; }
.recordPageControls button:disabled { background:#edf1ee; border-color:#c4cdc7; color:#46554b; opacity:1; cursor:default; }
.recordPager .recordPageJump { font-size:13px; }
.ledgerPager { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:12px 0; }
.ledgerPager button { min-height:40px; }
.ledgerPager span { color:#000; font-size:14px; font-weight:800; }
.purchaseItemsMore { display:block; margin-top:5px; font-size:12px; font-weight:800; color:#000; }
.purchaseHistoryTable .purchaseProductLine:nth-child(n+3) { display:none; }
.purchaseHistoryTable td:has(> .purchaseProductLine:nth-child(3))::after { content:"VIEW for all products"; display:block; margin-top:4px; font-size:11px; font-weight:800; color:#000; }
@media(max-width:680px) {
  .recordPageControls { width:100%; justify-content:space-between; gap:5px; }
  .recordPageControls button { padding:7px; font-size:10px; }
  .recordPageControls label { font-size:11px; }
  .recordPageControls input { width:45px; }
  .recordPager { font-size:12px; }
  .recordTableViewport { max-height:52vh; }
}
@media print {
  .recordPager,.ledgerPager { display:none!important; }
  .recordPage,.recordTableViewport { display:block!important; height:auto!important; max-height:none!important; overflow:visible!important; border:0!important; margin:0!important; }
  .recordPage tr.record-page-hidden { display:table-row!important; }
  .recordPage table,.recordPage tbody,.recordPage tr { content-visibility:visible!important; contain:none!important; }
  .purchaseHistoryTable .purchaseProductLine:nth-child(n+3) { display:flex!important; }
  .purchaseHistoryTable td:has(> .purchaseProductLine:nth-child(3))::after { display:none; }
}

/* ---- build115.css ---- */
/* Build 115 — readable save status, bounded record pages and checkout-safe layout. */
.saveStatusBar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px clamp(12px,2vw,28px);border-bottom:1px solid #a7bfaf;background:#fff6dc;color:#000;flex:0 0 auto}
.saveStatusBar>div:first-child{min-width:0}
.saveStatusBar strong{display:block;color:#000;font-size:14px;font-weight:900;line-height:1.3}
.saveStatusBar #saveStatusDetail{display:block;margin-top:2px;color:#000;font-size:12px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.saveStatusBar[data-tone="saved"]{background:#eaf7ed;border-color:#9fbfa8}
.saveStatusBar[data-tone="error"]{background:#fff0ed;border-left:5px solid #ba2828}
.saveStatusActions{display:flex;flex:0 0 auto;gap:6px}
.saveStatusActions button{min-height:36px;padding:7px 10px;border:1px solid #9dad9f;background:#fff;color:#000;font-size:12px;font-weight:850}
.saveStatusActions button:disabled{cursor:wait;opacity:.65}
.inventoryPager,.branchSyncPager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:12px;color:#000;font-weight:700}
.inventoryPager .actions{flex-wrap:wrap;align-items:center;margin:0}
.inventoryPager label{display:flex;align-items:center;gap:7px;margin:0}
.inventoryPager select{width:auto;min-width:65px;margin:0}
.inventoryPager button:disabled,.branchSyncPager button:disabled{cursor:default;opacity:.5}
.branchSyncPanel td,.branchSyncPanel th{white-space:normal;overflow-wrap:anywhere}
#branchSyncNote{font-size:14px;font-weight:650;line-height:1.5}
/* Use remaining viewport space so the save bar does not move checkout off-screen. */
#app:has(> .posScreen){display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
#app:has(> .posScreen)>header{flex:0 0 auto}
#app>.posScreen{height:auto;flex:1 1 auto;min-height:0}
#app>.posScreen .cartPanel{overflow-y:auto;content-visibility:visible}
@media(max-width:700px){.saveStatusBar{gap:8px;padding:7px 10px;align-items:flex-start}.saveStatusBar strong{font-size:12px}.saveStatusBar #saveStatusDetail{font-size:11px}.saveStatusActions{gap:4px;flex-direction:column}.saveStatusActions button{min-height:30px;padding:5px 7px;font-size:11px}.inventoryPager .actions{gap:6px}.inventoryPager button,.branchSyncPager button{padding:8px;font-size:12px}}
@media print{.saveStatusBar,.inventoryPager,.branchSyncPager{display:none!important}}

/* ---- build116.css ---- */
/* Build 116 — POS Expenses and expense-aware End Shift. */
.btnExpense{background:#7d5420!important;color:#fff!important}
.checkoutActions .utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))}
.modalBox:has(.expenseCenter){width:min(1160px,96vw)}
.modalBox:has(.endShiftSummary){width:min(1050px,96vw)}
.expenseCenter{color:#000}
.expenseEntryPanel{margin:12px 0 18px;padding:14px;border:2px solid #b5cdbd;border-radius:14px;background:#f7fbf8}
.expenseShiftSummary,.expenseHistoryTotals{margin:10px 0}
.expenseShiftSummary .card,.expenseHistoryTotals .card{padding:12px;box-shadow:none}
.expenseShiftSummary span,.expenseHistoryTotals span{display:block;color:#111;font-size:11px;font-weight:800}
.expenseShiftSummary b,.expenseHistoryTotals b{display:block;margin-top:4px;color:#000;font-size:19px;font-weight:900}
.expenseForm{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
.expenseForm .expenseDescription{grid-column:1/-1}
.expenseHistoryPanel{padding-top:12px;border-top:2px solid #d6e2da}
.expenseFilters{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.expenseFilters label{flex:1 1 150px;min-width:140px;margin:0}
.expenseFilters label:nth-child(3){flex-basis:260px}
.expenseFilters button{min-height:42px}
.expenseHistoryTable{min-width:1080px}
.expenseHistoryTable td{vertical-align:top}
.expenseVoided td{background:#fff4f4!important;color:#4f2929;text-decoration:none}
.expensePager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:11px;color:#000;font-weight:750}
.expensePager .actions{margin:0}
.expensePager button:disabled{cursor:default;opacity:.5}
.expenseReportKpis{margin:12px 0 18px}
.endShiftSummary{margin:10px 0}
.endShiftSummary .card{padding:13px;box-shadow:none}
.endShiftSummary .kpi{font-size:clamp(20px,1.2vw + 10px,29px)}
@media(max-width:760px){.checkoutActions .utilityGroup{grid-template-columns:repeat(2,minmax(0,1fr))}.expenseForm{grid-template-columns:1fr 1fr}.expenseShiftSummary,.expenseHistoryTotals,.endShiftSummary{grid-template-columns:1fr 1fr}.expenseFilters label{width:100%;min-width:0;flex-basis:100%}.expenseFilters button{flex:1 1 calc(33.33% - 8px);padding:8px 5px;font-size:10px}}
@media(max-width:430px){.expenseForm{grid-template-columns:1fr}.expenseShiftSummary,.expenseHistoryTotals,.endShiftSummary{grid-template-columns:1fr 1fr}.expenseForm .expenseDescription{grid-column:1}.expenseShiftSummary b,.expenseHistoryTotals b{font-size:16px}}
@media print{.expensePager{display:none!important}}

/* ---- build117.css ---- */
/* Build 117: readable, bounded load screens; six bottom utility buttons. */
.btnLoad{background:#075985!important;color:#fff!important;border-color:#075985!important;font-weight:900}
.posCheckout .utilityGroup,.checkoutGroup.utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))}
.modalBox:has(.loadCenter){width:min(1180px,calc(100vw - 32px));max-width:1180px;max-height:calc(100dvh - 32px);overflow:auto;padding:0}
.loadCenter{width:100%;max-width:none!important;padding:22px;color:#000!important;font:600 16px/1.5 Arial,"Segoe UI",sans-serif;box-sizing:border-box;text-align:left}
.loadCenter *{box-sizing:border-box;text-shadow:none;filter:none}
.loadCenter h2,.loadCenter h3,.loadCenter h4,.loadCenter p,.loadCenter label,.loadCenter span,.loadCenter small,.loadCenter th,.loadCenter td,.loadCenter input,.loadCenter select{color:#000}
.loadCenter h2{font-size:28px;margin:0}.loadCenter h3{font-size:21px;margin:8px 0}.loadCenter h4{font-size:18px;margin:0}.loadCenter small{font-size:13px;line-height:1.45}
.loadCenter p{margin:8px 0}.loadCenter button{min-height:44px;font-size:14px;font-weight:800;white-space:normal}.loadCenter button:disabled{opacity:.55;cursor:not-allowed}
.loadHeader{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;border-bottom:2px solid #cedde4}
.loadEyebrow{font-size:12px;font-weight:800;letter-spacing:1px}.loadHeader>button{flex-shrink:0}
.loadTabs{position:static!important;display:flex!important;flex-wrap:wrap;width:100%!important;padding:12px 0!important;margin:0!important;gap:8px;background:none!important;box-shadow:none!important}
.loadTabs button{flex:1;color:#000;background:#e8f0f4;border:1px solid #a4bac5;border-radius:9px}.loadTabs button.selected{background:#075985;color:#fff}
.loadNotice{padding:12px 15px;border:1px solid #d99d24;border-left:5px solid #d99d24;border-radius:8px;background:#fff7de;font-size:14px;color:#000;margin:10px 0}
.loadNotice p{margin:4px 0 0}.loadCatalogInfo{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:6px 0;font-size:13px}
.loadFilters{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:14px 0}.loadFilters label{flex:1;min-width:180px;font-size:12px;letter-spacing:.3px;font-weight:800}
.loadFilters input,.loadFilters select,.loadForm input,.loadForm select{display:block;width:100%;min-width:0;border:1px solid #7d98a7;background:#fff;padding:11px 12px;border-radius:8px;min-height:46px;font-size:16px;font-weight:650;letter-spacing:0;margin-top:5px;color:#000}
.loadCenter input:focus,.loadCenter select:focus{outline:3px solid #1683b9;outline-offset:2px;box-shadow:none}
.loadCenter input::placeholder{color:#555;opacity:1}.loadCenter input:disabled{background:#e7ecef;color:#555}
.loadProviderHeading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:8px 0 14px}.loadProviderHeading h3{margin:0}.loadProviderHeading span{font-size:13px}
.loadSource{display:inline-block;font-size:12px;letter-spacing:.3px;color:#034969!important;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.loadPromoGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.loadPromoCard{display:flex;flex-direction:column;min-width:0;border:1px solid #9db4c1;border-radius:12px;background:#fff;padding:15px;box-shadow:0 3px 10px #1738480a}
.loadPromoCard.inactive{background:#eceff1}.loadPromoCard.inactive h4{text-decoration:line-through}
.loadPromoTitle{display:flex;justify-content:space-between;align-items:start;gap:12px}.loadPromoTitle h4{overflow-wrap:anywhere}.loadPromoTitle>b{font-size:21px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#000}
.loadValidity{align-self:flex-start;margin:10px 0 0;border-radius:6px;padding:3px 8px;background:#e3f1fa;font-size:13px;font-weight:800}
.loadPromoCard p{font-size:14px;flex:1}.loadPromoCard small{margin-top:8px;font-size:12px}.loadPromoActions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}
.loadPager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 0 4px;font-size:14px}.loadPager .actions{margin:0}
.loadEmpty{grid-column:1/-1;padding:26px;background:#f3f7f9;border-radius:10px}.loadSelection{padding:6px 0 10px}.loadSelection small{display:block;margin:8px 0}
.loadForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:16px 0}.loadForm label{font-size:13px;font-weight:800}
.loadForm input[type=tel]{font-size:22px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:1px}
.loadConfirmCheck{display:flex;align-items:flex-start;gap:10px;padding:12px;background:#eef5f9;border-radius:8px;line-height:1.5;margin:14px 0;font-size:15px;font-weight:800}
.loadConfirmCheck input[type=checkbox]{width:21px;height:21px;flex:0 0 21px;margin:3px 0 0;accent-color:#075985}
.loadMoneySummary{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#082d40;border-radius:12px;padding:18px}.loadMoneySummary span{color:#fff!important;font-size:13px;letter-spacing:.3px}.loadMoneySummary strong{display:block;color:#fff;font-size:30px;font-variant-numeric:tabular-nums}
.loadCostNote{font-size:13px!important;line-height:1.5}.loadFormActions{justify-content:flex-end}.loadReview{max-width:720px;margin:0 auto;padding:16px 0}.loadReview h3{font-size:26px}
.loadRecipientHero{display:block;font-size:38px;font-weight:900;letter-spacing:2px;font-variant-numeric:tabular-nums}.loadReview dl{margin:20px 0;border:1px solid #b2c6d1;border-radius:10px;padding:10px 16px}
.loadReview dl>div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #dce5e9;padding:9px 0}.loadReview dl>div:last-child{border:0}.loadReview dt,.loadReview dd{color:#000;font-size:16px;margin:0}.loadReview dd{text-align:right;font-weight:900;overflow-wrap:anywhere}
.loadReview .loadChangeHighlight{background:#ecf6b7;padding:12px;margin:0 -8px;border-radius:6px}.loadReview .loadChangeHighlight dd{font-size:27px}
.loadReportFilters label{min-width:135px}.loadReportFilters label:last-of-type{flex:2;min-width:210px}.loadReportKpis{margin:14px 0}.loadReportKpis .card{padding:14px}.loadReportKpis span{display:block;font-size:13px}.loadReportKpis b{display:block;font-size:25px;color:#000}
.loadCenter .tableScroll{width:100%;overflow-x:auto;max-height:none}.loadProviderTable{min-width:980px}.loadHistoryTable{min-width:1000px}.loadCenter table{font-size:14px}.loadCenter th{font-weight:900;background:#e9f2f7}.loadCenter td{font-weight:650;vertical-align:top}.loadCenter td small{display:block;margin-top:3px}.loadCenter .loadVoided{background:#ffebeb}.loadCenter .error{color:#9c1111!important;font-weight:800}
.loadReceiptDetails{border:2px solid #000;padding:9px;margin:10px 0;color:#000;overflow-wrap:anywhere;text-align:left}.loadReceiptDetails small{color:#000}
.loadShiftBreakdown{margin:12px 0;padding:12px;border:1px solid #a7c0cb;border-radius:8px;color:#000;background:#fff}.loadShiftBreakdown h3{margin:0 0 8px;font-size:15px}.loadShiftBreakdown>.row{display:flex;justify-content:space-between;gap:8px;padding:4px 0}.loadShiftBreakdown table{width:100%;font-size:inherit;border-collapse:collapse}.loadShiftBreakdown small{display:block;margin-top:8px}
@media(max-width:950px){.loadPromoGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.loadReportKpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.modalBox:has(.loadCenter){width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}.loadCenter{padding:14px}.loadCenter h2{font-size:24px}.loadPromoGrid,.loadForm{grid-template-columns:1fr}.loadTabs button{flex:1 1 100%;min-height:42px}.loadFilters label{min-width:100%;flex-basis:100%}.loadHeader{gap:8px}.loadRecipientHero{font-size:29px;letter-spacing:1px}.loadMoneySummary strong{font-size:25px}.loadReview dt,.loadReview dd{font-size:14px}.loadFormActions>button{width:100%}.loadPager{align-items:flex-start}.loadExportActions>button{flex:1 1 100%}.loadCenter .loadReportKpis b{font-size:22px}}
@media print{.loadShiftBreakdown{padding:4px;border-color:#000;background:#fff;break-inside:avoid}}

/* ---- build118.css ---- */
/* Build 118. Compact five-field entry and plain, high-contrast load receipts. */
.modalBox:has(.loadQuickEntry),.modalBox:has(.loadPaymentStep),.modalBox:has(.loadChargeSettings){width:min(860px,calc(100vw - 24px));max-width:860px}
.loadQuickEntry>h3{margin:8px 0 14px}.loadQuickForm{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
.loadQuickForm label:first-child,.loadQuickForm label:last-child{grid-column:1/-1}
.loadQuickForm label,.loadPaymentStep>label,.loadChargeSettings>label{display:block;font-size:13px;font-weight:900;color:#000;letter-spacing:.3px}
.loadQuickForm input,.loadQuickForm select,.loadPaymentStep>label input,.loadChargeSettings>label input{display:block;width:100%;min-height:50px;margin-top:6px;padding:11px 13px;border:1.5px solid #8098a5;border-radius:9px;background:#fff;color:#000;font:700 18px/1.3 Arial,sans-serif;box-sizing:border-box}
.loadQuickForm input[type=tel]{font-size:24px;letter-spacing:1px}.loadQuickForm input[type=number],.loadPaymentStep>label input,.loadChargeSettings>label input{font-size:25px;font-variant-numeric:tabular-nums}
.loadQuickTotals{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px;padding:16px 0}.loadQuickTotals>div{border:1px solid #aec5ce;border-radius:9px;padding:13px;background:#f1f6f8}
.loadQuickTotals>div:last-child{border:2px solid #075985;background:#dbeef7}.loadQuickTotals span{display:block;font-size:11px;font-weight:900;letter-spacing:.3px;color:#000}.loadQuickTotals b{display:block;margin-top:4px;font-size:26px;color:#000;font-weight:900;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.loadQuickActions{justify-content:flex-end;gap:12px;margin-top:16px}.loadQuickActions button{min-height:49px;padding:12px 20px}
.loadSetupNote{padding:12px;background:#fff4d1;border:1px solid #bd8718;border-radius:8px;font-size:14px}.loadSetupNote button{margin-left:8px}
.loadPaymentStep{max-width:710px;margin:0 auto}.loadPaymentReview{border:1px solid #a8bdc8;border-radius:10px;padding:12px 16px;margin-top:12px;background:#f6f9fa}.loadPaymentReview>b{font-size:19px}.loadPaymentReview p{margin:3px 0;overflow-wrap:anywhere}
.loadPaymentMethods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 18px}.loadPaymentMethods button{color:#000;background:#e8f0f4;border:1px solid #8da8b6}.loadPaymentMethods button.selected{color:#fff;background:#075985;border-color:#075985}
.loadPaymentChange{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:15px 0;padding:14px 16px;background:#eff6c8;border:1px solid #899b32;border-radius:9px}.loadPaymentChange span{font-size:13px;font-weight:900}.loadPaymentChange b{font-size:28px;font-variant-numeric:tabular-nums;color:#000}
.loadConfirmNote{font-size:14px!important}.loadSaveResponse{border-top:1px solid #a2b4bd;padding:12px 0 2px;margin-top:20px;text-align:center;color:#000;font-size:14px;font-weight:900}
.loadChargeSettings{max-width:650px;margin:0 auto;padding:10px 0}.loadChargeSettings>label{margin:22px 0 14px}.loadChargeSettings>label input{max-width:320px}.loadChargeSettings .loadCostNote{margin-top:25px;padding-top:12px;border-top:1px solid #a2b4bd}
.loadReceiptDetails{border:0;border-top:1px dashed #000;border-bottom:1px dashed #000;border-radius:0;padding:12px 0;margin:14px 0}.loadReceiptDetails>div{display:flex;justify-content:space-between;gap:15px;padding:4px 0;color:#000}.loadReceiptDetails span{font-size:14px;color:#000}.loadReceiptDetails b{font-size:16px;max-width:72%;text-align:right;overflow-wrap:anywhere;color:#000}
.loadReceiptScreen .saleReceiptPaper,.loadReceiptScreen .saleReceiptMeta small,.loadReceiptScreen .saleReceiptFooter{color:#000}.loadReceiptScreen .saleReceiptPaper{font-family:Arial,sans-serif;font-weight:650}.loadReceiptResponse small{display:block;font-size:12px;font-weight:800;color:#000}.loadReceiptResponse strong{font-size:25px!important;font-weight:900;letter-spacing:1px}
.loadReceiptResponse.failed,.loadReceiptResponse.voided{background:#ffebeb;padding:12px!important}.loadFailedHeader{background:#851919!important;color:#fff!important}.loadFailedHeader h2{color:#fff!important}
@media(max-width:620px){.modalBox:has(.loadQuickEntry),.modalBox:has(.loadPaymentStep),.modalBox:has(.loadChargeSettings){width:calc(100vw - 12px)}.loadQuickForm{grid-template-columns:1fr;gap:12px}.loadQuickForm label:first-child,.loadQuickForm label:last-child{grid-column:auto}.loadTabs button{flex:1 1 calc(50% - 8px);font-size:12px}.loadQuickTotals{gap:6px}.loadQuickTotals>div{padding:10px 7px}.loadQuickTotals b{font-size:20px}.loadQuickTotals span{font-size:10px}.loadPaymentMethods{grid-template-columns:1fr 1fr}.loadQuickActions>button{flex:1 1 100%}.loadPaymentReview .loadRecipientHero{font-size:28px}.loadReceiptDetails b{font-size:15px}.loadCenter .loadQuickEntry>h3{display:none}}

/* ---- build120.css ---- */
/* Build 120: branded landing page and Settings-only save details. */
.landingIntro.landingBrand{align-items:center;padding:32px clamp(24px,4vw,54px);background:#040835;text-align:center}
.landingBrandLogo{display:block;width:min(100%,320px);height:auto;aspect-ratio:1;object-fit:contain;margin:0 0 20px;border-radius:14px}
.landingBrand h1{font-size:clamp(23px,2.4vw,30px);line-height:1.2;margin:0;color:#fff}
.landingBrand p{font-size:15px;line-height:1.5;max-width:380px;margin:14px 0 0;color:#fff}
.landingBrand .landingFeatures{justify-content:center;margin-top:20px}
.landingShell .loginLogoWrap{width:180px;height:180px;border-radius:18px;margin:0 auto 18px;background:#040835;border:0;box-shadow:none}
.landingShell .brand,.landingShell .subbrand,.landingShell .loginField span{color:#000}
.dashboardBrandLogo{width:160px;height:160px;flex:0 0 160px;object-fit:contain;border-radius:16px;background:#040835}
.settingsSaveStatus{margin:14px 0;padding:14px 16px;border:1px solid #b5caba;border-radius:12px}
.settingsSaveStatus strong{font-size:16px}
.settingsSaveStatus #saveStatusDetail{font-size:13px;line-height:1.5}
.settingsSaveStatus .saveStatusActions button{min-height:42px;font-size:13px}
@media(min-width:821px){.landingShell .loginLogoWrap{display:none}}
@media(min-width:821px) and (max-height:760px){.landingBrandLogo{width:240px;margin-bottom:14px}.landingIntro.landingBrand{padding-top:24px;padding-bottom:24px}}
@media(max-width:820px){.landingShell .loginLogoWrap{display:grid}.landingShell .loginBox{padding:26px 24px}.landingShell .brand{font-size:23px}}
@media(max-width:680px){.dashboardWelcome{flex-wrap:wrap;gap:18px}.dashboardBrandLogo{width:110px;height:110px;flex-basis:110px}.settingsSaveStatus{align-items:stretch;flex-direction:column;padding:12px}.settingsSaveStatus .saveStatusActions{flex-direction:row;flex-wrap:wrap}.settingsSaveStatus .saveStatusActions button{flex:1 1 120px}}
@media(max-width:820px) and (max-height:760px){.landingShell .loginLogoWrap{width:140px;height:140px;margin-bottom:12px}}

/* ---- build123.css ---- */
/* Server confirmation must be visibly different from a device-only record. */
.saleReceiptSuccess[data-save-state="pending"]{background:#fff3d6;color:#000;border-color:#a86e00}
.saleReceiptSuccess[data-save-state="pending"] h2,
.saleReceiptSuccess[data-save-state="pending"] p,
.saleReceiptSuccess[data-save-state="pending"] small{color:#000;opacity:1}
.saleReceiptSuccess[data-save-state="pending"] .saleReceiptCheck{background:#ffdc8a;color:#000}
#historySyncStatus{flex:1;min-width:220px;color:#000;font-weight:700;line-height:1.45}
.loadReceiptResponse.pending{border-color:#a86e00;background:#fff8e8;color:#000}

/* ---- build136.css ---- */
/* Build 136 — smooth UI + non-blocking D1 fast-sync status. */
@media screen {
  html { scroll-behavior: smooth; }
  body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
  #main > .panel, #main > section, .tableWrap, .reportTableWrap {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }
  table { border-collapse: separate; border-spacing: 0; }
  tbody tr { contain: layout paint style; }
  button, .navItem, .card, .panel { transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease; }
  button:active { transform: translateY(1px) scale(.995); }
  .d1FastSyncToast {
    position: fixed; right: 18px; bottom: 18px; z-index: 999999;
    min-width: 260px; max-width: min(420px, calc(100vw - 36px));
    padding: 12px 15px; border-radius: 14px; background: #092f20; color: #fff;
    box-shadow: 0 14px 40px rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.18);
    display: grid; gap: 3px; opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .d1FastSyncToast.show { opacity: 1; transform: translateY(0); }
  .d1FastSyncToast b { font-size: 13px; letter-spacing: .03em; }
  .d1FastSyncToast span { font-size: 12px; opacity: .86; }
  .d1FastSyncToast[data-state="saved"] { background: #075c35; }
  .d1FastSyncToast[data-state="error"] { background: #7a271a; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---- build147.css ---- */
/* BUILD 147 — Readable clean UI / larger POS action buttons
   UI-only override. No login, D1, payment, inventory, or transaction logic changed. */
:root{
  --ui-radius:12px;
  --ui-shadow:0 4px 14px rgba(5,46,27,.10);
  --ui-border:#cbd9d0;
}

/* General readability */
body{font-size:14px;line-height:1.4}
button{min-height:44px;font-size:13px;font-weight:900;line-height:1.15;letter-spacing:.01em}
input,select,textarea{font-size:14px;min-height:44px}
label{font-size:12px;font-weight:800}
.pageTitle{font-weight:1000;letter-spacing:.01em}

/* Cleaner panels/framework */
.panel,.card,.toolbar,.form,.modalBox{border-color:var(--ui-border);box-shadow:var(--ui-shadow)}
.toolbar{gap:10px;padding:12px}
.toolbar button{min-height:46px;padding:10px 15px;font-size:13px}

/* Back-office side/bottom navigation */
nav{gap:8px;padding-top:10px}
nav button{min-height:50px;padding:11px 16px;font-size:13px;font-weight:900;letter-spacing:.015em}
nav button.active{font-weight:1000}
@media(min-width:901px){
  #app:not(:has(.posScreen)) nav button{min-height:48px!important;font-size:13px!important;padding:11px 15px!important}
}

/* POS checkout: make bottom buttons large, readable, and visually separated */
.posScreen .checkoutActions{
  gap:10px!important;
  padding:0 0 4px;
}
.posScreen .checkoutGroup{
  gap:8px!important;
  padding:27px 9px 9px!important;
  border:1px solid #c8d8ce!important;
  border-radius:14px!important;
  background:#f7faf8!important;
  box-shadow:0 3px 10px rgba(5,46,27,.06);
}
.posScreen .groupLabel{
  top:7px!important;
  left:11px!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.7px!important;
  color:#334c3e!important;
}
.posScreen .checkoutActions .posBtn{
  min-height:62px!important;
  padding:10px 8px!important;
  border-radius:11px!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1.08!important;
  letter-spacing:.015em!important;
  text-shadow:0 1px 1px rgba(0,0,0,.22);
  box-shadow:0 4px 10px rgba(0,0,0,.16)!important;
}
.posScreen .checkoutActions .posBtn small{
  display:block!important;
  margin-bottom:5px!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.45px!important;
  color:rgba(255,255,255,.92)!important;
}
.posScreen .checkoutActions .btnHold,
.posScreen .checkoutActions .btnRetail.selected,
.posScreen .checkoutActions .btnWholesale.selected{
  text-shadow:none;
}
.posScreen .checkoutActions .btnHold small{color:#171204!important}

/* Utility buttons also need strong contrast */
.btnExpense{background:#8b3f97!important;color:#fff!important}
.btnLoad{background:#0a7d70!important;color:#fff!important}
.btnSplit{background:#5b43b5!important;color:#fff!important}
.btnDeposit{color:#fff!important}

/* Cart action buttons */
.cartButtons{gap:5px!important}
.cartButtons button,.tableActions button{
  min-height:40px!important;
  padding:8px 10px!important;
  font-size:11px!important;
  font-weight:1000!important;
  line-height:1.1!important;
}
.cartQtyBtn{min-width:38px!important;min-height:38px!important;font-size:20px!important}
.cartQtyValue{font-size:15px!important}
.cartItemName{font-size:14px!important}
.cartUnitPrice{font-size:11px!important}

/* Payment modals */
.cashPayment h2,.splitPayment h2{font-size:22px!important;line-height:1.2}
.cashDue span,.cashChange span,.customerDueSummary span{font-size:11px!important;font-weight:1000!important;letter-spacing:.55px}
.cashDue strong,.cashChange strong{font-size:25px!important}
.tenderButtons button{min-height:58px!important;font-size:13px!important;font-weight:1000!important}
.cashKeypad button,.referenceKeypad button{min-height:62px!important;font-size:18px!important;font-weight:1000!important}
.cashActions button{min-height:54px!important;font-size:14px!important;font-weight:1000!important}
.splitPaymentRow{padding:12px!important;gap:10px!important;background:#fff!important}
.splitPaymentRow input,.splitPaymentRow select{min-height:46px!important;font-size:13px!important}

/* Tables and actions */
table{font-size:13px!important}
th{font-size:12px!important;font-weight:1000!important}
td{font-size:13px!important}
.tableActions{display:flex;flex-wrap:wrap;gap:6px}

/* POS total area */
.cartSummary small{font-size:9px!important}
.cartSummary b{font-size:13px!important}
.grandTotalLabel{font-size:13px!important}
.cartTotal strong{font-weight:1000!important}
.barcodeInputWrap input{font-size:15px!important;font-weight:900!important}

/* Responsive without shrinking buttons into unreadable text */
@media(max-width:1180px){
  .posScreen .checkoutActions .posBtn{min-height:58px!important;font-size:12px!important;padding:8px 6px!important}
  .posScreen .checkoutActions .posBtn small{font-size:9px!important}
}
@media(max-width:900px){
  .posScreen .checkoutActions{grid-template-columns:1fr!important}
  .posScreen .shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:56px!important;font-size:12px!important}
}
@media(max-width:680px){
  body{font-size:13px}
  button{font-size:12px}
  .posScreen .checkoutGroup{padding:25px 6px 7px!important;gap:5px!important}
  .posScreen .shortcutGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .utilityGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:52px!important;font-size:11px!important;padding:7px 5px!important}
  .posScreen .checkoutActions .posBtn small{font-size:8px!important;margin-bottom:3px!important}
  nav button{min-height:48px;font-size:12px;padding:10px 13px}
  .tableActions button{min-height:40px!important;font-size:10px!important}
  .cashActions button{width:100%}
}

/* ---- build148.css ---- */
/* BUILD 148 — Adaptive Device UI + Turbo D1 visual polish */
:root{--tap-min:46px;--ui-gap:10px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;overflow-x:hidden}
button,input,select,textarea{touch-action:manipulation}

/* POS adapts by available screen, not by shrinking text until unreadable. */
.posScreen{max-width:100%;overflow:hidden}
.posScreen .posGrid{min-width:0}
.posScreen .productPanel,.posScreen .cartPanel{min-width:0}
.posScreen .checkoutActions{align-items:stretch}
.posScreen .checkoutActions .posBtn{white-space:normal;overflow-wrap:anywhere}
.posScreen .barcodeDock,.posScreen .posToolbar,.posScreen .cartSummary{min-width:0}

/* Desktop / large POS: balanced workspace and readable checkout. */
@media (min-width:1201px){
  .posScreen .posGrid:not(.posCartOnly){grid-template-columns:minmax(420px,.92fr) minmax(620px,1.45fr)!important;gap:14px!important}
  .posScreen .checkoutActions{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .posScreen .priceGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .paymentGroup{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .posScreen .actionGroup,.posScreen .utilityGroup,.posScreen .shortcutGroup{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:62px!important;font-size:14px!important}
}

/* Tablet landscape / small laptop */
@media (min-width:769px) and (max-width:1200px){
  .posScreen{padding:10px!important}
  .posScreen .posGrid:not(.posCartOnly){grid-template-columns:minmax(300px,.85fr) minmax(430px,1.25fr)!important;gap:10px!important}
  .posScreen .checkoutActions{grid-template-columns:1fr!important;gap:8px!important}
  .posScreen .priceGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .paymentGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .actionGroup,.posScreen .utilityGroup,.posScreen .shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:58px!important;font-size:13px!important;padding:9px 6px!important}
  .cartButtons button,.tableActions button{min-height:44px!important}
}

/* Tablet portrait and phones: stack panels, keep controls finger-sized. */
@media (max-width:768px){
  #app:has(> .posScreen){height:auto!important;min-height:100dvh!important;overflow:visible!important}
  #app>.posScreen{height:auto!important;min-height:calc(100dvh - 58px)!important;overflow:visible!important;padding:8px!important}
  .posScreen .posGrid,.posScreen .posGrid:not(.posCartOnly){display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;gap:8px!important;overflow:visible!important}
  .posScreen .productPanel,.posScreen .cartPanel{height:auto!important;max-height:none!important;overflow:visible!important}
  .posScreen .products{max-height:38dvh!important;overflow:auto!important}
  .posScreen .cartPanel{order:-1!important}
  .posScreen .cartItems{max-height:38dvh!important;overflow:auto!important}
  .posScreen .posToolbar{position:sticky!important;top:0!important;z-index:12!important;background:#fff!important;border-radius:12px!important;box-shadow:0 4px 14px rgba(5,46,27,.09)!important}
  .posScreen .checkoutActions{position:static!important;grid-template-columns:1fr!important;gap:8px!important}
  .posScreen .checkoutGroup{padding:26px 7px 7px!important;gap:6px!important}
  .posScreen .priceGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .paymentGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .actionGroup,.posScreen .utilityGroup,.posScreen .shortcutGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:54px!important;font-size:12px!important;line-height:1.15!important;padding:8px 5px!important}
  .posScreen .checkoutActions .posBtn small{font-size:9px!important;margin-bottom:3px!important}
  .barcodeDock{position:sticky!important;bottom:0!important;z-index:11!important;background:#fff!important;box-shadow:0 -4px 14px rgba(5,46,27,.08)!important}
  .barcodeDock input{min-height:48px!important;font-size:16px!important}
  nav{overscroll-behavior:contain}
  table{font-size:12px!important}
  th{font-size:11px!important}
  td{font-size:12px!important}
}

/* Compact phones */
@media (max-width:480px){
  .posScreen{padding:6px!important}
  .posScreen .posToolbar{grid-template-columns:1fr 1fr!important;gap:5px!important;padding:6px!important}
  .posScreen .posSearchWrap{grid-column:1/-1!important}
  .posScreen .posToolbar button,.posScreen .posToolbar select,.posScreen .posToolbar input{min-height:46px!important;font-size:12px!important}
  .posScreen .paymentGroup,.posScreen .actionGroup,.posScreen .utilityGroup,.posScreen .shortcutGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:52px!important;font-size:11px!important}
  .cashPayment,.splitPayment{width:min(96vw,560px)!important;max-height:92dvh!important;overflow:auto!important}
  .splitPaymentRow{grid-template-columns:1fr!important}
  .cashKeypad button,.referenceKeypad button{min-height:58px!important}
  .cartButtons{flex-wrap:wrap!important}
}

/* Touch devices receive larger targets even on higher-resolution tablets. */
@media (pointer:coarse){
  button,.cartQtyBtn,.tableActions button{min-height:var(--tap-min)}
  input,select,textarea{min-height:46px;font-size:16px}
  .posScreen .checkoutActions .posBtn{min-height:58px!important}
}

/* Portrait tablet uses a one-column POS to avoid cramped cart/buttons. */
@media (orientation:portrait) and (min-width:600px) and (max-width:1024px){
  .posScreen .posGrid:not(.posCartOnly){grid-template-columns:1fr!important;grid-template-rows:auto auto!important}
  .posScreen .cartPanel{order:-1!important}
  .posScreen .products{max-height:36dvh!important}
  .posScreen .paymentGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .actionGroup,.posScreen .utilityGroup,.posScreen .shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Save badge stays visible but does not block cashier work. */
.networkBadge,#saveStatusBar{backdrop-filter:blur(8px)}

/* ---- build156.css ---- */
/* BUILD156 - readable mouse-free Inventory shortcuts */
.inventoryShortcutBar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px;padding:12px 14px;border:1px solid rgba(20,91,58,.22);border-radius:14px;background:linear-gradient(135deg,rgba(233,248,239,.98),rgba(245,250,255,.98));font-size:13px;font-weight:800}
.inventoryShortcutBar b{margin-right:4px;font-size:13px}.inventoryShortcutBar span{display:inline-flex;align-items:center;min-height:32px;padding:5px 10px;border-radius:9px;background:#fff;border:1px solid rgba(0,0,0,.10);box-shadow:0 1px 2px rgba(0,0,0,.05);white-space:nowrap}
.inventoryToolbar button{min-height:48px;font-weight:850}.inventoryToolbar button small,.inventoryRow .tableActions button small{display:inline-block;margin-right:5px;padding:2px 5px;border-radius:5px;background:rgba(0,0,0,.10);font-size:10px;font-weight:900}
#invTable .inventoryRow{cursor:pointer;transition:background .12s ease,box-shadow .12s ease}#invTable .inventoryRow:hover{background:rgba(31,125,78,.07)}#invTable .inventoryRow.inventorySelected{background:rgba(40,155,91,.16);box-shadow:inset 4px 0 0 #18864b}#invTable .inventoryRow.inventorySelected td:first-child{font-weight:900}
@media(max-width:800px){.inventoryShortcutBar{overflow-x:auto;flex-wrap:nowrap;padding:10px}.inventoryShortcutBar span{flex:0 0 auto}.inventoryToolbar{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.inventoryToolbar input{grid-column:1/-1;min-height:48px}.inventoryToolbar button{width:100%;min-height:52px}}

/* ---- build182.css ---- */

/* BUILD180 — configurable Spend & Get Free promotion */
.promoSettingsPanel{border:2px solid #159447;background:linear-gradient(135deg,#f7fff9,#edf9f1)}
.promoSettingsHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.promoSettingsHead h2{margin-bottom:4px}.promoExample{margin-top:12px;padding:14px 16px;border-radius:12px;background:#073f27;color:#fff}.promoExample strong{color:#ffe16b}.promoLiveStrip{margin:0 0 12px;padding:12px 16px;border:1px solid #8abfa0;border-left:6px solid #118847;border-radius:14px;background:linear-gradient(90deg,#effaf3,#fff);display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 5px 18px #0c5c2520}.promoLiveStrip>div:first-child{display:flex;flex-direction:column;gap:3px}.promoLiveStrip small{font-size:10px;font-weight:900;letter-spacing:.12em;color:#16723d}.promoLiveStrip b{font-size:18px}.promoLiveStrip span{font-size:12px;color:#496158}.promoLiveProgress{text-align:right;display:flex;flex-direction:column}.promoLiveProgress strong{font-size:18px;color:#0a6b36}.promoLiveStrip.qualified{background:linear-gradient(90deg,#e6fff0,#f8fff9);border-color:#00a64f}.promoLiveStrip.qualified .promoLiveProgress span{font-weight:900;color:#00843f}.promoLiveStrip.unavailable{border-color:#d29100;background:#fff8e7}.promoFreeRow{background:linear-gradient(90deg,#effff4,#fff)!important;outline:1px solid #84d6a4}.promoFreeBadge{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;background:#0d8c47;color:#fff;font-size:10px;vertical-align:middle}.promoQtyLocked{justify-content:center!important}.promoAutoTag{display:inline-flex;padding:7px 10px;border-radius:8px;background:#0a6b36;color:#fff;font-size:10px;font-weight:900}.promoFreeRow .cartItemTotal strong{color:#0a8b43}.promoFreeRow .cartUnitPrice{color:#0a7b3e;font-weight:800}@media(max-width:900px){.promoLiveStrip,.promoSettingsHead{flex-direction:column;align-items:stretch}.promoLiveProgress{text-align:left}}
/* BUILD182 — advanced configurable promo scope + multi-reward editor */
.promoRuleForm{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.promoRewardsEditor{margin-top:14px;padding:16px;border:1px solid #9fcdb0;border-radius:14px;background:#fff}
.promoRewardsTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}.promoRewardsTitle h3{margin:0 0 4px}.promoRewardsTitle>b{padding:6px 10px;border-radius:999px;background:#e7f7ed;color:#08733a;font-size:11px}
.promoRewardRows{display:grid;gap:8px}.promoRewardRow{display:grid;grid-template-columns:38px minmax(220px,1fr) 120px;gap:10px;align-items:end;padding:10px;border:1px solid #d7e7dc;border-radius:10px;background:#fbfefc}.promoRewardNo{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0d8144;color:#fff;font-weight:900;margin-bottom:7px}.promoRewardRow label{margin:0}
.saleReceiptPromo{margin:8px 0;padding:8px;border:1px solid #87c99f;border-radius:8px;background:#f3fff7}.promoFreeReceiptItem{background:#f2fff6;border-radius:7px;padding:6px!important}.promoFreeReceiptItem b{color:#07813f}
@media(max-width:760px){.promoRewardRow{grid-template-columns:34px 1fr}.promoRewardRow label:last-child{grid-column:2}.promoRewardsTitle{flex-direction:column}}

/* ---- build195.css ---- */
/* BUILD195 — Advanced clean PC POS + no-lag visual layer.
   Flat rendering, no blur filters, no heavy animation, wide cart + right action rail. */
:root{
  --b195-green:#075d34;
  --b195-green-dark:#043f25;
  --b195-green-soft:#eaf5ef;
  --b195-line:#d9e6de;
  --b195-text:#10251a;
  --b195-muted:#617067;
  --b195-bg:#f4f7f5;
  --b195-panel:#ffffff;
  --b195-radius:14px;
}
html,body{background:var(--b195-bg)!important;color:var(--b195-text)}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}
*{scroll-behavior:auto!important}
header{background:linear-gradient(90deg,var(--b195-green-dark),var(--b195-green))!important;border-bottom:0!important;box-shadow:0 2px 10px rgba(4,63,37,.14)!important}
header,.panel,.toolbar,.networkBadge,.saveStatusBar,.dashboardModule,.posBtn{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#app>main{max-width:none!important}
.networkBadge{border-radius:999px!important;box-shadow:none!important;font-weight:900!important;letter-spacing:.25px}
.networkBadge.networkOnline{background:#e8f8ef!important;color:#075d34!important;border:1px solid #9bd4b5!important}
.networkBadge.networkQueued{background:#fff7df!important;color:#795300!important;border:1px solid #e8cb79!important}
.networkBadge.networkOffline{background:#fff0f0!important;color:#9e2028!important;border:1px solid #e4a4a8!important}

/* Global panels: clean, flat, fast. */
.panel,.toolbar{background:var(--b195-panel)!important;border:1px solid var(--b195-line)!important;border-radius:var(--b195-radius)!important;box-shadow:0 2px 8px rgba(13,59,35,.045)!important}
button,input,select,textarea{font:inherit}
button{transition:background-color .08s ease,border-color .08s ease!important;transform:none!important;filter:none!important}
button:hover{transform:none!important;filter:none!important}
button:active{transform:none!important}

/* Dashboard cards render independently and do not repaint the whole page. */
.dashboardModule,.dashboardKpi{contain:layout paint style}
.dashboardModule{box-shadow:none!important;border:1px solid var(--b195-line)!important}
.dashboardWelcome{box-shadow:none!important;border:1px solid var(--b195-line)!important}

/* POS terminal */
.posScreen{padding:8px 10px 12px!important;overflow:hidden!important}
.posHeading{margin:0 0 8px!important;padding:10px 14px;background:#fff;border:1px solid var(--b195-line);border-radius:12px;box-shadow:none!important}
.posHeading .pageTitle{font-size:19px!important;letter-spacing:.2px!important}
.posStatusBar{gap:6px!important}
.posStatusBar>span{border:1px solid #dfe9e3!important;background:#f8fbf9!important;border-radius:10px!important;box-shadow:none!important}
.posStatusBar>span small{color:#708078!important}
.posStatusBar>span b{color:#163526!important}
.posScreen .posToolbar{display:grid!important;grid-template-columns:minmax(380px,1fr) minmax(180px,250px) 120px 130px!important;gap:8px!important;padding:9px!important;margin-bottom:8px!important;box-shadow:none!important}
.posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{min-height:44px!important;border-radius:9px!important}
.posScreen .posToolbar input{font-size:15px!important;background:#fbfdfc!important}
.posSearchResults{border-radius:10px!important;box-shadow:0 8px 18px rgba(6,54,31,.10)!important}

.posScreen .posGrid.posCartOnly{display:block!important;min-height:0!important;height:calc(100dvh - 188px)!important}
.posScreen .cartPanel{height:100%!important;display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;gap:6px!important;padding:10px!important;border-radius:14px!important;overflow:hidden!important;box-shadow:none!important}
.cartPanel>h2{margin:0!important;font-size:15px!important;color:#214332!important}
.cartListHeader{margin:0!important;background:#f1f6f3!important;border:1px solid #e1ebe5!important;border-radius:9px!important;padding:8px 12px!important}
.cartItemsScroll{min-height:0!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0!important}
.cartRow{margin:0 0 5px!important;border:1px solid #e1e9e4!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important;contain:layout paint style}
.cartRow:hover{background:#fbfdfc!important;border-color:#c7dace!important}
.cartItemName{font-size:14px!important}
.cartQtyBtn{box-shadow:none!important}
.cartButtons button{min-height:34px!important;border-radius:8px!important}
.emptyCartState{border:1px dashed #c9ddd1!important;background:#fbfdfc!important;border-radius:12px!important;min-height:180px!important}

/* Bottom barcode stays on the cart side; transaction shortcuts live on the other side. */
.cartFixedFooter{display:grid!important;grid-template-columns:minmax(0,1fr) 340px!important;grid-template-areas:
  "barcode actions"
  "summary actions"
  "total actions"!important;gap:7px 10px!important;align-items:stretch!important;background:#fff!important;border-top:1px solid #e2ebe5!important;padding-top:8px!important}
.barcodeDock{grid-area:barcode!important;margin:0!important;position:static!important;border:1px solid #bcd3c5!important;background:#f7fbf8!important;border-radius:10px!important;box-shadow:none!important}
.barcodeShortcut{background:var(--b195-green)!important}
.barcodeDock input{min-height:42px!important;border:1px solid #aac8b7!important;font-size:16px!important;box-shadow:none!important}
.barcodeDock input:focus{border-color:#087b45!important;box-shadow:0 0 0 2px rgba(8,123,69,.10)!important}
.cartSummary{grid-area:summary!important;margin:0!important;gap:6px!important}
.cartSummary>span{border:1px solid #e2eae5!important;background:#fbfdfc!important;border-radius:9px!important;box-shadow:none!important}
.cartTotal{grid-area:total!important;margin:0!important;min-height:66px!important;border-radius:11px!important;background:linear-gradient(90deg,#06482a,#078344)!important;box-shadow:none!important}
.checkoutActions{grid-area:actions!important;position:static!important;display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin:0!important;min-width:0!important;align-self:stretch!important}
.checkoutGroup{position:relative!important;margin:0!important;padding:24px 7px 7px!important;border:1px solid #dce8e1!important;border-radius:11px!important;background:#f8fbf9!important;box-shadow:none!important;align-content:start!important}
.checkoutGroup.shortcutGroup{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
.checkoutGroup.utilityGroup{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
.checkoutGroup .groupLabel{position:absolute!important;top:7px!important;left:9px!important;color:#66776e!important;font-size:8px!important;font-weight:900!important;letter-spacing:.75px!important}
.posScreen .checkoutActions .posBtn{min-height:42px!important;padding:6px 5px!important;border-radius:8px!important;font-size:10px!important;box-shadow:none!important;line-height:1.05!important}
.posScreen .checkoutActions .posBtn small{font-size:7px!important;margin-bottom:2px!important}
.posScreen .checkoutActions .posBtn.selected{outline:2px solid #f0bd35!important;outline-offset:0!important;box-shadow:none!important}

/* Save/Data status: compact and calm. */
.saveStatusBar{box-shadow:none!important}
.saveStatusBar[data-tone="saved"]{border-color:#aad7bc!important;background:#effaf3!important}
.saveStatusBar[data-tone="pending"]{border-color:#e9d79b!important;background:#fffaf0!important}
.saveStatusBar[data-tone="error"]{border-color:#e3a3a7!important;background:#fff4f4!important}
.autoDataFabric195{border-left:4px solid #0a8148!important}

/* Heavy tables: isolate paint and keep scrolling responsive. */
.tableScroll{contain:layout paint;overscroll-behavior:contain}
tbody tr{contain:layout style}

@media(max-width:1280px){
  .posScreen .posToolbar{grid-template-columns:minmax(260px,1fr) minmax(160px,220px) 110px 120px!important}
  .cartFixedFooter{grid-template-columns:minmax(0,1fr) 300px!important}
  .posScreen .checkoutActions .posBtn{font-size:9px!important}
}
@media(max-width:1040px){
  .posScreen{overflow:auto!important}
  .posScreen .posGrid.posCartOnly{height:auto!important;min-height:calc(100dvh - 185px)!important}
  .posScreen .cartPanel{height:auto!important;min-height:calc(100dvh - 190px)!important;grid-template-rows:auto auto minmax(280px,1fr) auto!important;overflow:visible!important}
  .cartFixedFooter{grid-template-columns:1fr!important;grid-template-areas:"barcode" "summary" "total" "actions"!important}
  .checkoutActions{grid-template-columns:2fr 1fr!important}
  .posScreen .posToolbar{grid-template-columns:1fr 1fr!important}
}
@media(max-width:680px){
  .posScreen{padding:5px!important}
  .posScreen .posToolbar{grid-template-columns:1fr 1fr!important;padding:6px!important}
  .checkoutActions{grid-template-columns:1fr!important}
  .checkoutGroup.shortcutGroup,.checkoutGroup.utilityGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cartRow{contain:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- build196.css ---- */
/* BUILD196 — visible LIVE blink + auto-fit cashier screen + Price Inquiry shortcut.
   Blink is limited to tiny status LEDs (opacity only) to stay GPU-cheap and avoid UI lag. */
@keyframes b196LiveBlink{0%,42%{opacity:1;transform:scale(1)}43%,74%{opacity:.24;transform:scale(.78)}75%,100%{opacity:1;transform:scale(1)}}
.networkBadge.networkOnline i{animation:b196LiveBlink .9s steps(1,end) infinite!important;box-shadow:0 0 0 3px rgba(17,136,71,.12)}
.d1AutoLiveBadge{display:inline-flex!important;align-items:center!important;gap:7px!important}
.d1AutoLiveBadge::before{content:"";width:8px;height:8px;border-radius:50%;background:#0b914d;animation:b196LiveBlink .9s steps(1,end) infinite!important;box-shadow:0 0 0 3px rgba(11,145,77,.12)}

/* Price inquiry action and modal. */
.btnInquiry{background:#17795b!important}
.priceInquiryPanel{width:min(760px,94vw)!important}
.priceInquirySearchLabel{display:grid;gap:6px;font-size:11px;font-weight:900;color:#31533f}
.priceInquirySearchLabel input{min-height:50px;padding:10px 13px;border:2px solid #168654;border-radius:10px;font-size:18px;font-weight:850;letter-spacing:.3px;background:#fff}
.priceInquirySearchLabel input:focus{outline:0;box-shadow:0 0 0 3px rgba(22,134,84,.12)}
.priceInquiryEmpty{margin-top:10px;padding:20px;border:1px dashed #bdd6c6;border-radius:11px;background:#f8fcfa;text-align:center;color:#64766b;font-weight:800}
.priceInquiryMatches{display:grid;gap:5px;max-height:360px;margin-top:10px;overflow:auto;overscroll-behavior:contain}
.priceInquiryMatches button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:8px 11px;border:1px solid #dbe9e0;border-radius:9px;background:#fff;color:#173728;text-align:left}
.priceInquiryMatches button:hover{background:#eef8f2;border-color:#9fc8ad}
.priceInquiryMatches button span{display:grid;min-width:0}.priceInquiryMatches button b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.priceInquiryMatches button small{color:#6b7d72}.priceInquiryMatches button strong{color:#087443;white-space:nowrap;font-size:16px}
.priceInquiryCard{margin-top:10px;padding:14px;border:1px solid #b8d7c4;border-radius:12px;background:#f8fcfa}
.priceInquiryName{font-size:20px;font-weight:950;color:#0a4127}
.priceInquiryMeta{display:grid;grid-template-columns:2fr 1fr 1fr;gap:7px;margin:10px 0}
.priceInquiryMeta span{padding:8px;border:1px solid #dfeae3;border-radius:8px;background:#fff}.priceInquiryMeta small,.priceInquiryPrices small{display:block;color:#718078;font-size:8px;font-weight:950;letter-spacing:.7px}.priceInquiryMeta b{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.priceInquiryPrices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.priceInquiryPrices section{padding:12px;border-radius:10px;background:#075d34;color:#fff}.priceInquiryPrices section:nth-child(2){background:#6346a8}.priceInquiryPrices section.managerOnlyPrice{background:#4c5d54}.priceInquiryPrices strong{display:block;margin-top:4px;font-size:24px}.priceInquiryPrices small{color:rgba(255,255,255,.78)}
.priceInquiryCategory{margin-top:9px;color:#607267;font-size:11px;font-weight:800}.priceInquiryHint{text-align:center;color:#64766b;font-size:11px}

/* Auto-fit POS controls: use viewport-aware sizing instead of forcing a fixed desktop height. */
.posScreen{height:calc(100dvh - 58px)!important;min-height:0!important;padding:clamp(4px,1vh,9px) clamp(5px,.8vw,11px) clamp(5px,1vh,11px)!important}
.posHeading{padding:clamp(6px,1vh,10px) 12px!important;margin-bottom:clamp(4px,.8vh,8px)!important}
.posScreen .posToolbar{gap:clamp(4px,.7vh,8px)!important;padding:clamp(5px,.8vh,9px)!important;margin-bottom:clamp(4px,.8vh,8px)!important}
.posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{min-height:clamp(36px,5vh,44px)!important}
.posScreen .posGrid.posCartOnly{height:auto!important;flex:1 1 auto!important;min-height:0!important}
.posScreen .cartPanel{min-height:0!important;padding:clamp(5px,.8vh,10px)!important;gap:clamp(3px,.6vh,6px)!important}
.cartFixedFooter{grid-template-columns:minmax(0,1fr) clamp(275px,22vw,350px)!important;gap:clamp(4px,.6vh,7px) clamp(6px,.8vw,10px)!important;padding-top:clamp(4px,.7vh,8px)!important}
.checkoutActions{gap:clamp(4px,.6vh,7px)!important}
.checkoutGroup{padding:clamp(18px,2.5vh,24px) 6px 6px!important;gap:clamp(3px,.55vh,6px)!important}
.posScreen .checkoutActions .posBtn{min-height:clamp(32px,5.1vh,42px)!important;padding:clamp(3px,.65vh,6px) 4px!important;font-size:clamp(8px,1.05vw,10px)!important}
.posScreen .checkoutActions .posBtn small{font-size:clamp(6px,.75vw,7px)!important;margin-bottom:1px!important}
.barcodeDock input{min-height:clamp(36px,5vh,42px)!important}
.cartTotal{min-height:clamp(52px,8vh,66px)!important}.cartTotal strong{font-size:clamp(20px,3.2vh,30px)!important}
.emptyCartState{min-height:clamp(100px,24vh,180px)!important}

/* Short-height cashier monitors: reduce rows by widening the shortcut grids. */
@media (max-height:820px) and (min-width:1041px){
  .posHeading .pageTitle{font-size:16px!important}.posHeading{padding:5px 9px!important}.posStatusBar>span{padding:5px 7px!important}.posStatusBar>span small{font-size:7px!important}.posStatusBar>span b{font-size:9px!important}
  .posScreen .posToolbar input,.posScreen .posToolbar select,.posScreen .posToolbar button{min-height:34px!important;font-size:11px!important}
  .checkoutGroup.shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}.checkoutGroup.utilityGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:31px!important;font-size:8px!important}.cartFixedFooter{grid-template-columns:minmax(0,1fr) clamp(315px,27vw,390px)!important}.cartTotal{min-height:48px!important}.barcodeDock input{min-height:34px!important;font-size:14px!important}
}
@media (max-height:680px) and (min-width:1041px){
  .posHeading{display:none!important}.posScreen{height:calc(100dvh - 54px)!important}.posScreen .posToolbar{padding:4px!important;margin-bottom:4px!important}.promoPosBanner{display:none!important}
  .checkoutGroup{padding-top:17px!important}.checkoutGroup.shortcutGroup{grid-template-columns:repeat(4,minmax(0,1fr))!important}.checkoutGroup.utilityGroup{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .posScreen .checkoutActions .posBtn{min-height:28px!important;padding:2px 3px!important;font-size:7.5px!important}.posScreen .checkoutActions .posBtn small{display:inline!important;margin-right:3px!important}.cartSummary>span{padding:4px!important}.cartTotal{min-height:42px!important;padding:7px!important}
}
@media(max-width:1040px){.cartFixedFooter{grid-template-columns:1fr!important}.priceInquiryPrices{grid-template-columns:1fr 1fr!important}}
@media(max-width:600px){.priceInquiryMeta{grid-template-columns:1fr!important}.priceInquiryPrices{grid-template-columns:1fr!important}.priceInquiryPrices strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.networkBadge.networkOnline i,.d1AutoLiveBadge::before{animation:none!important;opacity:1!important}}

/* ---- build198.css ---- */
/* 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}}

/* ---- build199.css ---- */
/* BUILD199 — cashier footer refinement.
   User-approved hierarchy: TOTAL first, supporting totals next, F12 barcode is the very bottom row. */

/* The lower-left cashier footer is now:
   ROW 1: GRAND TOTAL | SUBTOTAL / DISCOUNT / DEPOSIT
   ROW 2: F12 BARCODE (full width, lowest control)
*/
.posScreen .cartFixedFooter{
  grid-template-columns:clamp(220px,24vw,330px) minmax(0,1fr)!important;
  grid-template-areas:
    "total summary"
    "barcode barcode"!important;
  align-items:stretch!important;
}

/* TOTAL is deliberately the first/left-most figure. */
.posScreen .cartTotal{
  grid-area:total!important;
  min-height:58px!important;
  padding:7px 12px!important;
  border:1px solid #075f37!important;
  background:linear-gradient(135deg,#043f27,#087a45)!important;
  border-radius:9px!important;
}
.posScreen .cartTotal .grandTotalLabel{
  font-size:8px!important;
  letter-spacing:.7px!important;
}
.posScreen .cartTotal strong{
  font-size:clamp(22px,2.15vw,34px)!important;
  line-height:1!important;
}

/* Supporting amounts stay beside TOTAL and are visually quieter. */
.posScreen .cartSummary{
  grid-area:summary!important;
  align-self:stretch!important;
}
.posScreen .cartSummary>span{
  min-height:58px!important;
}

/* F12 is always the final full-width row at the bottom of the transaction area. */
.posScreen .barcodeDock{
  grid-area:barcode!important;
  order:99!important;
  width:100%!important;
  min-height:45px!important;
  margin:0!important;
  border:2px solid #087545!important;
  background:#f6fcf8!important;
}
.posScreen .barcodeShortcut{
  background:linear-gradient(180deg,#076f40,#044f2e)!important;
  font-size:10px!important;
  font-weight:950!important;
}
.posScreen .barcodeDock input{
  background:#fff!important;
  border-color:#a9c9b6!important;
}
.posScreen .barcodeDock input:focus{
  border-color:#087a45!important;
  box-shadow:0 0 0 2px rgba(8,122,69,.10)!important;
}

/* Keep everything in the viewport; only cart lines may scroll internally. */
@media (min-width:1041px){
  body:has(main.posScreen),body:has(main.posScreen) #app,
  main.posScreen{overflow:hidden!important}
}

/* Short desktop monitors: keep F12 at the bottom without forcing page scroll. */
@media (min-width:1041px) and (max-height:760px){
  .posScreen .cartFixedFooter{gap:4px!important}
  .posScreen .cartTotal,.posScreen .cartSummary>span{min-height:45px!important;padding:4px 7px!important}
  .posScreen .cartTotal strong{font-size:20px!important}
  .posScreen .barcodeDock{min-height:37px!important;padding:3px!important}
  .posScreen .barcodeShortcut,.posScreen .barcodeDock input{height:29px!important;min-height:29px!important}
}

@media (max-width:1040px){
  .posScreen .cartFixedFooter{
    grid-template-columns:1fr!important;
    grid-template-areas:"total" "summary" "barcode"!important;
  }
}

/* ---- build200.css ---- */
/* 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}
}

/* ---- build201.css ---- */
/* BUILD201 — F12 raised above totals + locked cashier bottom dock.
   Cart rows scroll inside their own area. F12, totals and right-side actions never move
   when items are punched into the cart on desktop. */

@media (min-width:1050px){
  /* Reserve a fixed bottom dock so cart growth can never push cashier controls down. */
  .posScreen .cartPanel{
    grid-template-rows:34px auto minmax(0,1fr) 34px 132px!important;
  }
  .posScreen .cartItemsScroll{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .posScreen .cartStatsBar{
    position:relative!important;
    z-index:8!important;
    flex:0 0 auto!important;
  }
  .posScreen .cartFixedFooter{
    height:132px!important;
    min-height:132px!important;
    max-height:132px!important;
    align-self:end!important;
    position:relative!important;
    z-index:12!important;
    display:grid!important;
    grid-template-columns:clamp(230px,25%,320px) minmax(0,1fr)!important;
    grid-template-rows:58px 68px!important;
    grid-template-areas:
      "barcode barcode"
      "total summary"!important;
    gap:6px!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  /* F12 is now ABOVE the totals and remains locked in place. */
  .posScreen .barcodeDock{
    grid-area:barcode!important;
    min-height:58px!important;
    height:58px!important;
    margin:0!important;
  }
  .posScreen .barcodeShortcut,
  .posScreen .barcodeInputWrap,
  .posScreen .barcodeDock input,
  .barcodeVisual{
    height:46px!important;
    min-height:46px!important;
  }

  /* Totals are the permanent bottom-most cashier row. */
  .posScreen .cartTotal,
  .posScreen .cartSummary>span{
    min-height:68px!important;
    height:68px!important;
  }
  .posScreen .cartTotal{grid-area:total!important}
  .posScreen .cartSummary{grid-area:summary!important}

  /* Right action rail is locked to the same workspace and does not grow with cart rows. */
  .posScreen .checkoutActions{
    top:7px!important;
    bottom:7px!important;
    height:auto!important;
    max-height:calc(100% - 14px)!important;
    overflow:hidden!important;
  }
}

/* Short laptop screens: preserve the exact same order while shrinking only the fixed dock. */
@media (min-width:1050px) and (max-height:820px){
  .posScreen .cartPanel{
    grid-template-rows:30px auto minmax(0,1fr) 28px 108px!important;
  }
  .posScreen .cartFixedFooter{
    height:108px!important;
    min-height:108px!important;
    max-height:108px!important;
    grid-template-rows:48px 54px!important;
  }
  .posScreen .barcodeDock{height:48px!important;min-height:48px!important}
  .posScreen .barcodeShortcut,
  .posScreen .barcodeInputWrap,
  .posScreen .barcodeDock input,
  .barcodeVisual{height:38px!important;min-height:38px!important}
  .posScreen .cartTotal,
  .posScreen .cartSummary>span{height:54px!important;min-height:54px!important}
}

@media (min-width:1050px) and (max-height:680px){
  .posScreen .cartPanel{
    grid-template-rows:28px auto minmax(0,1fr) 25px 92px!important;
  }
  .posScreen .cartFixedFooter{
    height:92px!important;
    min-height:92px!important;
    max-height:92px!important;
    grid-template-rows:40px 46px!important;
  }
  .posScreen .barcodeDock{height:40px!important;min-height:40px!important;padding:3px!important}
  .posScreen .barcodeShortcut,
  .posScreen .barcodeInputWrap,
  .posScreen .barcodeDock input,
  .barcodeVisual{height:32px!important;min-height:32px!important}
  .posScreen .barcodeDock input{font-size:14px!important}
  .posScreen .cartTotal,
  .posScreen .cartSummary>span{height:46px!important;min-height:46px!important;padding:4px 7px!important}
  .posScreen .cartTotal strong{font-size:21px!important}
  .posScreen .cartSummary b{font-size:14px!important;margin-top:2px!important}
}

/* Tablet/mobile keeps natural scrolling, but F12 still appears before the totals. */
@media (max-width:1049px){
  .posScreen .cartFixedFooter{
    grid-template-columns:1fr!important;
    grid-template-areas:"barcode" "total" "summary"!important;
  }
}

/* ---- build208.css ---- */
/* 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}
}

/* ---- build211.css ---- */
/* BUILD211 — cleaned GRAND TOTAL panel.
   ITEMS stays compact on the left; GRAND TOTAL label + amount are grouped on the right. */

.posScreen .cartTotal{
  min-height:76px!important;
  padding:10px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  border-radius:12px!important;
  background:linear-gradient(100deg,#063d25,#08633a)!important;
}
.posScreen .cartItemCount{
  flex:0 0 auto!important;
  margin:0!important;
  min-width:84px!important;
  min-height:52px!important;
  padding:7px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:10px!important;
  background:#e9aa21!important;
  color:#15120a!important;
}
.posScreen .cartItemCount small{
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.35px!important;
}
.posScreen .cartItemCount b{
  font-size:22px!important;
  line-height:1!important;
}
.posScreen .grandTotalBlock{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:3px!important;
  text-align:right!important;
}
.posScreen .grandTotalLabel{
  margin:0!important;
  color:rgba(255,255,255,.92)!important;
  font-size:11px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:1px!important;
}
.posScreen .grandTotalBlock strong{
  min-width:0!important;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(30px,3vw,42px)!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:.2px!important;
  text-align:right!important;
  white-space:nowrap!important;
}

@media (min-width:901px) and (max-height:760px){
  .posScreen .cartTotal{min-height:62px!important;padding:7px 11px!important}
  .posScreen .cartItemCount{min-width:74px!important;min-height:44px!important;padding:5px 9px!important}
  .posScreen .cartItemCount small{font-size:8px!important}
  .posScreen .cartItemCount b{font-size:18px!important}
  .posScreen .grandTotalLabel{font-size:9px!important}
  .posScreen .grandTotalBlock strong{font-size:27px!important}
}

@media (max-width:680px){
  .posScreen .cartTotal{min-height:64px!important;padding:8px 10px!important;gap:10px!important}
  .posScreen .cartItemCount{min-width:68px!important;min-height:46px!important;padding:5px 8px!important;gap:5px!important}
  .posScreen .cartItemCount small{font-size:7.5px!important}
  .posScreen .cartItemCount b{font-size:17px!important}
  .posScreen .grandTotalLabel{font-size:8px!important}
  .posScreen .grandTotalBlock strong{font-size:24px!important}
}

/* ---- build212.css ---- */
/* BUILD212 — long horizontal total strip: TOTAL ITEM | GRAND TOTAL | AMOUNT */

.posScreen .cartSummary{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.posScreen .cartTotal{
  min-height:84px!important;
  padding:10px 14px!important;
  display:grid!important;
  grid-template-columns:minmax(120px,.8fr) minmax(220px,1.5fr) minmax(180px,1fr)!important;
  align-items:stretch!important;
  gap:12px!important;
  border-radius:14px!important;
  background:linear-gradient(100deg,#05341f,#09673d)!important;
  box-shadow:0 8px 18px rgba(5,46,27,.18)!important;
}

.posScreen .totalStripBlock{
  min-width:0!important;
  min-height:62px!important;
  padding:10px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  border-radius:12px!important;
}

.posScreen .cartItemCount.totalStripBlock{
  margin:0!important;
  background:#e5ab26!important;
  color:#181108!important;
}
.posScreen .cartItemCount.totalStripBlock small,
.posScreen .cartItemCount.totalStripBlock b{
  color:#181108!important;
}
.posScreen .cartItemCount.totalStripBlock small{
  font-size:11px!important;
  font-weight:1000!important;
  letter-spacing:.55px!important;
  white-space:nowrap!important;
}
.posScreen .cartItemCount.totalStripBlock b{
  font-size:25px!important;
  line-height:1!important;
}

.posScreen .grandTotalBlock.totalStripBlock{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  flex-direction:row!important;
  justify-content:space-between!important;
  text-align:left!important;
}
.posScreen .grandTotalBlock.totalStripBlock .grandTotalLabel{
  margin:0!important;
  color:#ffffff!important;
  font-size:13px!important;
  font-weight:1000!important;
  letter-spacing:.7px!important;
  white-space:nowrap!important;
}
.posScreen .grandTotalBlock.totalStripBlock strong{
  min-width:0!important;
  color:#ffffff!important;
  font-size:clamp(31px,2.8vw,42px)!important;
  font-weight:1000!important;
  line-height:1!important;
  text-align:right!important;
}

.posScreen .cartAmountBox.totalAmountInline{
  margin:0!important;
  background:#ffffff!important;
  border:2px solid #d9e7de!important;
  flex-direction:row!important;
  justify-content:space-between!important;
}
.posScreen .cartAmountBox.totalAmountInline small{
  color:#3f5647!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:.6px!important;
  white-space:nowrap!important;
}
.posScreen .cartAmountBox.totalAmountInline input{
  width:100%!important;
  min-width:0!important;
  text-align:right!important;
  font-size:29px!important;
  font-weight:1000!important;
  color:#0b3a24!important;
  line-height:1!important;
}

@media (min-width:901px) and (max-height:760px){
  .posScreen .cartTotal{
    min-height:72px!important;
    grid-template-columns:minmax(100px,.8fr) minmax(190px,1.35fr) minmax(155px,1fr)!important;
    gap:10px!important;
    padding:8px 11px!important;
  }
  .posScreen .totalStripBlock{min-height:54px!important;padding:8px 11px!important}
  .posScreen .cartItemCount.totalStripBlock small{font-size:9px!important}
  .posScreen .cartItemCount.totalStripBlock b{font-size:20px!important}
  .posScreen .grandTotalBlock.totalStripBlock .grandTotalLabel{font-size:10px!important}
  .posScreen .grandTotalBlock.totalStripBlock strong{font-size:27px!important}
  .posScreen .cartAmountBox.totalAmountInline small{font-size:10px!important}
  .posScreen .cartAmountBox.totalAmountInline input{font-size:24px!important}
}

@media (max-width:900px){
  .posScreen .cartTotal{
    grid-template-columns:1fr!important;
    gap:8px!important;
    min-height:auto!important;
  }
  .posScreen .totalStripBlock{min-height:54px!important}
  .posScreen .grandTotalBlock.totalStripBlock,
  .posScreen .cartAmountBox.totalAmountInline{
    flex-direction:row!important;
  }
}

@media (max-width:680px){
  .posScreen .cartSummary{grid-template-columns:1fr!important}
  .posScreen .cartTotal{padding:8px!important;gap:7px!important}
  .posScreen .totalStripBlock{min-height:48px!important;padding:7px 10px!important}
  .posScreen .cartItemCount.totalStripBlock small{font-size:8px!important}
  .posScreen .cartItemCount.totalStripBlock b{font-size:17px!important}
  .posScreen .grandTotalBlock.totalStripBlock .grandTotalLabel,
  .posScreen .cartAmountBox.totalAmountInline small{font-size:8px!important}
  .posScreen .grandTotalBlock.totalStripBlock strong,
  .posScreen .cartAmountBox.totalAmountInline input{font-size:21px!important}
}

/* ---- build221.css ---- */
/* BUILD221 — Settings stay saved after Save All Settings. */
.settingsSaveBar221{
  position:sticky;
  z-index:7;
  bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:18px 0 6px;
  padding:13px 15px;
  border:1px solid #b9d8c5;
  border-radius:14px;
  background:rgba(247,252,249,.98);
  box-shadow:0 10px 28px rgba(5,46,27,.14);
  backdrop-filter:blur(8px);
}
.settingsSaveBar221>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.settingsSaveBar221 b{font-size:12px;color:#093d25;letter-spacing:.4px}
.settingsSaveBar221 span{font-size:10px;color:#52685a;font-weight:700}
.settingsSaveBar221 button{flex:0 0 auto;min-width:190px;min-height:46px;font-weight:950}
#saveAllSettingsStatus{display:inline-flex;align-items:center;min-height:38px;padding:0 4px;font-size:10px;font-weight:800}
@media(max-width:680px){
  .settingsSaveBar221{bottom:74px;align-items:stretch;flex-direction:column;padding:11px}
  .settingsSaveBar221 button{width:100%;min-width:0}
}

/* ---- build223.css ---- */
/* BUILD223 — individual save button for every editable Settings group */
#main .settingsGroupSaveBtn223{min-width:170px;min-height:42px;font-weight:950}
#main .settingsGroupActions223{margin-top:14px;padding-top:12px;border-top:1px solid rgba(15,80,48,.12)}
#main .groupSaveStatus223{display:inline-flex;align-items:center;min-height:36px;font-size:12px;font-weight:850}
#main .panel:has(.settingsGroupSaveBtn223){border-bottom:3px solid rgba(13,121,75,.10)}
@media(max-width:700px){#main .settingsGroupSaveBtn223{width:100%;min-width:0}#main .groupSaveStatus223{width:100%}}

/* ---- build224.css ---- */
/* BUILD224 — BIR compliance preparation UI */
.birCompliancePanel224{border:2px solid #1f6b43!important;box-shadow:0 10px 26px rgba(4,70,41,.08)}
.birCompliancePanel224>h2{display:flex;align-items:center;gap:8px}
.birCheck224{margin-top:14px;border:1px solid #d7e5dc;border-radius:12px;overflow:hidden;background:#fff}
.birReadinessHead224{padding:12px 14px;background:#f4faf6;display:flex;flex-direction:column;gap:3px}
.birReadinessHead224 span{font-size:12px;color:#476356}
.birCheckRow224{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid #edf2ef;font-size:13px}
.birCheckRow224 b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.birCheckRow224 small{font-weight:800;font-size:10px}
.birReady224 b{background:#e2f6e8;color:#166534}.birReady224 small{color:#166534}
.birMissing224 b{background:#fff0df;color:#9a4d00}.birMissing224 small{color:#9a4d00}
.invoiceTitle224{font-size:1.18em!important;letter-spacing:.4px;font-weight:900!important}
.fiscalLocked224{display:inline-block;padding:6px 8px;border:1px solid #d8e1dc;border-radius:7px;font-size:10px;font-weight:800}
@media(max-width:700px){.birCheckRow224{grid-template-columns:24px 1fr}.birCheckRow224 small{grid-column:2}}

/* ---- build226.css ---- */
/* BUILD226 — visible Price Inquiry button + polished cashier price-check UI. */
.posScreen .checkoutGroup.utilityGroup .btnPriceInquiry{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#0b6b42 0%,#0e8b58 58%,#19a86c 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 5px 13px rgba(7,88,52,.22)!important;
  font-weight:950!important;
  letter-spacing:.15px!important;
}
.posScreen .checkoutGroup.utilityGroup .btnPriceInquiry::after{
  content:"₱";
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  font-size:27px;
  line-height:1;
  font-weight:1000;
  color:rgba(255,255,255,.16);
  pointer-events:none;
}
.posScreen .checkoutGroup.utilityGroup .btnPriceInquiry:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
.posScreen .checkoutGroup.utilityGroup .btnPriceInquiry small{
  display:block!important;
  color:#caffdf!important;
  font-size:7px!important;
  font-weight:950!important;
  letter-spacing:.7px!important;
}

.priceInquiryPanel{
  width:min(820px,95vw)!important;
  max-height:min(820px,94vh)!important;
  overflow:auto!important;
  padding:0!important;
  border-radius:20px!important;
  border:1px solid #cfe5d8!important;
  background:#f7fbf8!important;
  box-shadow:0 28px 80px rgba(10,54,33,.26)!important;
}
.priceInquiryTop{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px 16px;
  color:#fff;
  background:linear-gradient(125deg,#063d25,#087044 62%,#0d8d58);
}
.priceInquiryTop .priceInquiryIcon{
  width:54px!important;
  height:54px!important;
  min-width:54px;
  display:grid!important;
  place-items:center;
  margin:0!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.13)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  color:#fff!important;
  font-size:31px!important;
  box-shadow:none!important;
}
.priceInquiryTop h2{
  margin:2px 0 2px!important;
  color:#fff!important;
  font-size:24px!important;
  line-height:1.05!important;
  letter-spacing:.15px;
}
.priceInquiryTop p{
  margin:0!important;
  color:#d9f7e6!important;
  font-size:12px!important;
  font-weight:700!important;
}
.priceInquiryKicker{
  display:block;
  color:#9ff0c2;
  font-size:9px;
  font-weight:950;
  letter-spacing:1.3px;
}
.priceInquirySearchLabel{
  display:grid!important;
  gap:7px!important;
  padding:16px 18px 4px!important;
  color:#244a35!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.7px!important;
}
.priceInquirySearchBox{
  display:grid;
  grid-template-columns:46px 1fr;
  align-items:center;
  min-height:58px;
  overflow:hidden;
  border:2px solid #15905a;
  border-radius:14px;
  background:#fff;
  box-shadow:0 0 0 4px rgba(21,144,90,.07);
}
.priceInquiryScanMark{
  display:grid;
  place-items:center;
  height:100%;
  color:#087443;
  background:#e9f8f0;
  font-size:23px;
  border-right:1px solid #cae8d7;
}
.priceInquirySearchLabel .priceInquirySearchBox input{
  width:100%;
  min-height:54px!important;
  padding:10px 14px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#0d2f1e!important;
  font-size:18px!important;
  font-weight:850!important;
}
.priceInquirySearchLabel .priceInquirySearchBox input:focus{outline:0!important}
#priceInquiryResult{padding:8px 18px 6px}
.priceInquiryEmpty{
  display:grid!important;
  gap:4px;
  margin-top:5px!important;
  padding:24px 18px!important;
  border:1px dashed #b8d7c5!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#61776a!important;
  text-align:center!important;
}
.priceInquiryEmpty b{color:#0b7145;font-size:13px;letter-spacing:1px}
.priceInquiryEmpty span{font-size:12px;font-weight:750}
.priceInquiryCard{
  margin-top:5px!important;
  padding:16px!important;
  border:1px solid #bfdac9!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(11,88,52,.08)!important;
}
.priceInquiryName{
  font-size:23px!important;
  line-height:1.2!important;
  font-weight:1000!important;
  color:#073b24!important;
}
.priceInquiryMeta{gap:9px!important;margin:12px 0!important}
.priceInquiryMeta span{
  padding:10px 11px!important;
  border:1px solid #dbe9e0!important;
  border-radius:10px!important;
  background:#f8fbf9!important;
}
.priceInquiryMeta small,.priceInquiryPrices small{font-size:8px!important;letter-spacing:.9px!important}
.priceInquiryMeta b{margin-top:4px!important;color:#173a27!important;font-size:13px!important}
.priceInquiryPrices{gap:10px!important}
.priceInquiryPrices section{
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:14px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#075d34,#0b8450)!important;
  box-shadow:0 7px 16px rgba(7,93,52,.16);
}
.priceInquiryPrices section:nth-child(2){background:linear-gradient(145deg,#4d3989,#7053bd)!important}
.priceInquiryPrices section.managerOnlyPrice{background:linear-gradient(145deg,#3b4b42,#5a6c62)!important}
.priceInquiryPrices strong{margin-top:5px!important;font-size:29px!important;line-height:1!important}
.priceInquiryCategory{
  display:inline-flex;
  margin-top:11px!important;
  padding:5px 9px;
  border-radius:999px;
  background:#eef7f2;
  color:#37614a!important;
  font-size:10px!important;
  font-weight:900!important;
}
.priceInquiryMatches{margin-top:5px!important;gap:7px!important;max-height:340px!important}
.priceInquiryMatches button{
  min-height:60px!important;
  padding:10px 12px!important;
  border-radius:12px!important;
  border-color:#d7e7dd!important;
  box-shadow:0 2px 8px rgba(10,80,47,.04);
}
.priceInquiryMatches button:hover{background:#edf8f2!important;border-color:#7fc79c!important}
.priceInquiryMatches button strong{font-size:17px!important;color:#087443!important}
.priceInquiryFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px 16px;
  border-top:1px solid #e0ebe4;
  color:#667b6f;
  font-size:10px;
  font-weight:900;
  letter-spacing:.4px;
}
.priceInquiryFooter button{
  min-width:125px;
  min-height:38px;
  border:1px solid #cfded5;
  border-radius:10px;
  background:#fff;
  color:#264b36;
  font-weight:900;
}
@media(max-width:600px){
  .priceInquiryTop{padding:15px;gap:10px}.priceInquiryTop .priceInquiryIcon{width:46px!important;height:46px!important;min-width:46px;font-size:26px!important}
  .priceInquiryTop h2{font-size:20px!important}.priceInquiryTop p{font-size:10px!important}
  .priceInquirySearchLabel{padding:13px 12px 2px!important}#priceInquiryResult{padding:7px 12px 4px}.priceInquiryFooter{padding:10px 12px 13px;align-items:stretch;flex-direction:column}.priceInquiryFooter button{width:100%}
}

/* ---- build230.css ---- */
/* BUILD230 — live server status + infrastructure hardening UI */
#main .serverPanel230{
  overflow:hidden;
  border-top:4px solid #0b6b43;
}
#main .serverPanelHead230{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
#main .serverPanelHead230 h2{margin-bottom:4px}
#main .serverAutoBadge230{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:8px 11px;
  border-radius:999px;
  background:#e9f7ef;
  border:1px solid #a8dcc0;
  color:#08623d;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
}
#main .serverHealthGrid230{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:8px 0 12px;
}
#main .serverHealthCard230{
  min-height:116px;
  padding:16px;
  border-radius:16px;
  background:#f6f8f7;
  border:1px solid #d7e2dc;
  box-shadow:0 6px 18px rgba(13,74,47,.05);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
#main .serverHealthCard230.serverOk230{
  background:#effaf4;
  border-color:#9fd9b9;
}
#main .serverHealthCard230.serverWarn230{
  background:#fff8e8;
  border-color:#efd48a;
}
#main .serverHealthCard230.serverBad230{
  background:#fff2f1;
  border-color:#efb5b0;
}
#main .serverLabel230{
  font-size:12px;
  font-weight:950;
  letter-spacing:.05em;
  color:#456257;
}
#main .serverState230{
  margin-top:7px;
  font-size:22px;
  line-height:1.1;
  font-weight:1000;
  color:#123b2a;
}
#main .serverOk230 .serverState230{color:#087548}
#main .serverWarn230 .serverState230{color:#9a6500}
#main .serverBad230 .serverState230{color:#b42318}
#main .serverMeta230{
  margin-top:8px;
  font-size:12px;
  line-height:1.45;
  font-weight:750;
  color:#53685f;
}
#main .serverHealthSummary230{
  margin:0 0 14px;
  padding:11px 13px;
  border-radius:12px;
  background:#f2f5f3;
  border:1px solid #d9e3dd;
  font-weight:850;
  line-height:1.45;
}
#main .serverHealthSummary230.paid{
  background:#eaf8f0;
  border-color:#a8dbc0;
}
#main .serverHealthSummary230.balance{
  background:#fff7e8;
  border-color:#edd08b;
}
@media(max-width:720px){
  #main .serverPanelHead230{display:block}
  #main .serverAutoBadge230{margin-top:8px}
  #main .serverHealthGrid230{grid-template-columns:1fr}
}

/* ---- build233.css ---- */
/* BUILD233 — remove quick amount box and make GRAND TOTAL the dominant checkout value */
.posScreen .cartTotal{
  grid-template-columns:minmax(120px,.55fr) minmax(320px,2.45fr)!important;
  min-height:92px!important;
  gap:12px!important;
  padding:10px 14px!important;
}
.posScreen .grandTotalBlock.totalStripBlock{
  min-height:70px!important;
  padding:10px 20px!important;
  background:rgba(255,255,255,.10)!important;
  border:2px solid rgba(255,255,255,.16)!important;
}
.posScreen .grandTotalBlock.totalStripBlock .grandTotalLabel{
  font-size:15px!important;
  letter-spacing:1px!important;
}
.posScreen .grandTotalBlock.totalStripBlock strong{
  font-size:clamp(42px,4.2vw,64px)!important;
  min-width:0!important;
  line-height:.95!important;
}
.posScreen .cartItemCount.totalStripBlock{
  min-height:70px!important;
}
.posScreen .cartItemCount.totalStripBlock small{font-size:11px!important}
.posScreen .cartItemCount.totalStripBlock b{font-size:28px!important}

@media (min-width:901px) and (max-height:760px){
  .posScreen .cartTotal{
    min-height:76px!important;
    grid-template-columns:minmax(100px,.5fr) minmax(280px,2.5fr)!important;
    gap:10px!important;
    padding:8px 11px!important;
  }
  .posScreen .grandTotalBlock.totalStripBlock,
  .posScreen .cartItemCount.totalStripBlock{min-height:58px!important}
  .posScreen .grandTotalBlock.totalStripBlock .grandTotalLabel{font-size:12px!important}
  .posScreen .grandTotalBlock.totalStripBlock strong{font-size:clamp(34px,3.6vw,50px)!important}
  .posScreen .cartItemCount.totalStripBlock b{font-size:23px!important}
}

@media (max-width:900px){
  .posScreen .cartTotal{
    grid-template-columns:minmax(92px,.45fr) minmax(0,2.55fr)!important;
    gap:8px!important;
    min-height:72px!important;
  }
  .posScreen .grandTotalBlock.totalStripBlock,
  .posScreen .cartItemCount.totalStripBlock{min-height:56px!important}
  .posScreen .grandTotalBlock.totalStripBlock .grandTotalLabel{font-size:11px!important}
  .posScreen .grandTotalBlock.totalStripBlock strong{font-size:clamp(30px,7vw,48px)!important}
}

@media (max-width:680px){
  .posScreen .cartTotal{
    grid-template-columns:88px minmax(0,1fr)!important;
    padding:7px!important;
    gap:7px!important;
  }
  .posScreen .cartItemCount.totalStripBlock{padding:7px 8px!important}
  .posScreen .cartItemCount.totalStripBlock small{font-size:7px!important}
  .posScreen .cartItemCount.totalStripBlock b{font-size:18px!important}
  .posScreen .grandTotalBlock.totalStripBlock{padding:7px 10px!important}
  .posScreen .grandTotalBlock.totalStripBlock .grandTotalLabel{font-size:8px!important}
  .posScreen .grandTotalBlock.totalStripBlock strong{font-size:clamp(26px,9vw,42px)!important}
}

/* ---- build234.css ---- */
/* BUILD234 — premium interior UI refresh. Visual-only: no business/data logic changes. */
:root{
  --ui234-green-950:#032b1a;
  --ui234-green-900:#063b24;
  --ui234-green-800:#075b34;
  --ui234-green-700:#087747;
  --ui234-green-600:#0b9156;
  --ui234-green-100:#e9f7ef;
  --ui234-green-050:#f5fbf7;
  --ui234-gold:#e9b433;
  --ui234-gold-soft:#fff6dc;
  --ui234-ink:#10251a;
  --ui234-muted:#63746a;
  --ui234-line:#d9e6dd;
  --ui234-canvas:#eef5f0;
  --ui234-surface:#ffffff;
  --ui234-shadow:0 10px 30px rgba(3,43,26,.08);
  --ui234-shadow-lg:0 18px 50px rgba(3,43,26,.13);
}

/* Authenticated application shell */
#app{
  min-height:100dvh;
  background:
    radial-gradient(circle at 96% 2%,rgba(233,180,51,.10),transparent 25%),
    linear-gradient(180deg,#f8fbf9 0,#eef5f0 100%);
}
#app header{
  min-height:68px;
  padding:9px clamp(14px,2vw,26px)!important;
  border-bottom:1px solid rgba(255,255,255,.11);
  background:linear-gradient(112deg,var(--ui234-green-950) 0%,#064d2d 58%,#087342 100%)!important;
  box-shadow:0 6px 24px rgba(2,33,20,.22)!important;
}
#app header>div:first-child{display:flex;align-items:baseline;gap:8px;min-width:0}
#app header strong{font-size:16px;font-weight:1000;letter-spacing:.25px}
#app header #headerBranchName{font-size:10px!important;font-weight:850;letter-spacing:.8px;opacity:.78;text-transform:uppercase}
#app .headerUser{gap:8px}
#app .networkBadge,
#app .annliemart-pos-clock,
#app #userBadge{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.09);
  border-radius:999px;
  box-shadow:none;
}
#app .networkBadge{min-height:36px;padding:7px 11px}
#app .logoutBtn{
  min-height:38px;
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:11px;
  font-weight:950;
}
#app .logoutBtn:hover{background:rgba(255,255,255,.20);filter:none}

#app main{
  position:relative;
  color:var(--ui234-ink);
}
#app .pageTitle{
  color:var(--ui234-green-950);
  font-weight:1000;
  letter-spacing:-.035em;
}

/* Back office sidebar */
@media(min-width:900px){
  #app:not(:has(.posScreen)){padding-left:238px}
  #app:not(:has(.posScreen)) nav{
    top:68px;
    width:238px;
    padding:18px 12px 22px!important;
    gap:5px!important;
    border-right:1px solid rgba(255,255,255,.07)!important;
    background:linear-gradient(180deg,#052e1d 0%,#073d26 62%,#052b1b 100%)!important;
    box-shadow:9px 0 28px rgba(3,43,26,.10)!important;
  }
  #app:not(:has(.posScreen)) nav:before{
    content:"BACK OFFICE";
    display:block;
    padding:0 12px 11px;
    color:#9bc2aa;
    font-size:9px;
    font-weight:1000;
    letter-spacing:1.5px;
  }
  #app:not(:has(.posScreen)) nav button{
    position:relative;
    min-height:44px!important;
    padding:10px 13px 10px 15px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#dcece3!important;
    font-size:12px!important;
    font-weight:850!important;
    letter-spacing:.01em;
  }
  #app:not(:has(.posScreen)) nav button:before{
    content:"";
    width:5px;height:5px;
    margin-right:10px;
    display:inline-block;
    vertical-align:middle;
    border-radius:50%;
    background:#7eaa91;
    transition:transform .16s ease,background .16s ease;
  }
  #app:not(:has(.posScreen)) nav button:hover{
    background:rgba(255,255,255,.08)!important;
    border-color:rgba(255,255,255,.08)!important;
    color:#fff!important;
    transform:translateX(2px);
    filter:none;
  }
  #app:not(:has(.posScreen)) nav button.active{
    background:linear-gradient(100deg,#0a8d52,#087342)!important;
    border-color:rgba(255,255,255,.12)!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(0,0,0,.18)!important;
  }
  #app:not(:has(.posScreen)) nav button.active:before{background:var(--ui234-gold);transform:scale(1.45)}
  #app:not(:has(.posScreen)) main{padding:26px 30px 76px!important}
}

/* Panels, cards and controls */
#app .panel,
#app .card{
  border:1px solid var(--ui234-line)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--ui234-shadow)!important;
}
#app .panel{padding:18px!important}
#app .panel>h2:first-child,
#app .card>h2:first-child{
  position:relative;
  margin-top:0;
  padding-left:11px;
  color:var(--ui234-green-950)!important;
  font-weight:1000;
}
#app .panel>h2:first-child:before,
#app .card>h2:first-child:before{
  content:"";
  position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  border-radius:99px;
  background:linear-gradient(var(--ui234-gold),#d99913);
}
#app .toolbar,
#app .dateFilterTray{
  padding:11px!important;
  border:1px solid #d5e3da!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#fff,#f7faf8)!important;
  box-shadow:0 6px 18px rgba(3,43,26,.05)!important;
}
#app .form{gap:12px!important}
#app .form label,
#app .toolbar label,
#app .dateFilterTray label{
  color:#415b4b!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.45px;
}
#app input,
#app select,
#app textarea{
  border:1px solid #bcd0c3!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#10251a!important;
  box-shadow:inset 0 1px 1px rgba(3,43,26,.025);
}
#app input:hover,
#app select:hover,
#app textarea:hover{border-color:#8eb49c!important}
#app input:focus,
#app select:focus,
#app textarea:focus{
  border-color:#15925a!important;
  box-shadow:0 0 0 4px rgba(21,146,90,.11)!important;
  outline:none!important;
}
#app button{
  border-radius:10px;
  font-weight:900;
}
#app button:not(.posBtn):not(.dashboardModule):not(.cartQtyBtn){
  box-shadow:0 3px 8px rgba(3,43,26,.06);
}
#app button:not(.posBtn):not(.dashboardModule):hover{filter:brightness(.985);box-shadow:0 5px 12px rgba(3,43,26,.10)}
#app .primary{background:linear-gradient(115deg,#087747,#0b9257)!important;color:#fff!important}
#app .gold{background:linear-gradient(115deg,#f0c04e,#e5aa25)!important;color:#201704!important}
#app .danger{background:linear-gradient(115deg,#c8383f,#ad252d)!important;color:#fff!important}
#app .actions{gap:8px;align-items:center}

/* Tables */
#app .tableScroll{
  border:1px solid #dbe6df;
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 15px rgba(3,43,26,.04);
}
#app table{border-collapse:separate;border-spacing:0;background:#fff}
#app th{
  top:0;
  padding:11px 10px!important;
  border-bottom:1px solid #cbdcd1!important;
  background:linear-gradient(180deg,#e8f4ec,#deede4)!important;
  color:#143824!important;
  font-size:10px!important;
  font-weight:1000!important;
  letter-spacing:.35px;
  text-transform:uppercase;
}
#app td{
  padding:10px!important;
  border-bottom:1px solid #edf2ee!important;
  color:#16251c!important;
  font-weight:600;
}
#app tbody tr:nth-child(even) td{background:#fafcfb}
#app tbody tr:hover td{background:#f0f8f3}
#app table tr:last-child td{border-bottom:0!important}
#app .tableActions{gap:5px}
#app .tableActions button{min-height:36px!important;padding:6px 9px!important;font-size:10px!important}

/* Dashboard */
#app .dashboardHome{max-width:1540px;padding-top:2px}
#app .dashboardWelcome{
  min-height:205px;
  padding:30px 38px;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    radial-gradient(circle at 80% 30%,rgba(233,180,51,.20),transparent 27%),
    linear-gradient(118deg,#05341f 0%,#087045 62%,#0c8b55 100%)!important;
  box-shadow:var(--ui234-shadow-lg)!important;
}
#app .dashboardWelcome h1{color:#fff!important;font-size:clamp(30px,3vw,46px)!important}
#app .dashboardWelcome p{color:#dcefe4!important}
#app .dashboardEyebrow{color:#f2ca64!important}
#app .dashboardPills span{
  border-color:rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
}
#app .dashboardBrandLogo{
  width:150px;height:150px;
  padding:10px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:24px;
  background:rgba(255,255,255,.93);
  box-shadow:0 18px 42px rgba(0,0,0,.18);
  object-fit:contain;
}
#app .dashboardKpis{gap:14px;margin:16px 0 24px}
#app .dashboardKpi{
  position:relative;
  overflow:hidden;
  padding:19px 20px!important;
  border:1px solid var(--ui234-line)!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:var(--ui234-shadow)!important;
}
#app .dashboardKpi:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#0b8b53;
}
#app .dashboardKpi strong{color:#075d37!important;font-size:clamp(23px,2vw,30px)!important}
#app .dashboardSectionHead{margin:6px 0 13px}
#app .dashboardSectionHead h2{font-size:23px!important;color:#163c28!important}
#app .dashboardModules{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#app .dashboardModule{
  min-height:154px;
  padding:18px 18px 16px;
  align-items:flex-start;
  text-align:left;
  border:1px solid var(--ui234-line)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#fff,#f7fbf8)!important;
  box-shadow:var(--ui234-shadow)!important;
}
#app .dashboardModule:hover{
  transform:translateY(-3px);
  border-color:#a9ccb5!important;
  box-shadow:0 16px 34px rgba(3,43,26,.13)!important;
}
#app .moduleIcon{
  width:48px;height:48px;margin:0 0 12px;
  border:1px solid #cfe4d7;
  border-radius:14px;
  background:#eaf7ef!important;
  font-size:23px;
}
#app .dashboardModule strong{font-size:14px!important;color:#173d29!important}
#app .dashboardModule>span:not(.moduleIcon){max-width:none;text-align:left;color:#66776d!important}
#app .dashboardModule i{right:14px;bottom:14px;width:30px;height:30px;border-color:#cfe0d5;background:#fff;color:#087747}
#app .dashboardStats span{border:1px solid #dfe9e3;background:#f7faf8!important}

/* Module headers */
#app .moduleHeader{
  margin-bottom:14px;
  padding:16px 18px!important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px!important;
  background:
    radial-gradient(circle at 90% 0,rgba(233,180,51,.15),transparent 25%),
    linear-gradient(115deg,#04301d,#08633b)!important;
  box-shadow:0 10px 26px rgba(3,43,26,.18)!important;
}
#app .moduleHeader .pageTitle{color:#fff!important;font-size:clamp(22px,2vw,30px)!important}
#app .todayBadge{background:var(--ui234-gold)!important;color:#241a04!important}
#app .dateFilterButton{border:1px solid #c9ddd0!important;background:#fff!important;color:#0b5d38!important}

/* Modal / dialogs */
#modalRoot .modal{background:rgba(3,28,18,.58);backdrop-filter:blur(7px)}
#modalRoot .modalBox,
#modalRoot .dialogPanel{
  border:1px solid rgba(255,255,255,.75)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(0,0,0,.28)!important;
}
#modalRoot .modalBox h2,
#modalRoot .dialogPanel h2{color:#083d26;font-weight:1000}

/* POS terminal — faster visual reading and stronger hierarchy */
#app .posScreen{
  padding:10px 12px 12px!important;
  background:linear-gradient(180deg,#f7fbf8,#edf5f0)!important;
}
#app .posHeading{
  margin-bottom:9px;
  padding:0 3px;
}
#app .posHeading .pageTitle{font-size:24px!important;letter-spacing:-.4px}
#app .posHeading>div:first-child>span{color:#17764b!important}
#app .posStatusBar{gap:6px}
#app .posStatusBar>span{
  min-width:105px;
  padding:7px 10px!important;
  border:1px solid #d5e4da!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.93)!important;
  box-shadow:0 4px 12px rgba(3,43,26,.05)!important;
}
#app .posStatusBar small{color:#72847a!important}
#app .posStatusBar b{color:#0a3e27!important}
#app .posToolbar{
  gap:7px!important;
  padding:7px!important;
  border:1px solid #d6e5db!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 7px 20px rgba(3,43,26,.07)!important;
}
#app .posToolbar input,
#app .posToolbar select,
#app .posToolbar button{min-height:45px!important}
#app .posToolbar #posSearch{
  padding-left:15px;
  border:2px solid #a8c8b4!important;
  font-size:15px!important;
  font-weight:850!important;
}
#app .posToolbar #posSearch:focus{border-color:#0b8d54!important}
#app .posSearchResults{
  border:1px solid #cbded1!important;
  border-radius:12px!important;
  box-shadow:0 18px 42px rgba(3,43,26,.18)!important;
  overflow:hidden;
}
#app .posSearchResult{padding:10px 12px!important;border-bottom:1px solid #edf2ee!important;background:#fff!important}
#app .posSearchResult:hover,
#app .posSearchResult.active{background:#eaf7ef!important;filter:none}

#app .posScreen .cartPanel{
  padding:10px!important;
  border:1px solid #ccded2!important;
  border-top:4px solid var(--ui234-gold)!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(3,43,26,.09)!important;
}
#app .cartPanel>h2{
  margin:0 0 7px!important;
  padding:0 3px 6px!important;
  border-bottom:1px solid #e6eee9;
  color:#063b24!important;
  font-size:15px!important;
  font-weight:1000!important;
}
#app .cartListHeader{
  padding:7px 12px!important;
  border:1px solid #dce9e1;
  border-radius:9px!important;
  background:#eff7f2!important;
  color:#506a5a!important;
}
#app .cartRow{
  margin:6px 1px!important;
  padding:10px 11px!important;
  border:1px solid #dde8e1!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 3px 10px rgba(3,43,26,.045)!important;
}
#app .cartRow:hover{border-color:#b7d3c1!important;background:#fbfdfc!important}
#app .cartItemName{color:#0b3d27!important;font-weight:900!important}
#app .cartQtyBtn{background:#edf6f0!important;border-color:#c5dacd!important;color:#075b34!important}
#app .cartQtyBtn:hover{background:var(--ui234-gold)!important;color:#1c1404!important}
#app .cartItemTotal strong{color:#075d37!important;font-weight:1000!important}

#app .barcodeDock{
  border:1px solid #bfd5c7!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#f8fcf9,#eef7f1)!important;
  box-shadow:inset 0 1px 0 #fff;
}
#app .barcodeShortcut{
  border-radius:9px!important;
  background:#075b34!important;
  color:#fff!important;
  box-shadow:none!important;
}
#app .barcodeInputWrap input{
  border:0!important;
  background:#fff!important;
  font-weight:900!important;
}
#app .cartSummary{gap:5px!important}
#app .cartSummary>span{
  border:1px solid #dce8e0!important;
  background:#f9fbfa!important;
}
#app .cartSummary>span:nth-child(1){border-left:4px solid #0b8a52!important}
#app .cartSummary>span:nth-child(2){border-left:4px solid #c63b41!important}
#app .cartSummary>span:nth-child(3){border-left:4px solid #e2a72c!important}

/* BUILD233 no-amount layout retained; grand total gets the strongest visual priority. */
#app .posScreen .cartTotal{
  min-height:92px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
  background:
    radial-gradient(circle at 80% 25%,rgba(233,180,51,.18),transparent 26%),
    linear-gradient(102deg,#032b1a,#08603a)!important;
  box-shadow:0 9px 22px rgba(3,43,26,.22)!important;
}
#app .posScreen .cartItemCount.totalStripBlock{
  background:linear-gradient(145deg,#f1c454,#dfa31f)!important;
  border:1px solid rgba(0,0,0,.08)!important;
  color:#1c1404!important;
}
#app .posScreen .grandTotalBlock.totalStripBlock{
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#app .posScreen .grandTotalBlock strong{
  color:#fff!important;
  text-shadow:0 2px 5px rgba(0,0,0,.15);
  letter-spacing:-1px;
}

#app .checkoutActions{gap:7px!important;margin-top:7px!important}
#app .checkoutGroup{
  padding:20px 7px 7px!important;
  border:1px solid #d7e5dc!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(3,43,26,.05)!important;
}
#app .groupLabel{color:#60756a!important;font-size:8px!important}
#app .checkoutActions .posBtn{
  min-height:53px;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:10px!important;
  box-shadow:0 4px 10px rgba(0,0,0,.13)!important;
}
#app .checkoutActions .posBtn:hover{transform:translateY(-1px);filter:brightness(1.06)}
#app .checkoutActions .posBtn.selected{outline:3px solid var(--ui234-gold)!important;outline-offset:1px}
#app .btnCash{background:linear-gradient(145deg,#0a8d4d,#08763f)!important}
#app .btnGcash{background:linear-gradient(145deg,#1481df,#0768ba)!important}
#app .btnMaya{background:linear-gradient(145deg,#00aaa1,#078c85)!important}
#app .btnBank{background:linear-gradient(145deg,#345a86,#263f61)!important}
#app .btnCredit{background:linear-gradient(145deg,#e28b16,#c96d08)!important}
#app .btnRetail{background:linear-gradient(145deg,#2180e8,#1464bc)!important}
#app .btnWholesale{background:linear-gradient(145deg,#7a5ad0,#6040b0)!important}
#app .btnInquiry{background:linear-gradient(145deg,#0b705d,#075949)!important}

/* Price inquiry modal */
#modalRoot .priceInquiryModal226,
#modalRoot .priceInquiryBox226{
  border-radius:22px!important;
}
#modalRoot .priceInquiryResult226{
  border:1px solid #cfe2d5!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fff,#f5fbf7)!important;
}

/* Status language colors */
#app .paid{color:#087747!important}
#app .balance{color:#b4262d!important}
#app .low td{background:#fff8e7!important}

@media(max-width:1180px){
  #app .dashboardModules{grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .dashboardBrandLogo{width:125px;height:125px}
}
@media(max-width:899px){
  #app nav{background:linear-gradient(90deg,#04301d,#075d37)!important}
  #app nav button{border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.07)!important;color:#fff!important}
  #app nav button.active{background:var(--ui234-gold)!important;color:#1d1504!important}
  #app .dashboardWelcome{padding:24px!important}
}
@media(max-width:720px){
  #app .dashboardBrandLogo{display:none}
  #app .dashboardModules{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #app .dashboardModule{min-height:142px;padding:14px}
  #app .moduleIcon{width:42px;height:42px;font-size:20px}
  #app .panel{padding:14px!important}
  #app .moduleHeader{padding:13px!important}
}
@media(max-width:680px){
  #app .posScreen{padding:7px!important}
  #app .posScreen .cartPanel{padding:7px!important;border-radius:13px!important}
  #app .checkoutGroup{box-shadow:none!important}
  #app .dashboardWelcome{min-height:150px;padding:20px!important}
  #app .dashboardWelcome h1{font-size:28px!important}
}
@media(max-width:430px){
  #app .dashboardModules{grid-template-columns:1fr}
  #app .dashboardModule{min-height:122px}
}

/* ---- build237.css ---- */
/* BUILD237 — Inventory backup status and recovery UI */
.inventoryBackupCard237{display:flex;justify-content:space-between;align-items:center;gap:18px;border-left:5px solid #0b7a4b;background:linear-gradient(135deg,#ffffff,#f2fbf6)}
.inventoryBackupCard237 h2{margin:0 0 6px}.inventoryBackupCard237 p{margin:0 0 8px}.inventoryBackupCard237 #inventoryBackupStatus237{font-size:12px;color:#0b6b43;letter-spacing:.02em}
.inventoryBackupModal237 table td,.inventoryBackupModal237 table th{vertical-align:middle}.inventoryBackupModal237 .tableScroll{margin-top:14px;max-height:48vh}
@media(max-width:800px){.inventoryBackupCard237{align-items:stretch;flex-direction:column}.inventoryBackupCard237>.actions{width:100%}.inventoryBackupCard237>.actions button{flex:1}}

/* ---- build240.css ---- */
/* BUILD240 — Admin QR authorization */
.adminQrPanel240{
  max-width:560px!important;
  text-align:center;
}
.adminQrScanIcon240{
  width:78px;
  height:78px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:rgba(16,185,129,.12);
  border:2px solid rgba(16,185,129,.28);
  font-size:46px;
  font-weight:900;
}
.adminQrScanField240{
  display:block;
  max-width:420px;
  margin:16px auto 8px;
  text-align:left;
  font-weight:900;
}
.adminQrScanField240 input{
  width:100%;
  margin-top:7px;
  min-height:64px;
  font-size:22px;
  text-align:center;
  letter-spacing:2px;
  border:2px solid rgba(16,185,129,.45)!important;
}
.adminQrPanel240 .dialogActions{
  justify-content:center!important;
  margin-top:16px;
}
.adminQrCardPanel240{
  max-width:620px!important;
  text-align:center;
}
.adminQrCard240{
  width:min(100%,430px);
  margin:16px auto;
  padding:18px;
  background:#fff;
  color:#111;
  border-radius:18px;
  border:2px solid #111;
  font-weight:1000;
  letter-spacing:.8px;
}
.adminQrCard240 svg{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto 12px;
}
.adminQrSettings240 .actions{
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width:680px){
  .adminQrPanel240{max-width:96vw!important}
  .adminQrScanIcon240{width:66px;height:66px;font-size:38px;border-radius:18px}
  .adminQrScanField240 input{min-height:58px;font-size:18px}
  .adminQrCard240{padding:12px}
}

/* BUILD242 — QR auto approval + same-code PIN fallback */
.adminQrOr242{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--muted,#6b7280);font-weight:800;font-size:12px;letter-spacing:1px}
.adminQrOr242::before,.adminQrOr242::after{content:"";height:1px;flex:1;background:rgba(127,127,127,.25)}
.adminQrPinField242{display:grid;gap:7px;font-weight:900;letter-spacing:.4px}
.adminQrPinField242 input{min-height:48px;font-size:18px;font-weight:800;letter-spacing:2px;text-align:center}

/* ---- build244.css ---- */
/* BUILD244 — steady online indicator and non-blocking background sync status. */
.networkBadge i,
.networkBadge.networkOnline i,
.networkBadge.networkQueued i,
.d1AutoLiveBadge::before {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* A legacy queued class may survive briefly while the new service worker takes
   control. Keep that transitional online state green and steady as well. */
.networkBadge.networkQueued {
  background: #129447 !important;
  color: #fff !important;
}

/* ---- build245.css ---- */
/* BUILD245 — 24/7 shift-based Z-Reading with manual Cut-off reset. */
.dashboardShift245 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 2px solid #16723c;
  border-radius: 18px;
  background: linear-gradient(135deg, #effff5, #fff);
  box-shadow: 0 10px 28px rgba(10, 83, 43, .1);
}

.dashboardShift245 h2,
.dashboardShift245 p {
  margin: 5px 0 0;
}

.dashboardShift245Badge,
.zReading245Status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #075d2c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

.dashboardShift245Badge i,
.zReading245Status i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #18a957;
  box-shadow: 0 0 0 4px rgba(24, 169, 87, .14);
  animation: none !important;
}

.dashboardShift245.isClosed {
  border-color: #a9b2ac;
  background: #f6f8f7;
}

.dashboardShift245.isClosed .dashboardShift245Badge,
.dashboardShift245.isClosed h2 {
  color: #45534b;
}

.dashboardShift245.isClosed .dashboardShift245Badge i {
  background: #7b8980;
  box-shadow: none;
}

.cutoff245Header,
.zReading245 {
  border-top: 7px solid #08793d;
  padding-top: 14px;
}

.cutoff245Header > span {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #08793d;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.cutoff245Header p {
  padding: 12px 14px;
  border-left: 4px solid #c49300;
  background: #fff8dc;
  line-height: 1.5;
}

.zReading245Status {
  margin-bottom: 8px;
}

.zReading245Net {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0;
  padding: 15px 18px;
  border-radius: 14px;
  background: #073f25;
  color: #fff;
}

.zReading245Net span {
  font-weight: 800;
  letter-spacing: .06em;
}

.zReading245Net strong {
  font-size: clamp(24px, 4vw, 36px);
}

@media (max-width: 720px) {
  .dashboardShift245 {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---- build249.css ---- */
/* BUILD249 — stable health status + large-data sync envelope. */
#main .serverHealthGrid230{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
#main #transportTunnelCard247.serverOk230{
  background:linear-gradient(180deg,#effaf4 0%,#e7f8ef 100%);
  border-color:#7fcda4;
}
#main .serverHealthCard230.serverPending248{
  background:#f3f7f5;
  border-color:#cbd9d2;
}
#main .serverPending248 .serverState230{color:#315b49}
@media(max-width:980px){
  #main .serverHealthGrid230{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main #transportTunnelCard247{grid-column:1/-1}
}
@media(max-width:720px){
  #main .serverHealthGrid230{grid-template-columns:1fr}
  #main #transportTunnelCard247{grid-column:auto}
}

/* ---- build250.css ---- */
/* BUILD250 — automatic local-storage pressure recovery + steady status. */
.networkBadge i,
.networkBadge.networkOnline i,
.networkBadge.networkQueued i,
.networkBadge.networkOffline i,
.d1AutoLiveBadge::before{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}
/* Pending/background server work is never shown as yellow. */
.networkBadge.networkQueued{
  background:#e8f8ef!important;
  color:#075d34!important;
  border:1px solid #9bd4b5!important;
}
/* A true device-save failure stays clearly red instead of yellow/blinking. */
.networkBadge.networkOffline{
  background:#fff0f0!important;
  color:#9e2028!important;
  border:1px solid #e4a4a8!important;
}

/* ---- build255.css ---- */
/* BUILD255 — editable decimal cart quantity, minimum 0.50 */
.posScreen .cartQtyBox{
  gap:5px!important;
}
.posScreen .cartQtyInput255{
  width:62px!important;
  min-width:62px!important;
  height:34px!important;
  min-height:34px!important;
  box-sizing:border-box!important;
  padding:3px 5px!important;
  border:2px solid #9fc8ae!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#071b11!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums!important;
  outline:none!important;
}
.posScreen .cartQtyInput255:focus{
  border-color:#087542!important;
  box-shadow:0 0 0 3px rgba(8,117,66,.12)!important;
}
.posScreen .cartQtyInput255[readonly]{
  background:#eef3f0!important;
  color:#526158!important;
}
@media(max-width:800px){
  .posScreen .cartQtyInput255{
    width:56px!important;
    min-width:56px!important;
    height:30px!important;
    min-height:30px!important;
    font-size:13px!important;
  }
}

/* ---- build259.css ---- */
/* BUILD259 — Human-friendly cashier POS. Backend dual-live behavior remains unchanged. */
.posHumanGuide{display:block;margin-top:5px;font-size:12px;font-weight:800;color:#245b3b;letter-spacing:.15px}
.posScreen .posHeading{align-items:center}
.posScreen .posHeading .pageTitle{font-weight:900;letter-spacing:.2px}
.posScreen .posStatusBar span{min-width:118px}
.posScreen .posStatusBar small{font-size:10px;font-weight:900;letter-spacing:.55px}
.posScreen .posStatusBar b{font-size:13px;font-weight:900}
.posScreen .cartPanel>h2{font-size:19px;font-weight:900}
.posScreen .emptyCartState strong{font-size:22px;font-weight:900;color:#10291b}
.posScreen .emptyCartState span{font-size:15px;font-weight:900;color:#0b5d2f}
.posScreen .barcodeInputWrap input{font-size:18px;font-weight:900;color:#000;background:#fff}
.posScreen #barcodeFeedback{font-size:12px;font-weight:800}
.posScreen .grandTotalBlock strong{font-size:clamp(30px,4vw,50px);font-weight:950}
.posScreen .cartItemCount b{font-size:24px;font-weight:950}
.posScreen .posBtn{font-weight:900;letter-spacing:.15px}
.posScreen .cartItemName{font-weight:900;color:#000}
.posScreen .cartQtyInput255{font-weight:950;color:#000;background:#fff}
.networkBadge.networkOnline span{font-weight:900}
.d1AutoLiveBadge{font-weight:900}
@media(max-width:760px){.posHumanGuide{font-size:11px}.posScreen .posStatusBar span{min-width:0}.posScreen .barcodeInputWrap input{font-size:16px}}

/* ---- build291.css ---- */
/* BUILD290 — interaction-first navigation / INP hardening */
#main.navTransition289 {
  cursor: progress;
}
#main.navTransition289::after {
  content: "OPENING…";
  position: fixed;
  right: 18px;
  top: 76px;
  z-index: 29;
  padding: 7px 11px;
  border-radius: 999px;
  background: #e9f7ee;
  border: 1px solid #9fd2ae;
  color: #0b6b38;
  font: 900 11px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  pointer-events: none;
}
#nav > button.active {
  transform: translateZ(0);
}
@media (prefers-reduced-motion: no-preference) {
  #nav > button { transition: background-color .08s ease, color .08s ease, box-shadow .08s ease; }
}

/* BUILD291 — deep INP / large-data rendering hardening */
#nav > button { touch-action: manipulation; }
#nav > button:active { transform: translateZ(0) scale(.995); }
#main:not(.posScreen) > .panel,
#main:not(.posScreen) > details,
#main:not(.posScreen) .historyPanel,
#main:not(.posScreen) .purchaseHistoryPanel {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}
#main .tableScroll,
#main .reportTableWrap {
  contain: layout paint;
}
@media print {
  #main > .panel,
  #main > details,
  #main .historyPanel,
  #main .purchaseHistoryPanel { content-visibility: visible !important; contain: none !important; }
  #main .tableScroll,
  #main .reportTableWrap { contain: none !important; }
}

/* ---- build293.css ---- */
.priceTagPanel293{width:min(640px,90vw);color:#101010}.priceTagPanel293 h2{margin:0 0 8px;font-size:24px}.priceTagPanel293 p{color:#222;font-weight:700}.priceTagPanel293 label{display:block;font-weight:800;color:#111}.priceTagPanel293 input,.priceTagPanel293 select{width:100%;margin:5px 0 8px;padding:10px;font-size:17px;border:2px solid #333;border-radius:8px;background:white;color:#111}.priceTagResults293{max-height:180px;overflow:auto;display:grid;gap:4px}.priceTagResult293{display:flex;justify-content:space-between;gap:12px;text-align:left;align-items:center;background:#fff;border:1px solid #aaa;color:#111;padding:8px}.priceTagResult293 span{font-size:13px}.priceTagOptions293{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}.priceTagPreview293{padding:12px;display:flex;justify-content:center;align-items:center;min-height:130px;background:#ececec;color:#111;font-weight:800}.priceTagSticker293{box-sizing:border-box;width:var(--tag-width,50mm);height:var(--tag-height,30mm);padding:1.5mm 2mm;background:white;border:1px solid #222;color:#000;text-align:center;display:flex;flex-direction:column;align-items:center;overflow:hidden;font-family:Arial,sans-serif}.tagStore293{font-size:7pt;font-weight:700;white-space:nowrap;max-width:calc(100% - 2mm);overflow:hidden}.tagName293{font-size:9pt;font-weight:700;line-height:1.05;max-height:22%;max-width:calc(100% - 2mm);overflow:hidden}.tagPrice293{font-size:14pt;font-weight:900;line-height:1.1}.tagBarcode293{height:30%;width:calc(100% - 3mm)}.tagBarcode293 svg{display:block;width:100%;height:100%}.tagCode293{font-size:7pt;font-weight:700;letter-spacing:.2mm;white-space:nowrap}@media(max-width:520px){.priceTagPanel293{width:100%}.priceTagResult293{flex-direction:column;align-items:flex-start}.priceTagOptions293{grid-template-columns:1fr 1fr}}
.priceTagQueue297{background:#f8faf8;border:1px solid #b9cebf;border-radius:10px;margin:10px 0;padding:10px;color:#101010}.priceTagQueueList297{display:grid;gap:6px;max-height:190px;overflow:auto;margin-top:8px}.priceTagQueueRow297{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid #d5dfd8;padding:7px;border-radius:7px}.priceTagQueueRow297 span{min-width:0;overflow-wrap:anywhere}.priceTagQueueRow297 small{display:block;color:#35483b}.priceTagQueueRow297 button{flex:none}
/* Build 298: keep all tender buttons visible in the checkout strip. */
.posScreen .btnCard298{background:#303f71!important;color:#fff!important}
.posScreen .btnTap298{background:#096357!important;color:#fff!important}
.posScreen .checkoutGroup.shortcutGroup{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.paymentProvider298{display:block;color:#17251c;font-weight:800;min-width:0}
.paymentProvider298 input{display:block;width:100%;min-width:0;margin-top:5px;padding:9px;border:2px solid #56695d;border-radius:7px;background:#fff;color:#111;font-size:15px}
.splitPaymentRow .paymentProvider298{grid-column:2/-1;display:block;min-width:0}
.paymentProvider298.hidden,.splitPaymentRow .paymentProvider298.hidden{display:none!important}
@media (min-width:951px) and (max-width:1180px){.posScreen .checkoutActions{grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important}.posScreen .checkoutGroup.shortcutGroup{grid-template-columns:repeat(6,minmax(0,1fr))!important}.posScreen .checkoutActions .posBtn{font-size:9px!important;padding:4px!important}}
@media (max-width:950px){.posScreen .checkoutGroup.shortcutGroup{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:520px){.posScreen .checkoutGroup.shortcutGroup{grid-template-columns:repeat(2,minmax(0,1fr))!important}.splitPaymentRow .paymentProvider298{grid-column:2/-1}}

/* Build 301: clear, responsive price tag workflow and accurate label preview. */
.priceTagPanel293{width:min(880px,94vw);max-height:88vh;overflow:auto;color:#102018;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
#modalRoot .modalBox.priceTagModal301{width:min(940px,96vw)}
.priceTagIntro301{padding:16px 18px;border-radius:15px;background:linear-gradient(115deg,#153924,#256344);color:#fff}
.priceTagIntro301 .priceTagEyebrow301{font-size:12px;font-weight:900;letter-spacing:.12em;color:#cce9d4}
#modalRoot .priceTagIntro301 h2{font-size:27px;letter-spacing:.02em;color:#fff;margin:3px 0}
.priceTagIntro301 p{font-size:13px;line-height:1.4;color:#f2fff4;margin:5px 0 0;font-weight:500}
.priceTagLayout301{display:grid;grid-template-columns:minmax(0,1fr) minmax(255px,.9fr);gap:16px;margin-top:16px}
.priceTagControls301,.priceTagVisual301{min-width:0;padding:16px;background:#f7faf7;border:1px solid #d0ded1;border-radius:13px}
.priceTagControls301 label{font-size:12px;letter-spacing:.035em}
.priceTagControls301 input,.priceTagControls301 select{font-size:15px;border-color:#859b8a;min-height:43px}
.priceTagOptions293{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) 90px;gap:8px}
.priceTagResults293{max-height:130px}
.priceTagResult293{border-radius:8px}
.priceTagResult293:hover,.priceTagResult293:focus-visible{background:#e5f5e8;border-color:#256344}
.priceTagVisual301>span{font-size:12px;font-weight:900;letter-spacing:.08em;color:#275b3b}
.priceTagVisual301 p{font-size:12px;line-height:1.35;min-height:2.4em;margin:8px 0 0;color:#244532}
.priceTagPreview293{margin-top:9px;min-height:185px;padding:14px;background:linear-gradient(130deg,#e1e9e2,#eef1ed);border:1px solid #cfdbd1;border-radius:10px;overflow:auto}
.priceTagSticker293{flex:none;box-shadow:0 4px 16px #1b3a2330;padding:1.5mm 2.3mm;border:1px dashed #799b83;text-align:center}
.priceTagSticker293 .tagHead301{width:100%;border-top:.3mm solid #296343;padding-top:.5mm;display:flex;align-items:center;justify-content:space-between;gap:1mm}
.priceTagSticker293 .tagStore293{font-size:6.5pt;font-weight:800;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.priceTagSticker293 .tagStore293{min-width:0}
.priceTagSticker293 .tagMode301{font-size:5pt;flex:none;white-space:nowrap}
.priceTagSticker293 .tagName293{font-size:8pt;font-weight:800;line-height:1.05;height:22%;max-height:none;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.priceTagSticker293 .tagPrice293{font-size:var(--tag-price-size,17pt);font-weight:900;white-space:nowrap;letter-spacing:-.4pt;line-height:1.1;margin:auto 0 0}
.priceTagSticker293 .tagBarcode293{height:24%;width:100%;margin-top:.4mm}
.priceTagSticker293 .tagCode293{font-size:6.5pt;letter-spacing:.1mm}
.priceTagQueueActions301,.priceTagExport301{display:flex;gap:8px;flex-wrap:wrap}
.priceTagQueueActions301 button,.priceTagExport301 button{min-height:42px;font-size:13px;font-weight:850}
.priceTagQueueHeading301{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.priceTagQueueHeading301 span{font-size:12px;color:#245c37;font-weight:800}
.priceTagQueue297{margin:16px 0}
.priceTagFooter301{border-top:1px solid #cbdace;padding-top:12px}
.priceTagFooter301 small{display:block;color:#355943;line-height:1.4;margin-top:8px}
@media(max-width:690px){.priceTagPanel293{width:94vw}.priceTagLayout301{grid-template-columns:1fr}.priceTagOptions293{grid-template-columns:1fr 1fr}.priceTagOptions293 label:first-child{grid-column:1/-1}.priceTagVisual301{order:2}}
@media(max-width:420px){.priceTagOptions293{grid-template-columns:1fr 90px}.priceTagOptions293 label:first-child{grid-column:1/-1}.priceTagExport301 button:first-child{width:100%}}

/* ---- BUILD324 LANDING SMOOTH / QUIET PAINT ---- */
#loginScreen.loginScreen{
  background:linear-gradient(145deg,#063c24,#0b6a3a 62%,#168a45)!important;
  overflow:auto;
  overscroll-behavior:none;
  contain:layout paint style;
}
#loginScreen .landingShell{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(255,255,255,.07)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.24)!important;
  transform:translateZ(0);
}
#loginScreen .landingIntro{
  background:linear-gradient(145deg,#063d26,#0d7040)!important;
}
#loginScreen .landingBrandLogo,
#loginScreen #loginLogo{
  image-rendering:auto;
  backface-visibility:hidden;
}
#loginScreen *,#loginScreen *::before,#loginScreen *::after{
  animation:none!important;
  transition:none!important;
}
#loginScreen .loginBox,
#loginScreen .loginLogoWrap{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#loginScreen input,#loginScreen button{touch-action:manipulation}
@media (max-width:820px){
  #loginScreen.loginScreen{padding:10px!important}
  #loginScreen .landingShell{box-shadow:0 10px 28px rgba(0,0,0,.20)!important}
}

/* ---- BUILD327 BARCODE SCANNER / F12 ---- */
.posScreen button.barcodeShortcut{
  width:auto!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  cursor:pointer!important;
  font-family:inherit!important;
  line-height:1!important;
  touch-action:manipulation;
}
.posScreen button.barcodeShortcut:hover{filter:brightness(1.10)}
.posScreen button.barcodeShortcut:focus-visible{
  outline:3px solid #f0b429!important;
  outline-offset:2px!important;
}

/* ---- build330.css ---- */
/* BUILD330 — Cash, online tenders and credit sales are separate checkout choices. */
.posScreen .checkoutActions {
  position: static !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) !important;
  gap: 8px !important;
}
.posScreen .paymentChoices330 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.posScreen .paymentChoice330 {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 70px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  text-align: left;
  line-height: 1.2;
  touch-action: manipulation;
  transition: filter .12s;
}
.posScreen .payCash330 { background: #087647 !important; color: #fff !important; }
.posScreen .payOnline330 { background: #eef5ff !important; color: #174b94 !important; border-color: #bfd5f4; }
.posScreen .payCredit330 { background: #fff7e9 !important; color: #864b0b !important; border-color: #efd1a1; }
.paymentIcon330, .onlineMethodIcon330 {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ffffff20;
}
.payOnline330 .paymentIcon330 { background: #deebfd; }
.payCredit330 .paymentIcon330 { background: #ffebc8; }
.paymentIcon330 svg, .onlineMethodIcon330 svg { display: block; width: 24px; height: 24px; }
.paymentText330 { min-width: 0; flex: 1; }
.paymentText330 strong { display: block; font-size: 14px; font-weight: 900; color: inherit; }
.paymentText330 small { display: block; margin-top: 5px; font-size: 10px; font-weight: 600; color: inherit; opacity: .85; }
.paymentChoice330 kbd { flex: none; padding: 5px 6px; border: 1px solid currentColor; border-radius: 5px; font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1; opacity: .72; }
.paymentArrow330 { flex: none; font: 500 30px/1 sans-serif; }
.posScreen .paymentChoice330:hover { filter: brightness(.97); }
.posScreen .paymentChoice330:focus-visible, #modalRoot .onlinePaymentMethod330:focus-visible, #modalRoot .onlinePaymentFooter330 button:focus-visible {
  outline: 3px solid #e2a72c;
  outline-offset: 2px;
}
.posScreen .checkoutGroup.transactionGroup330 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.posScreen .checkoutGroup.utilityGroup { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.posScreen .checkoutActions .posBtn { min-height: 42px !important; padding: 6px !important; font-size: 10px !important; }

#modalRoot .modalBox:has(.onlinePaymentPicker330) {
  width: min(720px, calc(100vw - 28px));
  max-width: 720px;
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  border-radius: 20px;
  background: #fff;
}
.onlinePaymentPicker330 { color: #193c2a; }
#modalRoot .onlinePaymentHeader330 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 24px;
  background: #f3f8f5;
  border: 0;
  border-bottom: 1px solid #dbe8df;
  box-shadow: none;
  color: #193c2a;
}
.onlinePaymentEyebrow330 { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #557264; }
#modalRoot .onlinePaymentHeader330 h2 { margin: 7px 0; font-size: 24px; line-height: 1.2; color: #173c28; }
#modalRoot .onlinePaymentHeader330 p { margin: 0; font-size: 13px; font-weight: 500; color: #62766b; }
.onlinePaymentDue330 { flex: none; text-align: right; }
.onlinePaymentDue330 span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #557264; }
.onlinePaymentDue330 strong { display: block; margin-top: 6px; font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums; color: #087647; }
.onlinePaymentGrid330 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 24px; }
#modalRoot .onlinePaymentMethod330 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 100px;
  padding: 16px;
  border: 1px solid #dce5e0;
  border-radius: 13px;
  background: #fff;
  color: #193c2a;
  text-align: left;
  line-height: 1.25;
  touch-action: manipulation;
}
#modalRoot .onlinePaymentMethod330:hover { background: #f6f9f7; border-color: #93b8a2; filter: none; }
.onlineMethodIcon330 { flex-basis: 42px; width: 42px; height: 42px; background: #e9f0fa; color: #2161ae; }
.onlineMethodmaya330 .onlineMethodIcon330 { background: #e3f6ed; color: #087747; }
.onlineMethodbank330 .onlineMethodIcon330 { background: #edf1f7; color: #3b587c; }
.onlineMethodcard330 .onlineMethodIcon330 { background: #efebfa; color: #6343a5; }
.onlineMethodtap330 .onlineMethodIcon330 { background: #e1f4f1; color: #08776b; }
.onlineMethodtap330 { grid-column: 1 / -1; }
.onlineMethodText330 { flex: 1; min-width: 0; }
.onlineMethodText330 strong { display: block; font-size: 14px; font-weight: 900; }
.onlineMethodText330 small { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; color: #65776d; }
.onlineMethodArrow330 { font: 500 28px/1 sans-serif; color: #8a9e92; }
.onlinePaymentFooter330 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 24px;
  background: #fafcfb;
  border-top: 1px solid #e2eae5;
}
.onlinePaymentFooter330 span { font-size: 11px; line-height: 1.5; color: #62766b; }
#modalRoot .onlinePaymentFooter330 button { flex: none; min-height: 42px; padding: 10px 14px; background: #eaf1ed; color: #234a33; font-size: 11px; }

@media (max-width: 950px) {
  .posScreen .checkoutActions { grid-template-columns: minmax(0, 1fr) !important; }
  .posScreen .paymentChoice330 { gap: 8px; padding: 10px; }
  .paymentText330 strong { font-size: 12px; }
  .paymentText330 small { font-size: 9px; }
  .paymentChoice330 kbd { display: none; }
  .posScreen .checkoutGroup.utilityGroup { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}
@media (max-width: 580px) {
  .posScreen .paymentChoices330 { gap: 5px; }
  .posScreen .paymentChoice330 { flex-direction: column; justify-content: center; gap: 6px; min-height: 85px; padding: 9px 5px; text-align: center; border-radius: 9px; }
  .paymentIcon330 { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; }
  .paymentIcon330 svg { width: 20px; height: 20px; }
  .paymentText330 strong { font-size: 10px; line-height: 1.25; }
  .paymentText330 small, .paymentArrow330 { display: none; }
  .posScreen .checkoutGroup.utilityGroup { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #modalRoot .modalBox:has(.onlinePaymentPicker330) { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  #modalRoot .onlinePaymentHeader330 { flex-wrap: wrap; gap: 16px; padding: 20px; }
  #modalRoot .onlinePaymentHeader330 h2 { font-size: 21px; }
  .onlinePaymentDue330 { text-align: left; }
  .onlinePaymentGrid330 { grid-template-columns: 1fr; gap: 9px; padding: 16px; }
  #modalRoot .onlinePaymentMethod330 { min-height: 76px; padding: 12px; }
  .onlinePaymentFooter330 { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .onlinePaymentFooter330 span { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .posScreen .paymentChoice330 { transition: none; }
}

/* ---- build331.css ---- */
/* BUILD331 — Reduce repaint work on the active cashier surface. */
#app .posScreen .cartPanel,
#app .posScreen .cartFixedFooter,
#app .posScreen .checkoutGroup,
#app .posScreen .cartRow,
#app .posScreen .checkoutActions .posBtn {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#app .posScreen .cartRow { contain: layout style; }
#app .posScreen .cartRow *,
#app .posScreen .checkoutActions .posBtn,
#app .posScreen .paymentChoice330 {
  animation: none !important;
  transition: none !important;
}