.sales-page { padding: 4px 0; min-width: 0; font-family: Arial,sans-serif; container-type: inline-size; container-name: salesdesk; }
.sales-page label { display: grid; gap: 4px; min-width: 0; }
.sales-page :is(input,select) { width: 100%; min-width: 0; border: 1px solid #dce1e5; border-radius: 4px; background: #fff; color: #263238; font: 12px Arial,sans-serif; }
.sales-page .search-control { display: flex; }
.sales-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid #e4e6e9; margin-bottom: 8px; }
:root body .sales-page .sales-tabs button { padding: 8px 10px; }
.sales-tabs { display: flex; gap: 4px; }.sales-tabs button { display: inline-flex; align-items: center; gap: 7px; border: 0; font-size: 13px; }
.sales-page .sales-location { display: flex; align-items: center; gap: 8px; margin: 0; }.sales-page .sales-location select { width: auto; min-width: 145px; padding: 8px; }
.sales-pos { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(480px,1.15fr); gap: 16px; align-items: start; }
.sales-catalog { min-width: 0; }.sales-catalog-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }.sales-catalog-heading h2 { margin: 0; font: 600 16px Arial,sans-serif; }
.sales-product-views { display: flex; border: 1px solid #dce1e5; border-radius: 4px; overflow: hidden; }.sales-product-views button { display: flex; align-items: center; justify-content: center; width: 34px; height: 32px; padding: 6px; background: #fff; color: #596471; border: 0; }.sales-product-views button + button { border-left: 1px solid #dce1e5; }.sales-product-views button[aria-pressed=true] { background: #edf3f3; color: #26535a; }.sales-product-views svg { width: 17px; height: 17px; }
.sales-product-tools { display: flex; gap: 8px; flex-wrap: wrap; }.sales-product-tools .search-control { flex: 1 1 190px; margin: 0; }.sales-product-tools select { width: auto; max-width: 145px; padding: 8px; }
.sales-products { display: grid; grid-template-columns: repeat(auto-fill,minmax(145px,1fr)); gap: 10px; padding: 10px 0; max-height: calc(100dvh - 235px); overflow-y: auto; }
.sales-product { display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e3e7; border-radius: 6px; padding: 0; overflow: hidden; text-align: left; min-width: 0; color: #101617; }
.sales-product:hover:not(:disabled) { border-color: #b88a2f; box-shadow: 0 2px 8px #1016170a; }.sales-product:disabled { opacity: .65; cursor: not-allowed; }
.sales-product-image { width: 100%; aspect-ratio: 1.8; object-fit: contain; background: #f5f6f7; display: flex; justify-content: center; align-items: center; }.sales-product-image > svg { width: 36px; height: 36px; color: #718b90; }
.sales-product-info { display: flex; flex-direction: column; width: 100%; gap: 4px; padding: 9px; }.sales-product-info strong { font: 600 13px/1.35 Arial,sans-serif; overflow-wrap: anywhere; }.sales-product-info small { font-size: 11px; color: #68727c; overflow-wrap: anywhere; }.sales-product-info b { font-size: 13px; }.sales-stock { color: #187544 !important; }.sales-stock.none { color: #b42335 !important; }
.sales-products-list { grid-template-columns: minmax(0,1fr); }.sales-products-list .sales-product { flex-direction: row; align-items: center; }.sales-products-list .sales-product > .sales-product-image { width: 64px; height: 76px; flex-shrink: 0; aspect-ratio: auto; }.sales-products-list .sales-product-info { padding: 8px 10px; }.sales-products-list .sales-product-info b { align-self: flex-start; }
.sales-page .sales-basket { background: #fff; border: 1px solid #dce1e5; border-radius: 6px; min-width: 0; position: sticky; top: 64px; height: calc(100dvh - 120px); min-height: 400px; display: flex; flex-direction: column; }
.sales-page :is(.sales-basket-head,.sales-buyer,.sales-totals) { flex-shrink: 0; }
.sales-page .sales-basket-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eceef0; }.sales-basket-head h2 { margin: 0; font: 600 17px Arial,sans-serif; }.sales-basket-head small { color: #68727c; font-size: 12px; }.sales-basket-head > button { margin-left: auto; }
.sales-page .sales-buyer { padding: 8px 12px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr) 90px; gap: 8px; border-bottom: 1px solid #eceef0; }.sales-buyer label { margin: 0; font-size: 11px; color: #596471; }.sales-buyer :is(input,select) { height: 36px; padding: 7px; margin: 0; }.sales-customer-search { position: relative; min-width: 0; }.sales-customer-search .search-control { padding: 7px 9px; min-height: 36px; gap: 6px; }.sales-customer-search .search-control input { height: 20px; padding: 0; margin: 0; }
.sales-customer-results { position: absolute; top: 100%; left: 0; width: max(100%,240px); background: #fff; z-index: 5; border: 1px solid #dee1e6; border-radius: 4px; box-shadow: 0 5px 20px #10161720; max-height: 220px; overflow-y: auto; }.sales-customer-results button { display: flex; flex-direction: column; text-align: left; width: 100%; background: #fff; border: 0; border-bottom: 1px solid #eee; padding: 10px; font-size: 12px; }.sales-customer-results small { color: #68727c; }
.sales-page .sales-lines { flex: 1 1 0; min-height: 110px; overflow-y: auto; padding: 0 12px; scrollbar-gutter: stable; }
.sales-lines:focus-visible { outline: 2px solid #a57a03; outline-offset: -2px; }
.sales-cart-head { position: sticky; top: 0; z-index: 1; background: #fff; }
.sales-cart-head,.sales-line { display: grid; grid-template-columns: minmax(80px,1fr) 96px 88px 108px 24px; gap: 8px; align-items: center; }.sales-cart-head { padding: 9px 0; border-bottom: 1px solid #dce1e5; color: #596471; font-size: 11px; }.sales-cart-head > :nth-child(4) { text-align: right; }
.sales-line { padding: 12px 0; border-bottom: 1px solid #eceef0; }.sales-line-item { min-width: 0; }.sales-line-item strong { display: block; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }.sales-line-item small { display: block; font-size: 10px; color: #68727c; line-height: 1.5; overflow-wrap: anywhere; }.sales-line-item small:last-child { color: #357567; }
.sales-page .sales-quantity { display: grid; grid-template-columns: 28px minmax(0,1fr) 28px; height: 34px; border: 1px solid #dce1e5; border-radius: 4px; overflow: hidden; }.sales-quantity button { display: flex; align-items: center; justify-content: center; padding: 4px; background: #f5f7f8; border: 0; color: #263238; }.sales-quantity button:disabled { opacity: .4; cursor: not-allowed; }.sales-quantity svg { width: 13px; height: 13px; }.sales-page .sales-quantity input { height: 32px; padding: 3px; border: 0; border-radius: 0; text-align: center; appearance: textfield; -moz-appearance: textfield; }.sales-quantity input::-webkit-inner-spin-button,.sales-quantity input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }.sales-quantity:focus-within { outline: 2px solid #a57a03; outline-offset: 2px; }
.sales-page .sales-price-cell input { height: 34px; padding: 6px; text-align: right; }.sales-line-amount { font-size: 12px; text-align: right; overflow-wrap: anywhere; }.sales-basket .icon-button { width: 28px; height: 28px; padding: 5px; }.sales-basket .icon-button svg { width: 17px; height: 17px; }
.sales-empty { grid-column: 1/-1; padding: 32px 12px; color: #68727c; text-align: center; font-size: 13px; }
.sales-page .sales-totals { padding: 10px 12px; background: #fff; border-top: 1px solid #dce1e5; border-radius: 0 0 6px 6px; font-size: 12px; position: relative; }
.sales-summary-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.sales-summary-controls > div { display: flex; gap: 8px; align-items: center; }.sales-page .sales-summary-controls label { display: flex; align-items: center; gap: 8px; margin: 0; }.sales-totals input { width: 100px; height: 32px; padding: 6px; text-align: right; }
.sales-grand { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; font-size: 19px; }.sales-grand strong { color: #400128; }.sales-page .sales-checkout-actions { display: flex; justify-content: flex-end; gap: 8px; }.sales-checkout-actions > button { min-height: 38px; }.sales-checkout-actions .order-primary { min-width: 150px; }
.sale-receipt-dialog.sale-dialog { width: min(840px,calc(100vw - 24px)); }.sale-receipt-preview { display: block; width: 100%; height: min(680px,65dvh); border: 0; background: #f3f4f5; }
.sale-dialog { font-family: Arial,sans-serif; width: min(580px,calc(100vw - 24px)); }.sale-dialog .order-dialog-body { padding: 16px 20px; }.sale-dialog .order-total-row { margin: 0 0 14px; padding: 8px 0; border-top: 0; }.sale-dialog footer { flex-wrap: wrap; }
@container salesdesk (max-width: 760px) { .sales-pos { grid-template-columns: minmax(0,1fr); }.sales-products { max-height: 270px; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }.sales-products-list { grid-template-columns: minmax(0,1fr); } }
@container salesdesk (max-width: 550px) { .sales-page .sales-buyer { grid-template-columns: minmax(0,1fr) 90px; }.sales-customer-search { grid-column: 1/-1; }.sales-cart-head { display: none; }.sales-line { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 28px; gap: 10px; }.sales-line-item { grid-column: 1/4; }.sales-remove-cell { grid-column: 4; grid-row: 1; }.sales-quantity-cell,.sales-price-cell,.sales-line-amount { grid-row: 2; }.sales-price-cell::before { content: 'Unit Price'; display: block; font-size: 10px; color: #68727c; margin-bottom: 4px; }.sales-quantity-cell::before { content: 'Quantity'; display: block; font-size: 10px; color: #68727c; margin-bottom: 4px; }.sales-line-amount::before { content: 'Amount'; display: block; font-size: 10px; font-weight: 400; color: #68727c; margin-bottom: 8px; }.sales-page .sales-quantity { grid-template-columns: 24px minmax(0,1fr) 24px; }.sales-summary-controls { align-items: flex-start; }.sales-summary-controls > div { flex-direction: column; align-items: flex-start; gap: 4px; }.sales-page .sales-summary-controls label { flex-direction: column; align-items: flex-end; gap: 4px; }.sales-totals input { width: 100px; } }
.sales-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin: 14px 0; }.sales-metrics > div { border: 1px solid #e0e3e7; padding: 13px; background: #fff; border-radius: 5px; }.sales-metrics span { display: block; color: #596471; font-size: 12px; margin-bottom: 7px; }.sales-metrics strong { font-size: 17px; overflow-wrap: anywhere; }
.sales-filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }.sales-filters > label { font-size: 11px; margin: 0; }.sales-filters input,.sales-filters select { padding: 8px; font-size: 12px; margin-top: 4px; }.sales-filters > .search-control { flex: 1; min-width: 180px; }.sales-filters > .search-control input { margin: 0; padding: 0; }.sales-table { background: #fff; border: 1px solid #e0e3e7; border-radius: 5px; }.sales-table td,.sales-table th { font-size: 12px; padding: 12px; white-space: nowrap; }.sales-table footer { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 12px; }.sales-table footer > div { display: flex; align-items: center; gap: 8px; }.sale-status { border-radius: 4px; padding: 4px 7px; font-size: 11px; background: #f2f3f5; }.sale-status.completed { background: #e6f4ec; color: #16723e; }.sale-status.held { background: #fff4dc; color: #8b6111; }.sale-status.cancelled { background: #fbe9ec; color: #a3253d; }
.sales-detail-line { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; padding: 10px 0; gap: 14px; font-size: 13px; }.sales-detail-line small { display: block; color: #68727c; }.sales-error { padding: 10px; font-size: 12px; }
.stock-variant-full { grid-column: 1/-1; }.order-dialog .order-form-grid:has(.stock-variant-full) > .order-lookup-field:first-child { order: -2; }

@media(max-width:800px) { .sales-filters input[type=date] { max-width: 145px; } }
@media(max-width:400px) { .sales-toolbar { align-items: stretch; }.sales-page .sales-location { width: 100%; justify-content: space-between; }.sales-page .sales-location select { flex: 1; }.sales-product-tools select { max-width: 115px; } }
.sale-return-lines fieldset { border:0; border-bottom:1px solid #e4e7eb; padding:12px 0; margin:0 0 12px; min-width:0; }
.sale-return-lines legend { font-size:13px; font-weight:600; padding:0; overflow-wrap:anywhere; }
.sale-return-lines .order-form-grid { gap:12px; }
.sale-dialog footer { flex-wrap:wrap; }
.sales-page .order-insight { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sales-metrics { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media(max-width:1100px) { .sales-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:800px) {
 .sales-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .sales-metrics > div:last-child { grid-column:auto; }
 .sales-table .table-wrap { overflow-x:auto; }
 .sales-table table { display:table; min-width:1050px; }
 .sales-table thead { display:table-header-group; }
 .sales-table tbody { display:table-row-group; }
 .sales-table tr { display:table-row; }
 .sales-table :is(th,td) { display:table-cell; }
}
