/* Quick Invoice: global shell guards. ------------------------------------------------------------------------- Blazor appends a component scope attribute to selectors in .razor.css, while carries no such attribute, so the document-scroll rule must remain global. The responsive rules below are intentionally narrow-screen-only and are scoped behind body.quick-invoice-active. They reinforce the cashier priorities (scan -> cart -> payment -> shortcuts) without changing desktop layout or any other ERP page. The `quick-invoice-active` body class is added and removed by wwwroot/js/quickInvoiceShortcuts.js. */ body.quick-invoice-active { position: static !important; height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; touch-action: pan-y !important; overscroll-behavior-y: auto !important; } /* Tablet and narrow desktop: keep all six payment actions visible and equal-sized. */ @media (max-width: 900px) { body.quick-invoice-active .quick-invoice-page { width: 100% !important; min-width: 0 !important; padding: .2rem !important; gap: .25rem !important; } body.quick-invoice-active .quick-workspace, body.quick-invoice-active .quick-sale-panel, body.quick-invoice-active .quick-shortcuts-panel { width: 100% !important; min-width: 0 !important; } body.quick-invoice-active .quick-sale-panel { display: flex !important; flex-direction: column !important; } /* Primary cashier flow. */ body.quick-invoice-active .quick-scan-head { order: 1 !important; } body.quick-invoice-active .quick-entry { order: 2 !important; } body.quick-invoice-active .quick-items-heading { order: 3 !important; } body.quick-invoice-active .quick-items-list { order: 4 !important; min-height: 220px !important; max-height: 52dvh !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } body.quick-invoice-active .quick-checkout-bar { order: 5 !important; } body.quick-invoice-active .quick-shortcuts-panel { order: 6 !important; } body.quick-invoice-active .quick-scan-head { min-height: 40px !important; gap: .35rem !important; padding: .3rem .4rem !important; } body.quick-invoice-active .quick-scan-head small { overflow: hidden !important; max-width: 54vw !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.quick-invoice-active .quick-scan-head .btn { min-height: 34px !important; padding: .25rem .45rem !important; font-size: .68rem !important; white-space: nowrap !important; } body.quick-invoice-active .quick-entry { max-height: none !important; overflow: visible !important; } body.quick-invoice-active .quick-entry .form-control, body.quick-invoice-active .quick-entry input { min-height: 42px !important; font-size: .85rem !important; } body.quick-invoice-active .quick-entry .btn, body.quick-invoice-active .quick-entry button { min-height: 40px !important; padding-block: .3rem !important; font-size: .72rem !important; } /* Under 900px the phone bar (.quick-mobile-checkout) carries the same buttons, so this one must go. It used to say display:grid !important here, which beat the component's own ".quick-sale-panel > .quick-checkout-bar { display:none !important }" - same importance, but body.quick-invoice-active adds a class the other selector does not have, so this one won. Both bars showed and the pay buttons appeared twice, the second set at the bottom of the page. The hide lives here rather than in the component for exactly that reason: whichever rule carries body.quick-invoice-active is the one that decides. */ body.quick-invoice-active .quick-checkout-bar { display: none !important; } body.quick-invoice-active .quick-total-block { min-width: 0 !important; column-gap: .25rem !important; } body.quick-invoice-active .quick-total-block strong { font-size: .96rem !important; } body.quick-invoice-active .quick-total-block small { font-size: .59rem !important; } body.quick-invoice-active .quick-invoice-discount { min-width: 0 !important; width: 100% !important; } body.quick-invoice-active .quick-invoice-discount .d-flex { gap: .2rem !important; } body.quick-invoice-active .quick-invoice-discount .form-control { min-width: 0 !important; min-height: 34px !important; padding: .2rem .35rem !important; font-size: .72rem !important; } body.quick-invoice-active .quick-invoice-discount .btn { min-width: 46px !important; min-height: 34px !important; padding: .15rem .35rem !important; font-size: .68rem !important; white-space: nowrap !important; } body.quick-invoice-active .quick-checkout-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .25rem !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } body.quick-invoice-active .quick-checkout-actions .btn { width: 100% !important; min-width: 0 !important; min-height: 38px !important; max-height: 38px !important; padding: .25rem .3rem !important; border-radius: 7px !important; font-size: .67rem !important; line-height: 1 !important; white-space: nowrap !important; } body.quick-invoice-active .quick-checkout-actions kbd { margin: 0 !important; padding: .05rem .14rem !important; font-size: .5rem !important; } /* Quick goods stay reachable but never steal the main viewport. */ body.quick-invoice-active .quick-shortcuts-panel { max-height: 116px !important; overflow: hidden !important; } body.quick-invoice-active .quick-shortcuts-head { display: none !important; } body.quick-invoice-active .quick-tab-strip { min-height: 30px !important; padding: .18rem .25rem !important; } body.quick-invoice-active .quick-shortcuts-grid { display: flex !important; min-height: 72px !important; max-height: 78px !important; gap: .3rem !important; padding: .3rem !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; } body.quick-invoice-active .quick-shortcut { width: 106px !important; min-width: 106px !important; min-height: 64px !important; max-height: 68px !important; padding: .35rem !important; } } /* Phone portrait / very narrow browser: two payment buttons per row and trim secondary chrome. */ @media (max-width: 600px) { body.quick-invoice-active .quick-topbar { min-height: 40px !important; gap: .25rem !important; padding: .25rem .3rem !important; } body.quick-invoice-active .quick-topbar > div:first-child small, body.quick-invoice-active .quick-scan-head small { display: none !important; } body.quick-invoice-active .quick-topbar h1 { font-size: .88rem !important; } body.quick-invoice-active .quick-top-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; gap: .22rem !important; } body.quick-invoice-active .quick-top-actions .btn, body.quick-invoice-active .quick-customer-chip { width: 100% !important; min-width: 0 !important; min-height: 34px !important; padding: .2rem .3rem !important; font-size: .65rem !important; } body.quick-invoice-active .quick-scan-head { min-height: 38px !important; padding: .25rem .3rem !important; } body.quick-invoice-active .quick-scan-head strong { font-size: .73rem !important; } body.quick-invoice-active .quick-scan-head .btn { min-height: 32px !important; font-size: .64rem !important; } body.quick-invoice-active .quick-items-list { min-height: 250px !important; max-height: 54dvh !important; } body.quick-invoice-active .quick-checkout-bar { grid-template-columns: minmax(0, 1fr) minmax(104px, 125px) !important; gap: .25rem !important; padding: .25rem !important; } body.quick-invoice-active .quick-total-block > span { padding: .15rem .25rem !important; font-size: .59rem !important; } body.quick-invoice-active .quick-total-block strong { font-size: .9rem !important; } body.quick-invoice-active .quick-invoice-discount label { display: none !important; } body.quick-invoice-active .quick-checkout-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.quick-invoice-active .quick-checkout-actions .btn { min-height: 37px !important; max-height: 37px !important; font-size: .65rem !important; } body.quick-invoice-active .quick-more-panel { grid-template-columns: 1fr !important; gap: .35rem !important; padding: .4rem !important; max-height: 50dvh !important; overflow-y: auto !important; } body.quick-invoice-active .quick-customer-lookup { flex-direction: column !important; align-items: stretch !important; gap: .35rem !important; padding: .4rem !important; } } /* Small phones: preserve tap targets but remove the last unnecessary whitespace. */ @media (max-width: 390px) { body.quick-invoice-active .quick-invoice-page { padding: .12rem !important; } body.quick-invoice-active .quick-checkout-bar { grid-template-columns: minmax(0, 1fr) 100px !important; } body.quick-invoice-active .quick-checkout-actions .btn { font-size: .61rem !important; } body.quick-invoice-active .quick-checkout-actions kbd { font-size: .46rem !important; } body.quick-invoice-active .quick-shortcut { width: 96px !important; min-width: 96px !important; } }