.wpf-pos-page{margin:-27px -30px -50px;min-width:1120px;height:calc(100vh - 72px);background:#f5f4ed;color:#272724;overflow:hidden;position:relative}.wpf-pos-subbar{height:34px;border-bottom:1px solid #d3d1c7;display:flex;align-items:center;justify-content:space-between;padding:0 6px;font-size:11px}.wpf-pos-subbar>div{display:flex;align-items:center;gap:8px}.cash-status{display:flex;align-items:center;gap:5px;background:#e8f5e9;color:#2e7d32;border:1px solid #87ba8b;border-radius:4px;padding:3px 8px;font-size:9px}.cash-status .ui-icon{width:12px}.sale-type{background:#c96442;color:#fff;border-radius:3px;padding:4px 10px;font-size:9px;font-weight:700}.wpf-pos-grid{display:grid;grid-template-columns:38% 27% 35%;height:calc(100% - 34px);gap:6px;padding:6px 0 0 2px}.receipt-column{grid-row:1;grid-column:1;background:#fff;border:1px solid #d3d1c7;border-radius:5px 5px 0 0;display:grid;grid-template-rows:39px 38px 1fr 48px;overflow:hidden}.receipt-column>header{display:flex;align-items:center;padding:0 13px;background:#f5f4ed;border-bottom:1px solid #d3d1c7;font-size:14px;font-weight:600}.receipt-note-badge{margin-left:auto;background:#fff0e8;color:#d8582b;border-radius:99px;padding:3px 7px;font-size:8px}.receipt-table-head{display:grid;grid-template-columns:1fr 85px 110px 125px;align-items:center;border-bottom:1px solid #e3e1da;color:#706e69;font-size:12px;text-align:center}.receipt-table-head span:first-child{text-align:left;padding-left:95px}.receipt-lines{position:relative;overflow:auto}.receipt-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#dedbd2}.receipt-empty .ui-icon{display:none}.receipt-empty span{font-size:70px;font-weight:300}.receipt-line{position:relative;width:100%;border:0;border-bottom:1px solid #eceae4;background:#fff;display:grid;grid-template-columns:1fr 85px 110px 125px;align-items:center;text-align:left;padding:10px 0;color:#333}.receipt-line:hover{background:#faf9f5}.receipt-line.selected{background:#eaf3fc;box-shadow:inset 3px 0 #185fa5}.receipt-line>span{display:flex;flex-direction:column;padding-left:14px;min-width:0}.receipt-line strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.receipt-line small{font-size:9px;color:#888780}.receipt-line small em{color:#c96442;font-style:normal}.receipt-line>b{text-align:center;font:500 11px monospace}.receipt-line>i{grid-column:1/-1;background:#fff8f4;color:#a32d2d;padding:2px 14px;font-size:9px;font-style:normal}.receipt-nav{border-top:1px solid #d3d1c7;display:flex;align-items:center;padding:0 13px;gap:9px}.receipt-nav button{border:1px solid #185fa5;background:#fff;color:#185fa5;border-radius:50%;width:23px;height:23px;font-weight:bold;line-height:18px}.pos-center-column{grid-row:1;grid-column:2;display:grid;grid-template-rows:140px 18px 52px minmax(225px,1fr) 188px;gap:6px;min-width:0}.customer-overview{grid-column:1 / span 2;display:grid;grid-template-columns:134px 1fr 1.65fr 44px;gap:6px}.customer-image,.customer-personal,.customer-address{background:#fff;border:1px solid #d3d1c7;border-radius:5px;padding:10px}.customer-image{display:grid;place-items:center;color:#d1cec5}.customer-image .ui-icon{width:54px;height:54px}.customer-personal small,.customer-address small{font-size:10px;color:#5f5e5a}.customer-personal>strong,.customer-address>strong{display:block;font-size:12px;margin:4px 0 7px}.customer-personal dl{display:grid;grid-template-columns:1fr auto;margin:0;font-size:9px;color:#888780}.customer-personal dt{font-weight:400}.customer-personal dd{margin:0;font-family:monospace;color:#333}.customer-address p{font-size:9px;color:#888780}.customer-shortcuts{display:flex;flex-direction:column;gap:5px}.customer-shortcuts button{flex:1;border:1px solid #d3d1c7;background:#fff;color:#185fa5;display:grid;place-items:center}.customer-shortcuts button.danger{color:#a32d2d}.customer-shortcuts .ui-icon{width:17px}.search-label,.pos-actions-column>label{font-size:10px;color:#5f5e5a;align-self:end}.pos-search-box{height:52px;background:#fff;border:1px solid #d3d1c7;border-radius:5px;display:flex;align-items:center;padding:0 12px;gap:9px}.pos-search-box .ui-icon{width:20px;color:#888780}.pos-search-box input{flex:1;border:0;border-bottom:2px solid #6574df;outline:0;height:38px;font-size:15px;color:#444}.pos-search-box button{border:0;background:transparent;color:#185fa5;font-size:20px}.inline-search-results{position:absolute;z-index:20;top:246px;width:calc(27% - 8px);background:#fff;border:1px solid #d3d1c7;box-shadow:0 12px 28px rgba(0,0,0,.17);max-height:250px;overflow:auto}.inline-search-results button{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid #eee;background:#fff;padding:9px;text-align:left}.inline-search-results button span{display:flex;flex-direction:column}.inline-search-results small{font-size:8px;color:#888}.inline-search-results b{font-size:10px}.pos-numpad{background:#fff;border:1px solid #d3d1c7;border-radius:5px;padding:9px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:5px}.pos-numpad button{border:1px solid #d3d1c7;background:#f5f4ed;color:#1f1f1d;font-size:22px;font-weight:500}.pos-numpad .key-back,.pos-numpad .key-clear{background:#fff;color:#a32d2d}.pos-numpad .key-number:nth-of-type(12){grid-column:1/3}.pos-numpad .numpad-enter{grid-column:4;grid-row:3/5;background:#97c459;border-color:#639922;color:#fff;font-size:29px}.pos-totals{background:#fff;border:1px solid #d3d1c7;border-radius:5px;padding:10px 15px}.pos-totals p{display:flex;justify-content:space-between;margin:2px 0;font-size:12px}.pos-totals b{font-family:monospace}.pos-totals p.discount{color:#a32d2d}.pos-totals p.net{font-size:18px;font-weight:700;margin-top:6px}.pos-totals p.net b{font-size:24px;color:#a32d2d}.pos-actions-column{grid-row:1;grid-column:3;display:grid;grid-template-rows:140px 18px 1fr 18px 58px;min-width:0}.pos-actions-column:before{content:"";grid-row:1}.pos-action-grid{grid-row:3;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);gap:5px}.pos-action-grid>button,.empty-action-slot{border:1px solid #d3d1c7;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;font-size:9px}.pos-action-grid>button:hover{background:#edf5fc;border-color:#9cb9d5}.pos-action-grid>button.danger{color:#a32d2d}.pos-action-grid .ui-icon{width:20px;height:20px}.empty-action-slot{background:#f8f7f3}.action-badge{position:absolute;right:6px;top:5px;background:#a32d2d;color:#fff;border-radius:50%;min-width:16px;height:16px;display:grid;place-items:center;font-size:8px}.pos-actions-column>label:last-of-type{grid-row:4}.payment-bar{grid-row:5;display:grid;grid-template-columns:45px 1fr;gap:5px}.payment-bar>button:first-child{border:1px solid #d3d1c7;background:#fff;color:#185fa5}.pay-main{border:1px solid #0f3d6e;background:#2267a9;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700}.pay-main .ui-icon{width:24px}.pay-main span{font-size:18px}.pay-main strong{font-family:monospace;font-size:13px;margin-left:auto;margin-right:15px}.pos-toast{position:absolute;z-index:60;right:18px;top:44px;background:#e9f8f0;border:1px solid #9ed9bb;color:#167a52;border-radius:7px;padding:9px 12px;display:flex;align-items:center;gap:8px;font-size:10px;box-shadow:0 10px 26px rgba(0,0,0,.13)}.pos-toast.error{background:#fff0ed;border-color:#efb4a3;color:#a33b21}.pos-toast .ui-icon{width:15px}.pos-toast button{border:0;background:transparent;color:inherit}.pos-modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(10,20,32,.48);display:grid;place-items:center;padding:30px}.pos-modal{width:min(580px,92vw);max-height:82vh;background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.3);overflow:hidden}.pos-modal>header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #e5e7e7}.pos-modal h2{font-size:20px;margin:3px 0 0}.pos-modal>header>button{border:0;background:#f1f2f0;border-radius:50%;width:32px;height:32px}.pos-modal-body{padding:20px;overflow:auto;max-height:calc(82vh - 76px)}.pos-modal-body>label{display:block;font-size:10px;font-weight:700;color:#5f6976;margin:10px 0 5px}.modal-input,.modal-textarea,.modal-search{width:100%;border:1px solid #d8dde1;border-radius:8px;padding:11px;outline:0}.modal-textarea{min-height:110px;resize:vertical}.modal-search{display:flex;align-items:center;gap:7px}.modal-search input{border:0;outline:0;flex:1}.modal-primary{width:100%;border:0;background:#ff6b35;color:#fff;border-radius:8px;padding:12px;margin-top:14px;font-weight:700}.modal-product-list,.choice-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}.modal-product-list button,.choice-list button{border:1px solid #e1e5e5;background:#fff;border-radius:8px;padding:10px;display:flex;align-items:center;gap:10px;text-align:left}.modal-product-list button:hover,.choice-list button:hover,.choice-list button.selected{border-color:#ff9b76;background:#fff7f3}.modal-product-list button>span:nth-child(2),.choice-list button>span{display:flex;flex-direction:column}.modal-product-list small,.choice-list small{font-size:9px;color:#8a929a}.modal-product-list b{margin-left:auto;font-size:11px}.modal-context{background:#f5f6f4;border-radius:7px;padding:10px;color:#596574;font-size:11px}.discount-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.discount-presets button{border:1px solid #ffb99f;background:#fff4ef;color:#d95727;border-radius:7px;padding:9px;font-weight:700}.modal-empty{text-align:center;color:#8b949e;padding:35px}.customer-card-modal{text-align:center}.customer-card-modal>span{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;margin:auto;background:#e8edf4;color:#456384;font-weight:800}.customer-card-modal h3{margin:10px 0 0}.customer-card-modal p{color:#8b949e}.customer-card-modal dl{display:grid;grid-template-columns:1fr 1fr;text-align:left;background:#f6f7f5;padding:12px;border-radius:8px;font-size:11px}.customer-card-modal dd{text-align:right}.payment-summary{text-align:center;padding:10px}.payment-summary span{display:block;color:#7b8590;font-size:11px}.payment-summary strong{font:800 34px Manrope;color:#0f1b2d}.payment-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.payment-choices button{border:1px solid #dce0e2;background:#fff;border-radius:8px;padding:13px}.payment-choices button.selected{border-color:#ff6b35;background:#fff3ee;color:#d95727}.payment-confirm:disabled{background:#bfc5c9}.safe-payment{display:block;text-align:center;color:#9299a1;margin-top:8px}
@media(max-width:1300px){.wpf-pos-grid{grid-template-columns:37% 28% 35%}.customer-overview{grid-template-columns:105px 1fr 1.3fr 40px}.receipt-table-head,.receipt-line{grid-template-columns:1fr 65px 78px 88px}.receipt-table-head span:first-child{padding-left:45px}.pos-action-grid{gap:3px}.pos-action-grid>button span{font-size:8px}}

/* The customer strip spans both work columns, as in the desktop sales screen. */
.wpf-pos-grid{grid-template-columns:minmax(0,38fr) minmax(0,27fr) minmax(0,35fr);grid-template-rows:140px minmax(0,1fr)}
.receipt-column{grid-row:1/3}
.customer-overview{grid-column:2/4;grid-row:1}
.pos-center-column{grid-column:2;grid-row:2;grid-template-rows:18px 52px minmax(225px,1fr) 188px}
.pos-actions-column{grid-column:3;grid-row:2;grid-template-rows:18px 1fr 18px 58px}
.pos-actions-column:before{display:none}
.pos-action-grid{grid-row:2}
.pos-actions-column>label:last-of-type{grid-row:3}
.payment-bar{grid-row:4}

/* Reserve the fourth-column Enter key instead of relying on grid auto-flow. */
.pos-numpad button:nth-child(1){grid-column:1;grid-row:1}.pos-numpad button:nth-child(2){grid-column:2;grid-row:1}.pos-numpad button:nth-child(3){grid-column:3;grid-row:1}.pos-numpad button:nth-child(4){grid-column:4;grid-row:1}
.pos-numpad button:nth-child(5){grid-column:1;grid-row:2}.pos-numpad button:nth-child(6){grid-column:2;grid-row:2}.pos-numpad button:nth-child(7){grid-column:3;grid-row:2}.pos-numpad button:nth-child(8){grid-column:4;grid-row:2}
.pos-numpad button:nth-child(9){grid-column:1;grid-row:3}.pos-numpad button:nth-child(10){grid-column:2;grid-row:3}.pos-numpad button:nth-child(11){grid-column:3;grid-row:3}
.pos-numpad button:nth-child(12){grid-column:1/3;grid-row:4}.pos-numpad button:nth-child(13){grid-column:3;grid-row:4}.pos-numpad .numpad-enter{grid-column:4;grid-row:3/5}