/* Shared module colors, tablet controls and daily reconciliation. */
body #app .op-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}
body #app .op-toolbar button{min-height:44px;padding:10px 16px;background:white;color:var(--text);border:1px solid var(--line)}
body #app .op-toolbar button[aria-pressed=true]{background:var(--module-soft,#F7ECD5);border-color:var(--module-strong,#946000);color:var(--module-strong,#946000)}
body #app .op-hint{font-size:12px;color:var(--muted);line-height:1.6}
body #app .op-product-wrap{position:relative;min-width:0;display:flex}
body #app .op-product-wrap>.product{width:100%;height:100%}
body #app .op-pin{position:absolute;right:8px;top:8px;z-index:2;width:44px;height:44px;min-height:44px;background:#fff!important;border:1px solid var(--line);color:var(--module-strong,#946000);font-size:22px!important;border-radius:50%!important}
body #app .op-pin[aria-pressed=true]{background:var(--module-soft,#F7ECD5)!important;border-color:var(--module-strong,#946000)}
body #app .op-selected{outline:2px solid var(--module-strong,#946000);outline-offset:-2px}
body #app .op-quantity{position:absolute;left:10px;top:10px;background:var(--module-strong,#946000);color:white;padding:6px 9px;border-radius:8px;font-size:12px;font-weight:600;pointer-events:none}
body #app #view-sales .qty button{min-width:44px;min-height:44px!important}
body #app #view-sales .qty{gap:10px}
body #app #view-sales #checkout{min-height:48px!important;font-size:14px!important}
body #app #view-sales .product-name,body #app #view-sales .product-body>strong{font-size:14px!important;line-height:1.45}
body #app .op-mobile-cart{display:none}
body #app #view-sales .cart,body #app #view-sales .cart-card{position:sticky!important;top:18px;align-self:start;max-height:calc(100dvh - 36px);overflow:auto}
body #app #view-orders>.heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
body #app #view-orders>.heading #clientNewSale{margin-left:auto}
#opCashDialog{width:min(680px,calc(100vw - 28px));max-height:90dvh;overflow:auto;border:1px solid var(--line,#E5E8E1);border-radius:18px;padding:26px;background:white;color:var(--text,#263D42);font:14px/1.6 Montserrat,Arial,sans-serif}
#opCashDialog::backdrop{background:#201b1766}
#opCashDialog header{display:flex;justify-content:space-between;gap:14px;align-items:center}
#opCashDialog h2{font-size:22px;margin:0}
#opCashDialog button,#opCashDialog input,#opCashDialog textarea{font:inherit;border:1px solid var(--line,#E5E8E1);border-radius:9px;padding:10px 12px;min-height:44px;background:white;color:inherit}
#opCashDialog button{cursor:pointer}
#opCashDialog .op-cash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
#opCashDialog label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
#opCashDialog textarea{width:100%;min-height:80px}
#opCashDialog dl{margin:18px 0;background:var(--panel2,#F7F5F0);padding:16px;border-radius:12px}
#opCashDialog dl>div{display:flex;justify-content:space-between;gap:18px;padding:7px 0}
#opCashDialog dd{margin:0;font-weight:600;white-space:nowrap}
#opCashDialog footer{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
#opCashDialog #opCashSave{background:var(--module-strong,#946000);color:white;border-color:transparent}
#opCashDialog .op-warning{padding:12px;border:1px solid #d4b77d;background:#fff9ed;border-radius:9px;font-size:12px}
#opCashDialog button:disabled{opacity:.55;cursor:default}
#opCashDialog :focus-visible,body #app .op-pin:focus-visible{outline:3px solid var(--module-accent,#D99000);outline-offset:3px}
@media(max-width:900px){body #app #view-sales .cart,body #app #view-sales .cart-card{position:static!important;max-height:none}body #app #view-sales{padding-bottom:72px}body #app .op-mobile-cart:not([hidden]){display:flex;position:fixed;bottom:12px;left:16px;right:16px;z-index:70;justify-content:space-between;align-items:center;gap:12px;background:var(--module-strong,#946000);color:white;border:0;border-radius:12px!important;padding:14px 18px;min-height:50px}body #app .op-mobile-cart[hidden]{display:none!important}}
@media(max-width:560px){#opCashDialog{padding:18px}#opCashDialog .op-cash-grid{grid-template-columns:1fr}#opCashDialog dl>div{font-size:12px}}
/* More compact payment dialog, scoped to checkout only. */
body #app #payment{width:min(420px,calc(100vw - 28px))!important;max-height:90dvh!important;overflow:auto!important;padding:24px!important;border-radius:16px!important}
body #app #payment #paymentTitle{font-size:18px!important;font-weight:600!important;line-height:1.35!important;margin:5px 0 7px!important}
body #app #payment>p{font-size:12px!important;line-height:1.6!important}
body #app #payment .eyebrow{font-size:9px!important}
body #app #payment #paytotal{font-size:28px!important;font-weight:600!important;line-height:1.2!important;margin:18px 0!important}
body #app #payment .payment-method-buttons{gap:10px!important;margin-bottom:16px!important}
body #app #payment .payment-method-buttons button{min-height:80px!important;padding:12px 10px!important;gap:5px!important}
body #app #payment .payment-method-buttons strong{font-size:13px!important;font-weight:600!important}
body #app #payment .payment-method-buttons small{font-size:11px!important}
body #app #payment .payment-method-buttons svg{width:21px!important;height:21px!important}
body #app #payment .payment-method-buttons button>span{font-size:22px!important}
body #app #payment #received{font-size:20px!important;font-weight:500!important;height:48px!important;min-height:48px!important;padding:10px 13px!important}
body #app #payment #cashFields label{font-size:12px!important}
body #app #payment .received-wrap>span{font-size:20px!important}
body #app #payment #receivedHelp{font-size:11px!important}
body #app #payment .cash-shortcuts{gap:6px!important;margin-top:10px!important}
body #app #payment .cash-shortcuts button{min-height:40px!important;font-size:11px!important;padding:8px 6px!important}
body #app #payment #change{font-size:14px!important;font-weight:600!important;padding:12px!important;margin:14px 0!important}
body #app #payment #confirm{min-height:44px!important;font-size:12px!important;padding:12px 16px!important}
@media(max-height:700px){body #app #payment{padding:18px!important}body #app #payment #paytotal{margin:12px 0!important}body #app #payment .payment-method-buttons button{min-height:70px!important}}