.cssV2-retail {
    display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden;
    padding:calc(8px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    background:var(--cssV2-bg-app); color:var(--cssV2-text); font-size:var(--cssV2-fs-body-small);
}
.cssV2-retail *, .cssV2-retail *::before, .cssV2-retail *::after { box-sizing:border-box; }
.cssV2-retail [hidden] { display:none !important; }
.cssV2-retail button, .cssV2-retail select, .cssV2-retail input { font:inherit; }
.cssV2-retail button { touch-action:manipulation; }
.cssV2-retail button:focus-visible, .cssV2-retail select:focus-visible, .cssV2-retail [tabindex]:focus-visible { outline:2px solid var(--cssV2-primary); outline-offset:-2px; }
.cssV2-retail input:not([type=checkbox]):focus, .cssV2-retail input:not([type=checkbox]):focus-visible, .cssV2-retail textarea:focus, .cssV2-retail textarea:focus-visible { outline:none; box-shadow:none; }
.cssV2-retail input[type=checkbox]:focus-visible { outline:2px solid var(--cssV2-primary); outline-offset:2px; }
.cssV2-retail button:disabled, .cssV2-retail input:disabled, .cssV2-retail select:disabled { cursor:not-allowed; opacity:.55; }
.cssV2-retail .pos-retail-layout { display:grid; grid-template-columns:minmax(320px,28%) minmax(0,1fr); gap:16px; flex:1; min-height:0; overflow:hidden; }
.cssV2-retail .invoice-pane, .cssV2-retail .browser-pane { display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; border:1px solid var(--cssV2-border); border-radius:var(--cssV2-radius-lg); background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-md); }
.cssV2-retail .invoice-header { position:relative; z-index:2; display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:64px; padding:12px 16px; background:var(--cssV2-gradient-primary); color:var(--cssV2-text-inverse); }
.cssV2-retail .invoice-menu-trigger { display:flex; align-items:center; gap:2px; min-width:42px; min-height:42px; padding:3px; border:0; background:transparent; color:inherit; cursor:pointer; }
.cssV2-retail .invoice-menu-trigger .bi-receipt { font-size:22px; }
.cssV2-retail .invoice-menu-trigger .bi-caret-down-fill { font-size:9px; }
.cssV2-retail .invoice-header-menu { position:absolute; top:calc(100% - 3px); left:12px; z-index:3; display:grid; min-width:230px; padding:6px; border:1px solid var(--cssV2-border); border-radius:10px; background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-md); color:var(--cssV2-text); }
.cssV2-retail .invoice-header-menu button { min-height:40px; padding:8px 10px; border:0; border-radius:6px; background:transparent; color:inherit; text-align:left; }
.cssV2-retail .invoice-header-menu button + button { border-top:1px solid var(--cssV2-divider); border-radius:0; }
.cssV2-retail .invoice-header-menu button:hover, .cssV2-retail .invoice-header-menu button:focus-visible { background:var(--cssV2-primary-bg); }
.cssV2-retail .invoice-header > i { font-size:22px; }
.cssV2-retail .invoice-heading { display:grid; gap:2px; flex:1; min-width:0; }
.cssV2-retail .invoice-heading h1 { margin:0; font-size:var(--cssV2-fs-section-title); font-weight:700; }
.cssV2-retail .invoice-heading > span { font-size:var(--cssV2-fs-caption); opacity:.9; }
.cssV2-retail .retail-badge { padding:6px 10px; border-radius:var(--cssV2-radius-full); background:color-mix(in srgb,var(--cssV2-text-inverse) 18%,transparent); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .invoice-body { display:flex; flex-direction:column; flex:1; min-height:0; }
.cssV2-retail .invoice-context { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; flex-shrink:0; padding:12px; border-bottom:1px solid var(--cssV2-divider); }
.cssV2-retail .invoice-context label { display:grid; gap:4px; min-width:0; margin:0; color:var(--cssV2-text-2); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .invoice-context select { min-width:0; width:100%; min-height:38px; padding:6px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-input); color:var(--cssV2-text); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .invoice-context .split-quantity { display:flex; align-items:center; gap:6px; min-height:38px; white-space:nowrap; }
.cssV2-retail .invoice-context .return-button { min-height:38px; padding:6px 10px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); font-size:var(--cssV2-fs-caption); font-weight:600; white-space:nowrap; }
.cssV2-retail .invoice-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; flex-shrink:0; border-bottom:1px solid var(--cssV2-divider); }
.cssV2-retail .summary-cell { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; min-height:40px; padding:8px 10px; border:0; border-radius:10px; background:var(--cssV2-bg-app); color:var(--cssV2-text); }
.cssV2-retail .summary-cell > span { font-size:calc(var(--cssV2-fs-caption) - 2px); font-weight:700; white-space:nowrap; }
.cssV2-retail .summary-cell b { font-size:var(--cssV2-fs-body-small); font-variant-numeric:tabular-nums; }
.cssV2-retail .summary-cell b i { font-size:12px; }
.cssV2-retail .summary-cell.adjustment { background:var(--cssV2-warning-bg); opacity:1; }
.cssV2-retail .summary-cell.total { grid-column:1 / -1; background:var(--cssV2-gradient-primary); color:var(--cssV2-text-inverse); }
.cssV2-retail .total b { font-size:var(--cssV2-fs-section-title); }
.cssV2-retail .invoice-lines, .cssV2-retail .panel-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:12px; }
.cssV2-retail .invoice-line { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; padding:9px 12px; border:1px solid var(--cssV2-border); border-radius:var(--cssV2-radius-md); background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-sm); }
.cssV2-retail .invoice-line.addon-line { margin-left:12px; }
.cssV2-retail .invoice-line.retail-selected { border-color:var(--cssV2-primary); outline:1px solid var(--cssV2-primary); outline-offset:-2px; }
.cssV2-retail .invoice-line { cursor:pointer; }
.cssV2-retail .line-actions { display:flex; align-items:center; gap:30px; margin-top:3px; margin-bottom:-5px; padding-top:4px; border-top:1px solid var(--cssV2-divider); }
.cssV2-retail .line-action { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; padding:0; border:0; border-radius:50%; color:var(--cssV2-text-inverse); font-size:18px; opacity:1; }
.cssV2-retail .line-delete { background:var(--cssV2-error); }
.cssV2-retail .line-note-button { background:#2E8B32; }
.cssV2-retail .line-action-spacer { flex:1; }
.cssV2-retail .line-menu-anchor { position:relative; display:flex; flex-shrink:0; }
.cssV2-retail .line-more { background:var(--cssV2-primary); border-radius:var(--cssV2-radius-sm); font-size:18px; }
.cssV2-retail .line-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:2; display:flex; flex-direction:column; width:180px; border:1px solid var(--cssV2-border); border-radius:var(--cssV2-radius-sm); padding:4px; background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-md); }
.cssV2-retail .invoice-line:not(:first-child):nth-last-child(-n+2) .line-menu { top:auto; bottom:calc(100% + 6px); }
.cssV2-retail .line-menu button { min-height:40px; padding:8px; border:0; border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); text-align:left; white-space:nowrap; }
.cssV2-retail .line-menu button + button { border-top:1px solid var(--cssV2-divider); border-radius:0; }
.cssV2-retail .line-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cssV2-retail .line-heading strong { min-width:0; overflow-wrap:anywhere; font-size:var(--cssV2-fs-body-small); }
.cssV2-retail .line-heading b { flex-shrink:0; color:var(--cssV2-primary); font-variant-numeric:tabular-nums; }
.cssV2-retail .line-details { display:flex; flex-wrap:wrap; gap:8px; font-size:var(--cssV2-fs-caption); color:var(--cssV2-text-2); font-variant-numeric:tabular-nums; }
.cssV2-retail .line-note { font-size:var(--cssV2-fs-caption); color:var(--cssV2-text-2); overflow-wrap:anywhere; }
.cssV2-retail .invoice-error { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; padding:10px 12px; background:var(--cssV2-warning-bg); color:var(--cssV2-text); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .invoice-error > span { min-width:0; overflow-wrap:anywhere; }
.cssV2-retail .invoice-error button { flex-shrink:0; min-height:38px; padding:6px 10px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); }
.cssV2-retail .order-notice { display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex-shrink:0; padding:8px 12px; border-bottom:1px solid var(--cssV2-divider); color:var(--cssV2-text-2); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .order-notice > span { flex-basis:100%; }
.cssV2-retail .order-notice.error { display:block; padding:4px 12px; color:var(--cssV2-error); font-size:11px; }
.cssV2-retail .order-notice.error > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cssV2-retail .order-notice button { min-height:38px; margin-top:4px; padding:6px 10px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); }
.cssV2-retail .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:100%; padding:24px 12px; text-align:center; color:var(--cssV2-text-2); }
.cssV2-retail .empty-state > i { font-size:36px; }
.cssV2-retail .empty-state > span { font-size:var(--cssV2-fs-caption); }
.cssV2-retail .browser-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-height:64px; padding:10px 14px; border-bottom:1px solid var(--cssV2-divider); flex-shrink:0; }
.cssV2-retail .view-switch { display:flex; flex-shrink:0; gap:2px; padding:3px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-full); background:var(--cssV2-bg-app); }
.cssV2-retail .view-switch button { min-height:38px; padding:8px 14px; border:0; border-radius:var(--cssV2-radius-full); background:transparent; color:var(--cssV2-text-2); font-weight:600; }
.cssV2-retail .view-switch .active { background:var(--cssV2-primary); color:var(--cssV2-text-inverse); }
.cssV2-retail .store-user { flex:1; min-width:0; margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; color:var(--cssV2-text-2); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .availability-notice, .cssV2-retail .session-notice { flex-shrink:0; padding:10px 14px; border-bottom:1px solid var(--cssV2-divider); color:var(--cssV2-text-2); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .availability-notice { background:var(--cssV2-warning-bg); color:var(--cssV2-text); }
.cssV2-retail .pos-loading { position:fixed; inset:0; z-index:1; display:grid; place-items:center; background:transparent; cursor:wait; touch-action:none; }
.cssV2-retail .loading-card { display:flex; flex-direction:column; align-items:center; gap:10px; max-width:calc(100% - 24px); padding:20px; border:1px solid var(--cssV2-border); border-radius:var(--cssV2-radius-md); background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-md); text-align:center; }
.cssV2-retail .pos-loading .loading-card { animation:retail-loading-appear .12s ease-out .18s both; }
@keyframes retail-loading-appear { from { opacity:0; } to { opacity:1; } }
.cssV2-retail .loading-spinner { width:32px; height:32px; border:3px solid var(--cssV2-border); border-top-color:var(--cssV2-primary); border-radius:50%; animation:retail-spin .8s linear infinite; }
@keyframes retail-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {.cssV2-retail .loading-spinner { animation:none; }
.cssV2-retail .pos-loading .loading-card { animation-duration:.001s; }
 }
.cssV2-retail .browser-panel { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.cssV2-retail .panel-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex-shrink:0; padding:10px 14px; border-bottom:1px solid var(--cssV2-divider); }
.cssV2-retail .search-box { display:flex; align-items:center; gap:8px; flex:1; min-width:180px; margin:0; padding:0 12px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-input); color:var(--cssV2-text-2); }
.cssV2-retail .camera-scan { display:grid; flex:none; place-items:center; width:44px; height:44px; border:0; border-radius:var(--cssV2-radius-sm); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); font-size:20px; }
.cssV2-retail .camera-scan:disabled { opacity:.55; }
.cssV2-retail .search-box input { min-width:0; width:100%; min-height:42px; border:0; padding:8px 0; background:transparent; color:var(--cssV2-text); }
.cssV2-retail .search-box:has(.search-clear) input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; display:none; }
.cssV2-retail .search-clear { display:inline-flex; flex:none; align-items:center; justify-content:center; width:32px; height:32px; margin-right:-6px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--cssV2-text); font-size:16px; }
.cssV2-retail .search-clear i { -webkit-text-stroke:1px currentColor; }
.cssV2-retail .search-clear:not(:disabled):active { background:var(--cssV2-bg-app); }
.cssV2-retail .search-clear:disabled { opacity:.5; }
.cssV2-retail .create-invoice { min-height:44px; padding:8px 12px; border:0; border-radius:var(--cssV2-radius-sm); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); font-weight:600; }
.cssV2-retail .filter-strip { display:flex; gap:8px; overflow-x:auto; flex-shrink:0; padding:10px 14px; border-bottom:1px solid var(--cssV2-divider); }
.cssV2-retail .filter-strip button { flex-shrink:0; min-height:44px; padding:8px 12px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .filter-strip button.active { border-color:var(--cssV2-primary); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); }
.cssV2-retail .list-count { flex-shrink:0; padding:6px 14px; color:var(--cssV2-text-2); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .load-error { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; padding:10px 14px; background:var(--cssV2-warning-bg); color:var(--cssV2-text); border-bottom:1px solid var(--cssV2-divider); }
.cssV2-retail .load-error > div { display:grid; gap:4px; min-width:0; }
.cssV2-retail .load-error span { font-size:var(--cssV2-fs-caption); overflow-wrap:anywhere; }
.cssV2-retail .load-error button { flex-shrink:0; min-height:44px; padding:8px 12px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); }
.cssV2-retail .invoice-grid { display:grid; grid-template-columns:repeat(auto-fill,205px); gap:10px; }
.cssV2-retail .invoice-grid > article { position:relative; display:flex; min-width:0; padding-left:0 !important; padding-right:0 !important; }
.cssV2-retail .product-pager { position:relative; display:flex; flex:1; min-height:0; min-width:0; padding:0 46px; }
.cssV2-retail .product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); grid-auto-rows:112px; align-content:start; gap:10px; }
.cssV2-retail .product-pager .product-grid { padding:12px 0; }
.cssV2-retail .product-grid > .empty-state { grid-column:1 / -1; grid-row:span 2; }
.cssV2-retail .product-page-arrow { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--cssV2-primary); color:var(--cssV2-text-inverse); font-size:22px; }
.cssV2-retail .product-page-arrow.previous { left:1px; }
.cssV2-retail .product-page-arrow.next { right:1px; }
.cssV2-retail .product-page-arrow:disabled { opacity:.4; }
.cssV2-retail .product-grid > article { display:flex; min-width:0; padding-left:0 !important; padding-right:0 !important; }
.cssV2-retail .invoice-card, .cssV2-retail .product-card { display:flex; flex-direction:column; gap:4px; min-width:0; padding:10px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); }
.cssV2-retail .invoice-card > span, .cssV2-retail .product-card > span { color:var(--cssV2-text-2); font-size:var(--cssV2-fs-caption); }
.cssV2-retail .invoice-card { width:100%; text-align:left; }
.cssV2-retail .invoice-card.has-delete > strong { padding-right:36px; }
.cssV2-retail .invoice-card-delete { position:absolute; top:2px; right:2px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:var(--cssV2-radius-sm); background:transparent; color:var(--cssV2-error); }
.cssV2-retail .invoice-card-delete > i::before { font-size:1.2em; -webkit-text-stroke:.5px currentColor; }
.cssV2-retail .invoice-card.retail-selected { border-color:var(--cssV2-primary); outline:2px solid var(--cssV2-primary); outline-offset:-2px; }
.cssV2-retail .invoice-customer, .cssV2-retail .product-code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cssV2-retail .invoice-card > strong, .cssV2-retail .product-card > strong { overflow-wrap:anywhere; }
.cssV2-retail .invoice-card > b, .cssV2-retail .product-card > b { margin-top:auto; padding-top:6px; color:var(--cssV2-primary); font-variant-numeric:tabular-nums; }
.cssV2-retail .invoice-card > b { border-top:1px solid var(--cssV2-divider); text-align:right; }
.cssV2-retail .product-card { width:100%; height:100%; min-height:0; overflow:hidden; text-align:left; }
.cssV2-retail .product-card.chosen { position:relative; }
.cssV2-retail .product-selected-check { position:absolute; top:2px; right:3px; color:#008000; font-size:30px; line-height:30px; pointer-events:none; }
.cssV2-retail .product-selected-check::before { -webkit-text-stroke:1.2px currentColor; }
.cssV2-retail .product-card > strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; flex-shrink:0; overflow:hidden; font-size:var(--cssV2-fs-caption); }
.cssV2-retail .product-card > span, .cssV2-retail .product-card > b { flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cssV2-retail .product-card { gap:2px; padding:8px 10px; line-height:1.3; }
.cssV2-retail .product-card > b { padding-top:0; }
.cssV2-retail .browser-footer { flex-shrink:0; padding:10px 12px; border-top:1px solid var(--cssV2-divider); }
.cssV2-retail .browser-footer button { min-height:44px; padding:8px 12px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); font-size:var(--cssV2-fs-caption); font-weight:600; }
.cssV2-retail .footer-buttons, .cssV2-retail .footer-tools, .cssV2-retail .sales-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.cssV2-retail .footer-buttons { justify-content:space-between; }
.cssV2-retail .sales-actions { margin-left:auto; justify-content:flex-end; }
.cssV2-retail .footer-menu { position:relative; }
.cssV2-retail .footer-dropdown { position:absolute; bottom:calc(100% + 6px); left:0; z-index:2; width:220px; max-height:min(360px,60vh); overflow-y:auto; padding:4px; border:1px solid var(--cssV2-border); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-md); }
.cssV2-retail .footer-dropdown button { display:block; width:100%; min-height:40px; padding:8px 10px; border:0; text-align:left; white-space:normal; }
.cssV2-retail .footer-dropdown button + button { border-top:1px solid var(--cssV2-divider); border-radius:0; }
.cssV2-retail .footer-dropdown button:disabled { color:var(--cssV2-text-hint); opacity:.65; cursor:not-allowed; }
.cssV2-retail .sales-actions .payment { border-color:var(--cssV2-primary); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); }
.cssV2-retail .sales-actions .sign-out { background:var(--cssV2-bg-card); border-color:var(--cssV2-border-strong); color:var(--cssV2-text); }
@media (max-width:1000px) {.cssV2-retail { padding-right:calc(10px + env(safe-area-inset-right)); padding-left:calc(10px + env(safe-area-inset-left)); }
.cssV2-retail .pos-retail-layout { grid-template-columns:310px minmax(0,1fr); gap:10px; }
.cssV2-retail .browser-toolbar, .cssV2-retail .panel-toolbar { padding:10px; }

}
@media (max-width:650px) {.cssV2-retail .pos-retail-layout { grid-template-columns:290px minmax(280px,1fr); overflow-x:auto; }

}
@media (max-height:650px) {.cssV2-retail .invoice-header { min-height:50px; padding:8px 12px; }
.cssV2-retail .invoice-summary, .cssV2-retail .invoice-context { padding:8px 12px; gap:6px; }
.cssV2-retail .summary-cell { min-height:34px; padding:6px 8px; }

}
.cssV2-retail .pos-update-card { display:flex; flex:none; align-items:center; gap:7px; max-width:100%; padding:5px 6px 5px 10px; border:1px solid var(--cssV2-border-strong); border-radius:var(--cssV2-radius-sm); background:var(--cssV2-bg-card); color:var(--cssV2-text); font-size:var(--cssV2-fs-caption); white-space:nowrap; }
.cssV2-retail .pos-update-card > i { color:var(--cssV2-primary); }
.cssV2-retail .pos-update-card button { min-height:30px; padding:4px 8px; border:0; border-radius:var(--cssV2-radius-sm); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); font-size:var(--cssV2-fs-caption); font-weight:600; }
.cssV2-retail .pos-update-card button:disabled { opacity:.5; cursor:not-allowed; }


/* Web navigation remains above the retail workspace. */
.cssV2-pos.cssV2-retail { height:auto; font-family:InterV2,Inter,"Segoe UI",sans-serif; }
.cssV2-retail .product-grid { width:100%; }
.cssV2-retail .pos-loading { z-index:20; }
.cssV2-retail .legacy-link { font-size:12px; color:var(--cssV2-primary); white-space:nowrap; }
.cssV2-retail label { font-weight:400; }
.cssV2-retail .invoice-lines, .cssV2-retail .panel-content, .cssV2-retail .filter-strip, .cssV2-retail .footer-dropdown { scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.cssV2-retail ::-webkit-scrollbar { width:5px; height:5px; }
.cssV2-retail ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; }
.cssV2-retail ::-webkit-scrollbar-track { background:transparent; }
.cssV2-retail .session-notice button { border:1px solid var(--cssV2-border); border-radius:8px; padding:8px; background:white; color:var(--cssV2-primary); }

.cssV2-retail .retail-customer { min-width:0; }
.cssV2-retail .retail-customer .cssV2-cp-toggle { min-height:38px; height:38px; padding:6px; font-size:12px; }
.cssV2-retail .retail-customer .cssV2-cp-value small { display:none; }

.cssV2-retail .cssV2-cp-panel { position:fixed; right:auto; }

.cssV2-retail .invoice-heading > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* The loading overlay blocks interaction without dimming the workspace controls. */
.cssV2-retail.retail-adding button:disabled,
.cssV2-retail.retail-adding input:disabled,
.cssV2-retail.retail-adding select:disabled { opacity:1; cursor:wait; }
.cssV2-retail.retail-adding .pos-loading { place-items:center; }
.cssV2-retail.retail-adding .loading-card { flex-direction:row; padding:10px 16px; gap:8px; animation:none; }
.cssV2-retail.retail-adding .loading-spinner { width:20px; height:20px; }

/* SaleReturn overlay: scoped POSWide layout, independent of sales invoice. */
.retail-refund { display: flex; flex-direction: column; height: var(--app-viewport-height, 100dvh); min-height: 0; overflow: hidden; background: var(--bg-app, #EEF1F6); color: var(--text-primary, #1B2230); }
.retail-refund .refund-underlay { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.retail-refund .refund-header { display: flex; flex-shrink: 0; align-items: center; gap: 12px; min-height: 64px; padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); background: #2563EB; color: #fff; }
.retail-refund .refund-header h1 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 20px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.retail-refund .refund-header-back { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; }
.retail-refund .refund-state { display: flex; flex-shrink: 0; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 18px; background: rgba(255, 255, 255, .16); font-size: 13px; white-space: nowrap; }
.retail-refund .refund-state-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.retail-refund .refund-state.saved .refund-state-dot { background: #5BD69A; }
.retail-refund .refund-state.editing .refund-state-dot { background: #F0C14A; }
.retail-refund .refund-state-no { opacity: .85; }
.retail-refund .refund-page { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.retail-refund .sales-refund { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 0; }
.retail-refund .sales-refund > p, .retail-refund .sales-refund > a { margin: 0; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.retail-refund .refund-fields { display: grid; flex-shrink: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; padding: 14px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--border, #E6E9EF); background: var(--bg-card, #fff); }
.retail-refund .refund-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.retail-refund .refund-fields label > span { color: var(--text-secondary, #4A5160); font-size: 12px; font-weight: 600; }
.retail-refund .refund-fields input, .retail-refund .refund-fields select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1.5px solid var(--border, #E1E6EF); border-radius: 10px; background: var(--bg-input, #fff); color: var(--text-primary, #1B2230); font-size: 14px; }
.retail-refund .refund-fields input:disabled, .retail-refund .refund-fields select:disabled, .retail-refund .refund-fields .refund-readonly { background: var(--hover, #F7F8FB); }
.retail-refund .refund-fields select.placeholder { color: var(--text-hint, #9AA1B0); }
.retail-refund .refund-fields label.invalid > span { color: var(--error, #D93B3B); }
.retail-refund .refund-fields label.invalid select { border-color: var(--error, #D93B3B); }
.retail-refund .refund-lines { display: flex; flex: 1; flex-direction: column; min-height: 260px; margin: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); overflow: hidden; border-radius: 16px; background: var(--bg-card, #fff); }
.retail-refund .refund-lines-head { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--divider, #EEF0F4); }
.retail-refund .refund-lines-head strong { flex: 1; font-size: 15px; }
.retail-refund .refund-add { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--primary, #2563EB); border-radius: 10px; background: var(--primary-bg, #EEF3FF); color: var(--primary, #2563EB); font-size: 14px; font-weight: 600; }
.retail-refund .refund-add:disabled { opacity: .6; }
.retail-refund .refund-table { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.retail-refund .refund-grid { display: grid; grid-template-columns: 36px minmax(160px, 1fr) 64px 100px 120px 70px 150px 110px 44px; align-items: center; gap: 10px; min-width: 900px; padding: 6px 16px; }
.retail-refund .refund-grid-head { position: sticky; top: 0; z-index: 1; padding-block: 10px; border-bottom: 1px solid var(--divider, #EEF0F4); background: var(--bg-card, #fff); color: var(--text-secondary, #6B7385); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.retail-refund .refund-row { min-height: 62px; border-bottom: 1px solid var(--divider, #F2F4F7); font-size: 14px; }
.retail-refund .refund-grid .number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.retail-refund .refund-grid .center { text-align: center; }
.retail-refund .refund-grid .muted, .retail-refund .refund-index { color: var(--text-secondary, #6B7385); }
.retail-refund .refund-index { font-size: 13px; }
.retail-refund .refund-row > strong.number { font-size: 15px; }
.retail-refund .refund-item { display: flex; flex-direction: column; min-width: 0; }
.retail-refund .refund-item strong, .retail-refund .refund-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retail-refund .refund-item strong { font-weight: 600; }
.retail-refund .refund-item small { color: var(--text-secondary, #6B7385); font-size: 12px; }
.retail-refund .refund-row input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1.5px solid var(--border, #E1E6EF); border-radius: 9px; background: var(--bg-input, #fff); color: var(--text-primary, #1B2230); font-size: 14px; text-align: right; }
.retail-refund .refund-row input:disabled { background: var(--hover, #F7F8FB); }
.retail-refund .refund-stepper { display: flex; align-items: center; justify-content: center; gap: 4px; }
.retail-refund .refund-stepper button { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--active, #F3F5FA); color: var(--text-primary, #1B2230); font-size: 18px; }
.retail-refund .refund-stepper button:disabled { color: var(--text-disabled, #C3C8D2); }
.retail-refund .refund-row .refund-stepper input { width: 52px; padding: 0 4px; border-color: transparent; background: transparent; font-size: 15px; font-weight: 700; text-align: center; }
.retail-refund .refund-row .refund-stepper input:focus { border-color: var(--primary, #2563EB); }
.retail-refund .refund-delete { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--error-bg, #FDEEEE); color: var(--error, #D93B3B); font-size: 14px; }
.retail-refund .refund-delete:disabled { opacity: .5; }
.retail-refund .refund-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 20px; text-align: center; }
.retail-refund .refund-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--primary-bg, #EEF3FF); color: var(--primary, #2563EB); font-size: 26px; }
.retail-refund .refund-empty strong { font-size: 17px; font-weight: 600; }
.retail-refund .refund-empty p { max-width: 360px; margin: 0; color: var(--text-secondary, #6B7385); font-size: 14px; }
.retail-refund .refund-empty .refund-button { min-height: 52px; padding: 0 24px; }
.retail-refund .refund-error { color: var(--error, #dc3545); }
.retail-refund .refund-status { color: var(--text-secondary, #667085); }
.retail-refund .refund-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px max(20px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.retail-refund .refund-total { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 220px; }
.retail-refund .refund-total span { color: var(--text-secondary, #6B7385); font-size: 14px; }
.retail-refund .refund-total strong { color: var(--error, #D93B3B); font-size: 26px; font-variant-numeric: tabular-nums; }
.retail-refund .refund-total small { color: var(--text-hint, #9AA1B0); font-size: 13px; }
.retail-refund .refund-button { min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.2; }
.retail-refund .refund-button.secondary { border: 1px solid color-mix(in srgb, var(--primary, #0a84ff) 30%, var(--bg-card, #fff)); background: color-mix(in srgb, var(--primary, #0a84ff) 10%, var(--bg-card, #fff)); color: var(--primary, #0a84ff); font-weight: 700; }
.retail-refund .refund-button.outline { border: 1.5px solid var(--border-strong, #DCE1EA); background: var(--bg-card, #fff); color: var(--text-primary, #1B2230); }
.retail-refund .refund-button.outline.primary-outline { border-color: var(--primary, #2563EB); color: var(--primary, #2563EB); }
.retail-refund .refund-button.primary { background: var(--primary, #0a84ff); color: var(--text-inverse, #fff); font-weight: 700; }
.retail-refund .refund-button.refund-save { padding: 0 32px; }
.retail-refund .refund-button:disabled { opacity: .6; }
.retail-refund .refund-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 700px) {
.retail-refund .refund-header { gap: 8px; }
.retail-refund .refund-header h1 { font-size: 17px; }
.retail-refund .refund-state-no { display: none; }
.retail-refund .refund-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.retail-refund .refund-lines { margin-inline: 12px; }
.retail-refund .refund-footer { padding-inline: 12px; }
.retail-refund .refund-actions { flex: 1 1 100%; }
.retail-refund .refund-actions > .refund-button { flex: 1 1 0; min-width: 0; padding: 0 10px; }
}
@media (max-width: 450px) { .retail-refund .refund-fields { grid-template-columns: 1fr; } }
.retail-refund .refund-picker { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 12px; }
.retail-refund .refund-picker-toolbar { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 10px; }
.retail-refund .refund-picker-search { display: flex; flex: 1 1 280px; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--primary); border-radius: 12px; background: var(--bg-input, var(--bg-card)); color: var(--primary); }
.retail-refund .refund-picker-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text-primary); font-size: 15px; }
.retail-refund .refund-picker-search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.retail-refund .refund-picker-periods { display: flex; padding: 4px; border-radius: 12px; background: var(--active, #F3F5FA); }
.retail-refund .refund-picker-periods button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.retail-refund .refund-picker-periods button.active { background: var(--bg-card); color: var(--primary); box-shadow: 0 1px 3px rgba(20, 30, 50, .15); }
.retail-refund .refund-picker-reload { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-app); color: var(--text-secondary); font-size: 16px; }
.retail-refund .refund-picker-table { --picker-columns: 52px minmax(160px, 1fr) 70px 140px 110px 80px; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -22px; border-top: 1px solid var(--divider, var(--border)); }
.retail-refund .refund-picker-columns, .retail-refund .refund-picker-row { display: grid; grid-template-columns: var(--picker-columns); align-items: center; gap: 10px; min-width: 700px; padding: 4px 24px; }
.retail-refund .refund-picker-columns { position: sticky; top: 0; z-index: 1; min-height: 40px; border-bottom: 1px solid var(--divider, var(--border)); background: var(--hover, #FAFBFD); color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.retail-refund .refund-picker-invoice { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 700px; min-height: 52px; padding: 4px 24px; border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--bg-card)); background: color-mix(in srgb, var(--primary) 6%, var(--bg-card)); }
.retail-refund .refund-picker-invoice-copy { min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.retail-refund .refund-picker-invoice-copy strong { color: var(--text-primary); font-size: 14px; }
.retail-refund .refund-picker-count { color: var(--text-secondary); font-size: 12px; }
.retail-refund .refund-picker-box { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid var(--border-strong, #C3CBDA); border-radius: 8px; background: var(--bg-card); color: var(--text-inverse, #fff); font-size: 14px; font-weight: 700; }
.retail-refund .refund-picker-box.on { border-color: var(--primary); background: var(--primary); }
.retail-refund .refund-picker-box:disabled { opacity: .5; }
.retail-refund .refund-picker-row { min-height: 56px; border-bottom: 1px solid var(--divider, var(--border)); background: var(--bg-card); color: var(--text-primary); cursor: pointer; }
.retail-refund .refund-picker-row:hover { background: var(--hover); }
.retail-refund .refund-picker-row.refund-picker-selected { background: color-mix(in srgb, var(--primary) 6%, var(--bg-card)); }
.retail-refund .refund-picker-row.added { opacity: .5; cursor: default; }
.retail-refund .refund-picker-check { width: 28px; height: 28px; margin: 0; accent-color: var(--primary); }
.retail-refund .refund-picker-copy { display: flex; flex-direction: column; min-width: 0; }
.retail-refund .refund-picker-copy strong, .retail-refund .refund-picker-copy small, .retail-refund .refund-picker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retail-refund .refund-picker-copy strong { font-size: 14px; font-weight: 600; }
.retail-refund .refund-picker-copy small { color: var(--text-secondary); font-size: 12px; }
.retail-refund .refund-picker-text { font-size: 13px; }
.retail-refund .refund-picker-row .number, .retail-refund .refund-picker-columns .number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.retail-refund .refund-picker-empty { padding: 60px 20px; color: var(--text-hint, var(--text-secondary)); font-size: 14px; text-align: center; }
.retail-refund .refund-picker-error { margin: 0; color: var(--error, #dc3545); }
.retail-refund .refund-picker p { flex-shrink: 0; margin: 0; }
.retail-refund .refund-picker-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.retail-refund .refund-picker-summary { flex: 1 1 220px; margin: 0; color: var(--text-secondary); font-size: 13px; }
.retail-refund .refund-picker-summary strong { color: var(--text-primary); }
.retail-refund .refund-picker-clear { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--error, #D93B3B); font-size: 14px; font-weight: 600; }
.retail-refund .refund-picker-footer .refund-button { min-width: 120px; min-height: 52px; border-radius: 14px; }
.retail-refund .refund-picker-footer .refund-button.secondary { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--bg-card)); background: color-mix(in srgb, var(--primary) 10%, var(--bg-card)); color: var(--primary); font-weight: 700; }
.retail-refund .refund-picker-footer .refund-button.primary { padding: 0 28px; background: var(--primary); color: var(--text-inverse); font-weight: 700; }
@media (max-width: 520px) {
.retail-refund .refund-picker-periods { flex: 1 1 auto; }
.retail-refund .refund-picker-periods button { flex: 1; }
.retail-refund .refund-picker-summary { flex-basis: 100%; }
.retail-refund .refund-picker-footer .refund-button { flex: 1; min-width: 0; padding: 0 8px; }
}
.cssV2-refund-window .modal-dialog { width:100%; max-width:none; margin:0; height:100vh; }
.cssV2-refund-window .modal-content { border:0; border-radius:0; height:100%; max-height:none; overflow:hidden; }
.retail-refund { position:relative; height:100vh; font-size:14px; --primary:#2563EB; --bg-card:#fff; --bg-app:#EEF1F6; --text-primary:#1B2230; --text-secondary:#6B7385; --border:#E1E6EF; --hover:#F7F8FB; --text-inverse:#fff; }
.retail-refund *, .retail-refund *::before, .retail-refund *::after { box-sizing:border-box; }
.retail-refund input, .retail-refund select, .retail-refund button { font-family:inherit; }
.retail-refund button { cursor:pointer; }
.retail-refund button:disabled { cursor:default; }
.retail-refund label { margin:0; font-weight:400; }
.retail-refund .refund-header { padding:10px 20px; }
.retail-refund .refund-actions { display:flex; gap:10px; }
.retail-refund .refund-status { padding:10px 20px; border:1px solid #32A36B; color:#238653; border-radius:10px; margin:0 20px; }
.retail-refund .refund-picker-backdrop { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(20,30,50,.4); }
.retail-refund .refund-picker-dialog { display:flex; flex-direction:column; width:min(1180px,100%); height:min(712px,calc(100vh - 36px)); max-height:100%; min-height:0; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 16px 50px #16213a33; }
.retail-refund .refund-picker-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; }
.retail-refund .refund-picker-header h2 { font-size:20px; margin:0; font-weight:700; }
.retail-refund .refund-picker-close { width:36px; height:36px; border:0; border-radius:50%; background:#EEF1F6; }
.retail-refund .refund-picker-toolbar { padding:0 24px 14px; }
.retail-refund .refund-picker-table { margin:0; }
.retail-refund .refund-picker-row input { width:24px; height:24px; margin:0; accent-color:#2563EB; }
.retail-refund .refund-picker-footer { padding:14px 24px; border-top:1px solid #E1E6EF; }
.retail-refund .refund-picker-footer p { flex:1; margin:0; color:#6B7385; font-size:13px; }
.retail-refund .refund-picker-footer small { display:block; font-size:11px; margin-top:3px; }
.retail-refund .refund-picker-dialog > .refund-error { padding:0 24px; }
.retail-refund .refund-loading { position:absolute; inset:64px 0 0; z-index:6; background:#ffffffb3; display:flex; align-items:center; justify-content:center; gap:12px; }
.retail-refund .refund-loading .loading-spinner { width:24px; height:24px; border:3px solid #c9d4ef; border-top-color:#2563EB; border-radius:50%; animation:retail-refund-spin .8s linear infinite; }
@keyframes retail-refund-spin { to { transform:rotate(360deg); } }
body:has(.cssV2-refund-window) #printJS-Modal { z-index:110013 !important; }
.retail-refund .refund-table::-webkit-scrollbar, .retail-refund .refund-picker-table::-webkit-scrollbar { width:6px; height:6px; }
.retail-refund .refund-table::-webkit-scrollbar-thumb, .retail-refund .refund-picker-table::-webkit-scrollbar-thumb { border-radius:6px; background:#cbd5e1; }
@media (max-width:700px) { .retail-refund .refund-picker-footer p { flex-basis:100%; } .retail-refund .refund-picker-footer .refund-button { min-width:0; } }
body:has(.cssV2-refund-window) #spinnerLoadingImg { display:none !important; }