/* EgyPrint POS — scoped under body.pos-cashier-active / .pos-cashier-root */

body.pos-cashier-active main.fi-main,
body.pos-cashier-active .fi-main-ctn {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.pos-cashier-active .fi-page,
body.pos-cashier-active .fi-page section {
    gap: 0 !important;
    padding: 0 !important;
}

body.pos-cashier-active .fi-header {
    display: none !important;
}

body.pos-cashier-active .fi-layout > main {
    padding: 0 !important;
}

body.pos-cashier-active .fi-topbar {
    padding-inline-start: 0.75rem !important;
}

html:not(.dark) body.pos-cashier-active .fi-main,
html:not(.dark) body.pos-cashier-active .fi-main-ctn,
html:not(.dark) body.pos-cashier-active .fi-page {
    background: rgb(var(--ep-canvas-bg-rgb, 246 247 249)) !important;
}

.dark body.pos-cashier-active .fi-main,
.dark body.pos-cashier-active .fi-main-ctn,
.dark body.pos-cashier-active .fi-page {
    background: rgb(var(--ep-canvas-bg-dark-rgb, 11 20 36)) !important;
}

@media (max-width: 1279px) {
    body.pos-cashier-active .fi-sidebar,
    body.pos-cashier-active .fi-sidebar-nav,
    body.pos-cashier-active nav.fi-sidebar-nav {
        display: none !important;
    }

    body.pos-cashier-active .fi-main-ctn {
        margin-inline-start: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

body.pos-cashier-active input[type="number"]::-webkit-outer-spin-button,
body.pos-cashier-active input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.pos-cashier-active input[type="number"] {
    -moz-appearance: textfield;
}

body.pos-cashier-active ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.pos-cashier-active ::-webkit-scrollbar-track {
    background: transparent;
}

body.pos-cashier-active ::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 8px;
}

body.pos-cashier-active ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.dark body.pos-cashier-active ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.dark body.pos-cashier-active ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

@media (prefers-reduced-motion: reduce) {
    .pos-cart-sidebar,
    .pos-cart-sidebar * {
        transition-duration: 0ms !important;
    }
}

@media (pointer: coarse) {
    .pos-cart-item button[class*="h-8"],
    .pos-cart-item-remove,
    .pos-cart-item-edit {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

.pos-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.375rem;
}

.pos-category-chips button {
    flex: 0 1 auto;
    min-width: 5rem;
    box-shadow: none !important;
}

.pos-workspace {
    min-height: calc(100dvh - 4rem - 4.5rem);
    height: calc(100dvh - 4rem - 4.5rem);
}

@media (min-width: 1280px) {
    .pos-workspace {
        min-height: 600px;
        height: calc(100vh - 6.5rem);
    }
}

@media (max-width: 1279px) {
    .pos-cart-sidebar {
        position: fixed !important;
        inset-inline: 0;
        bottom: 0;
        z-index: 50;
        height: min(88dvh, 900px);
        max-height: 88dvh;
        border-start-start-radius: 12px;
        border-start-end-radius: 12px;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
        visibility: hidden;
        pointer-events: none;
    }

    .pos-cart-sidebar.pos-cart-open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        pointer-events: auto;
    }

    body.pos-cashier-active.pos-cart-sheet-open {
        overflow: hidden;
    }

    .pos-products-pane {
        flex: 1 1 auto;
        min-height: 0;
    }
}

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
    gap: 0.625rem;
}

@media (min-width: 640px) {
    .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
        gap: 0.75rem;
    }
}

@media (min-width: 1280px) {
    .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(9.0625rem, 1fr));
        gap: 0.75rem;
    }
}

.pos-cart-sidebar {
    padding-inline-end: 0;
}

@media (min-width: 1280px) {
    .pos-cart-sidebar {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 24rem;
        min-width: 24rem;
        max-width: 24rem;
        padding-inline-end: 0.75rem;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

.pos-mobile-cart-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.pos-products-pane {
    padding-bottom: 5.5rem;
    position: relative;
}

@media (min-width: 1280px) {
    .pos-products-pane {
        padding-bottom: 0;
    }
}

.pos-search-field {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.25rem;
    border-radius: 10px;
    background: rgb(var(--ep-hover-bg-rgb, 248 249 251));
    box-shadow: inset 0 0 0 1px rgb(var(--ep-surface-border-rgb, 226 229 235));
}

.dark .pos-search-field {
    background: rgb(var(--ep-hover-bg-dark-rgb, 30 41 59));
    box-shadow: inset 0 0 0 1px rgb(var(--ep-surface-border-dark-rgb, 39 51 73));
}

.pos-search-field:focus-within {
    outline: 2px solid var(--ep-accent);
    outline-offset: 0;
}

.pos-search-field input {
    min-width: 0;
    flex: 1 1 auto;
    border: none;
    background: transparent;
    padding-block: 0.625rem;
    padding-inline: 0.5rem 0.75rem;
}

.pos-search-field input:focus {
    outline: none;
    box-shadow: none;
}

.pos-connection-status {
    position: absolute;
    z-index: 20;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    pointer-events: none;
}

@media (max-width: 1023px) {
    .pos-connection-status {
        bottom: 0.5rem;
    }
}

.pos-connection-wifi-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

.pos-connection-status.is-online .pos-connection-wifi {
    animation: pos-wifi-breathe 2.4s ease-in-out infinite;
}

.pos-connection-status.is-online .pos-connection-wifi-wrap::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    opacity: 0.35;
    animation: pos-connection-ring 2.4s ease-out infinite;
}

@keyframes pos-wifi-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

@keyframes pos-connection-ring {
    0% { transform: scale(0.8); opacity: 0.5; }
    75%, 100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pos-connection-status.is-online .pos-connection-wifi,
    .pos-connection-status.is-online .pos-connection-wifi-wrap::after {
        animation: none;
    }
}

.pos-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pos-toolbar-search {
    width: 100%;
    min-width: 0;
}

.pos-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 1280px) {
    .pos-toolbar {
        flex-direction: row;
        align-items: stretch;
        gap: 1rem;
    }

    .pos-toolbar-search {
        flex: 1 1 auto;
    }

    .pos-toolbar-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }
}

.pos-close-shift-btn {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.pos-close-shift-btn:hover {
    background-color: #ef4444 !important;
}

.pos-close-shift-btn:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

.pos-cart-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: none !important;
    border-color: rgb(var(--ep-surface-border-rgb, 226 229 235)) !important;
}

.dark .pos-cart-item {
    border-color: rgb(var(--ep-surface-border-dark-rgb, 39 51 73)) !important;
}

.pos-cart-item-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pos-cart-item-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.pos-cart-item .pos-cart-item-name {
    font-size: 0.8125rem;
    line-height: 1.4;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-cart-item-tag {
    display: inline-block;
    margin-inline-start: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #7c3aed;
    vertical-align: middle;
}

.dark .pos-cart-item-tag {
    color: #c4b5fd;
}

.pos-cart-item .pos-cart-item-desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-cart-item-measure {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 700;
    color: #92400e;
    background: #fffbeb;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: start;
    cursor: pointer;
}

.pos-cart-item-measure:hover {
    background: #fde68a;
}

.dark .pos-cart-item-measure {
    color: #fde68a;
    background: rgb(120 53 15 / 0.35);
}

.dark .pos-cart-item-measure:hover {
    background: rgb(120 53 15 / 0.55);
}

.pos-cart-item-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.pos-cart-item-price {
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.pos-cart-item-override {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #b45309;
}

.dark .pos-cart-item-override {
    color: #fbbf24;
}

.pos-cart-item-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

.pos-cart-item-amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.pos-cart-item-unit {
    font-size: 0.8125rem;
    line-height: 1.25;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.dark .pos-cart-item-unit {
    color: #94a3b8;
}

.pos-cart-item-total {
    font-size: 0.875rem;
    line-height: 1.25;
    font-weight: 800;
    color: var(--ep-accent, #ea580c);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pos-payment-method-btn {
    border: 1px solid rgb(var(--ep-surface-border-rgb, 226 229 235));
    background: rgb(var(--ep-surface-bg-rgb, 255 255 255));
    color: rgb(var(--ep-ink-rgb, 16 24 40));
}

.dark .pos-payment-method-btn {
    border-color: rgb(var(--ep-surface-border-dark-rgb, 39 51 73));
    background: rgb(var(--ep-surface-bg-dark-rgb, 17 28 47));
    color: rgb(var(--ep-ink-dark-rgb, 248 250 252));
}

.pos-payment-method-btn.is-selected {
    border-color: var(--ep-accent);
    background: var(--ep-accent);
    color: #fff;
}

.pos-payment-method-btn:focus-visible {
    outline: 2px solid var(--ep-accent);
    outline-offset: 2px;
}

.pos-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pos-cashier-root .pos-cart-sidebar {
    box-shadow: none !important;
    border-color: rgb(var(--ep-surface-border-rgb, 226 229 235)) !important;
    background: rgb(var(--ep-surface-bg-rgb, 255 255 255)) !important;
}

.dark .pos-cashier-root .pos-cart-sidebar {
    border-color: rgb(var(--ep-surface-border-dark-rgb, 39 51 73)) !important;
    background: rgb(var(--ep-surface-bg-dark-rgb, 17 28 47)) !important;
}

.pos-cashier-root .tabular-nums,
.pos-cashier-root [class*="text-2xl"],
.pos-cashier-root [class*="text-lg"].font-black {
    font-variant-numeric: tabular-nums;
}

.pos-cashier-root button.bg-primary-600.shadow-lg {
    box-shadow: none !important;
}

/* Modals */
.pos-cashier-root .pos-modal label {
    color: rgb(var(--ep-muted-text-rgb, 71 84 103)) !important;
}

.pos-cashier-root .pos-modal h3 {
    color: rgb(var(--ep-ink-rgb, 16 24 40)) !important;
}

.pos-cashier-root .pos-modal input,
.pos-cashier-root .pos-modal textarea {
    color: rgb(var(--ep-ink-rgb, 16 24 40)) !important;
    background-color: rgb(var(--ep-hover-bg-rgb, 248 249 251)) !important;
    -webkit-text-fill-color: rgb(var(--ep-ink-rgb, 16 24 40)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--ep-surface-border-rgb, 226 229 235)) !important;
}

.pos-cashier-root .pos-modal input::placeholder,
.pos-cashier-root .pos-modal textarea::placeholder {
    color: rgb(var(--ep-muted-text-rgb, 71 84 103)) !important;
}

.pos-cashier-root .pos-modal .pos-modal-header,
.pos-cashier-root .pos-modal .pos-modal-footer {
    background-color: rgb(var(--ep-hover-bg-rgb, 248 249 251)) !important;
    border-color: rgb(var(--ep-surface-border-rgb, 226 229 235)) !important;
}

.pos-cashier-root .pos-modal .pos-modal-btn-cancel {
    background-color: rgb(var(--ep-surface-bg-rgb, 255 255 255)) !important;
    color: rgb(var(--ep-ink-rgb, 16 24 40)) !important;
    border: 1px solid rgb(var(--ep-surface-border-rgb, 226 229 235)) !important;
}

.dark .pos-cashier-root .pos-modal {
    background-color: rgb(var(--ep-surface-bg-dark-rgb, 17 28 47)) !important;
}

.dark .pos-cashier-root .pos-modal label {
    color: rgb(var(--ep-muted-text-dark-rgb, 185 195 211)) !important;
}

.dark .pos-cashier-root .pos-modal h3 {
    color: rgb(var(--ep-ink-dark-rgb, 248 250 252)) !important;
}

.dark .pos-cashier-root .pos-modal input,
.dark .pos-cashier-root .pos-modal textarea {
    color: rgb(var(--ep-ink-dark-rgb, 248 250 252)) !important;
    background-color: rgb(var(--ep-hover-bg-dark-rgb, 30 41 59)) !important;
    -webkit-text-fill-color: rgb(var(--ep-ink-dark-rgb, 248 250 252)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--ep-surface-border-dark-rgb, 39 51 73)) !important;
}

.dark .pos-cashier-root .pos-modal input::placeholder,
.dark .pos-cashier-root .pos-modal textarea::placeholder {
    color: rgb(var(--ep-muted-text-dark-rgb, 185 195 211)) !important;
}

.dark .pos-cashier-root .pos-modal .pos-modal-header,
.dark .pos-cashier-root .pos-modal .pos-modal-footer {
    background-color: rgb(var(--ep-hover-bg-dark-rgb, 30 41 59)) !important;
    border-color: rgb(var(--ep-surface-border-dark-rgb, 39 51 73)) !important;
}

.dark .pos-cashier-root .pos-modal .pos-modal-btn-cancel {
    background-color: rgb(var(--ep-surface-bg-dark-rgb, 17 28 47)) !important;
    color: rgb(var(--ep-ink-dark-rgb, 248 250 252)) !important;
    border-color: rgb(var(--ep-surface-border-dark-rgb, 39 51 73)) !important;
}

/* Close-shift panel */
.pos-cashier-root .pos-modal .pos-shift-panel {
    background-color: var(--pos-hover) !important;
    border: 1px solid var(--pos-border) !important;
}

.pos-cashier-root .pos-modal .pos-shift-panel-title {
    color: var(--pos-muted) !important;
}

.pos-cashier-root .pos-modal .pos-shift-label,
.pos-cashier-root .pos-modal label.pos-shift-label,
.dark .pos-cashier-root .pos-modal label.pos-shift-label {
    color: var(--pos-ink) !important;
}

.pos-cashier-root .pos-modal .pos-shift-row-muted {
    color: var(--pos-ink) !important;
}

.pos-cashier-root .pos-modal .pos-shift-row-strong {
    color: var(--pos-ink) !important;
    font-variant-numeric: tabular-nums;
}

.pos-cashier-root .pos-modal .pos-shift-divider {
    border-color: var(--pos-border) !important;
}

.pos-cashier-root .pos-modal input.pos-shift-input,
.pos-cashier-root .pos-modal textarea.pos-shift-input,
.pos-cashier-root .pos-modal select.pos-shift-input {
    color-scheme: light;
    color: var(--pos-ink) !important;
    background-color: var(--pos-surface) !important;
    -webkit-text-fill-color: var(--pos-ink) !important;
    box-shadow: inset 0 0 0 1px var(--pos-border) !important;
}

.dark .pos-cashier-root .pos-modal .pos-shift-input {
    color-scheme: dark;
}

.pos-cashier-root .pos-modal input.pos-shift-input:focus,
.pos-cashier-root .pos-modal textarea.pos-shift-input:focus,
.pos-cashier-root .pos-modal select.pos-shift-input:focus {
    box-shadow: inset 0 0 0 1px var(--pos-border), 0 0 0 2px rgb(var(--ep-accent-rgb, 234 88 12) / 0.45) !important;
}

.pos-cash-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    color: #92400e;
    background: #fffbeb;
}

.dark .pos-cash-badge {
    color: #fde68a;
    background: rgb(120 53 15 / 0.4);
}

.pos-held-sales {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgb(var(--ep-surface-border-rgb, 226 229 235));
    background: rgb(var(--ep-hover-bg-rgb, 248 249 251));
}

.dark .pos-held-sales {
    border-bottom-color: rgb(var(--ep-surface-border-dark-rgb, 39 51 73));
    background: rgb(var(--ep-hover-bg-dark-rgb, 30 41 59) / 0.45);
}

.pos-held-sale {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
}

.pos-held-sale-resume {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    text-align: start;
    cursor: pointer;
    background: rgb(var(--ep-surface-bg-rgb, 255 255 255));
    box-shadow: inset 0 0 0 1px rgb(var(--ep-surface-border-rgb, 226 229 235));
}

.dark .pos-held-sale-resume {
    background: rgb(var(--ep-surface-bg-dark-rgb, 17 28 47));
    box-shadow: inset 0 0 0 1px rgb(var(--ep-surface-border-dark-rgb, 39 51 73));
}

.pos-held-sale-resume:hover {
    box-shadow: inset 0 0 0 1px rgb(var(--ep-accent-rgb, 234 88 12) / 0.45);
}

.pos-held-sale-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(var(--ep-ink-rgb, 16 24 40));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .pos-held-sale-name {
    color: rgb(var(--ep-ink-dark-rgb, 248 250 252));
}

.pos-held-sale-meta {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.dark .pos-held-sale-meta {
    color: #94a3b8;
}

.pos-held-sale-discard {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    color: #94a3b8;
    background: transparent;
}

.pos-held-sale-discard:hover {
    color: #dc2626;
    background: rgb(254 226 226 / 0.7);
}

/* Modals never grow past the screen: header and footer stay put, the body scrolls. */
.pos-cashier-root .pos-modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
}

.pos-cashier-root .pos-modal > .pos-modal-header,
.pos-cashier-root .pos-modal > .pos-modal-footer {
    flex-shrink: 0;
}

.pos-cashier-root .pos-modal > :not(.pos-modal-header):not(.pos-modal-footer) {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Customer's recent jobs: one tap repeats the line at today's prices. */
.pos-cashier-root .pos-recent-lines {
    display: grid;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.pos-cashier-root .pos-recent-lines__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(107 114 128);
}

.pos-cashier-root .pos-recent-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px dashed rgb(var(--ep-accent-rgb, 234 88 12) / 0.45);
    background: rgb(var(--ep-accent-rgb, 234 88 12) / 0.06);
    color: rgb(var(--ep-accent-rgb, 234 88 12));
    text-align: start;
}

.pos-cashier-root .pos-recent-line:hover {
    background: rgb(var(--ep-accent-rgb, 234 88 12) / 0.12);
}

.pos-cashier-root .pos-recent-line__name {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: rgb(17 24 39);
}

.pos-cashier-root .pos-recent-line__meta {
    display: block;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

.dark .pos-cashier-root .pos-recent-line__name {
    color: rgb(243 244 246);
}

.dark .pos-cashier-root .pos-recent-lines__title,
.dark .pos-cashier-root .pos-recent-line__meta {
    color: rgb(156 163 175);
}

/* ===================================================================
   Odoo-style register: full screen, its own navbar, order pad with a
   numpad, payment and receipt screens. Mirrored for Arabic: the order
   is on the right, the products on the left.
   =================================================================== */

.pos-cashier-root {
    --pos-surface: rgb(var(--ep-surface-bg-rgb, 255 255 255));
    --pos-canvas: rgb(var(--ep-canvas-bg-rgb, 246 247 249));
    --pos-hover: rgb(var(--ep-hover-bg-rgb, 248 249 251));
    --pos-border: rgb(var(--ep-surface-border-rgb, 226 229 235));
    --pos-ink: rgb(var(--ep-ink-rgb, 16 24 40));
    --pos-muted: rgb(var(--ep-muted-text-rgb, 71 84 103));
    --pos-accent: var(--ep-accent, #ea580c);
    --pos-accent-rgb: var(--ep-accent-rgb, 234 88 12);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    background: var(--pos-canvas);
}

/* The POS back office (dashboard, products) uses the same tokens outside the cashier. */
.pos-backoffice {
    --pos-surface: rgb(var(--ep-surface-bg-rgb, 255 255 255));
    --pos-canvas: rgb(var(--ep-canvas-bg-rgb, 246 247 249));
    --pos-hover: rgb(var(--ep-hover-bg-rgb, 248 249 251));
    --pos-border: rgb(var(--ep-surface-border-rgb, 226 229 235));
    --pos-ink: rgb(var(--ep-ink-rgb, 16 24 40));
    --pos-muted: rgb(var(--ep-muted-text-rgb, 71 84 103));
    --pos-accent: var(--ep-accent, #ea580c);
    --pos-accent-rgb: var(--ep-accent-rgb, 234 88 12);
}

.dark .pos-backoffice {
    --pos-surface: rgb(var(--ep-surface-bg-dark-rgb, 17 28 47));
    --pos-canvas: rgb(var(--ep-canvas-bg-dark-rgb, 11 20 36));
    --pos-hover: rgb(var(--ep-hover-bg-dark-rgb, 30 41 59));
    --pos-border: rgb(var(--ep-surface-border-dark-rgb, 39 51 73));
    --pos-ink: rgb(var(--ep-ink-dark-rgb, 248 250 252));
    --pos-muted: rgb(var(--ep-muted-text-dark-rgb, 185 195 211));
}

/* Odoo's Point of Sale menu bar */
.pos-app-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.75rem;
    background: var(--pos-surface);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-app-nav-title {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-inline-end: 0.5rem;
    padding: 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 900;
    color: var(--pos-accent);
}

.pos-app-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pos-ink);
}

.pos-app-nav-item:hover {
    background: var(--pos-hover);
}

.pos-app-nav-item.is-active {
    color: var(--pos-accent);
    background: rgb(var(--pos-accent-rgb) / 0.1);
}

.pos-app-nav-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    inset-inline-start: 0;
    z-index: 30;
    min-width: 13rem;
    padding: 0.375rem;
    border-radius: 0.75rem;
    background: var(--pos-surface);
    box-shadow: 0 0 0 1px var(--pos-border), 0 3px 8px rgb(0 0 0 / 0.14);
}

.pos-app-nav-menu-item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pos-ink);
}

.pos-app-nav-menu-item:hover {
    background: var(--pos-hover);
}

/* Dashboard: one card per point of sale */
.pos-dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.pos-dash-summary {
    font-size: 0.8125rem;
    color: var(--pos-muted);
}

.pos-backoffice :is(button, a, input, select):focus-visible {
    outline: 2px solid var(--pos-accent);
    outline-offset: 3px;
}

.pos-backoffice .pos-ticket-status {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--pos-muted);
    background: var(--pos-hover);
}

.pos-backoffice .pos-ticket-status.is-success {
    color: #166534;
    background: #dcfce7;
}

.dark .pos-backoffice .pos-ticket-status.is-success {
    color: #bbf7d0;
    background: #14532d;
}

.pos-dash-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--pos-ink);
}

.pos-dash-new {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: #fff;
    background: var(--pos-accent);
}

.pos-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 1rem;
}

.pos-dash-card {
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--pos-surface);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-dash-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pos-dash-card-name {
    font-size: 1.0625rem;
    font-weight: 900;
    color: var(--pos-ink);
}

.pos-dash-card-sub {
    font-size: 0.8125rem;
    color: var(--pos-muted);
}

.pos-dash-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: var(--pos-muted);
}

.pos-dash-dots:hover {
    background: var(--pos-hover);
}

.pos-dash-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.pos-dash-menu-title {
    padding: 0.375rem 0.75rem 0.125rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--pos-muted);
}

.pos-dash-card-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.pos-dash-btn {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 1.125rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: #fff;
    background: var(--pos-accent);
    white-space: nowrap;
}

.pos-dash-btn.is-secondary {
    color: var(--pos-ink);
    background: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-dash-facts {
    display: grid;
    gap: 0.125rem;
    min-width: 12rem;
    font-size: 0.8125rem;
}

.pos-dash-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.pos-dash-facts dt {
    color: var(--pos-muted);
}

.pos-dash-facts dd {
    font-weight: 800;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

/* Register workspace: compact operational cards, with reports progressively disclosed. */
.pos-app-nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.pos-app-nav-mobile { display: none; }
.pos-dashboard { display: grid; gap: 1rem; color: var(--pos-ink); }
.pos-workspace-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.pos-workspace-heading .pos-dash-summary { margin-top: 0.25rem; }
.pos-workspace-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pos-dashboard .pos-dash-btn { gap: 0.5rem; min-height: 2.5rem; }
.pos-dashboard .pos-dash-btn:hover, .pos-dashboard .pos-dash-new:hover { filter: brightness(0.94); }
.pos-ledger-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--pos-surface); border-radius: 0.75rem; box-shadow: inset 0 0 0 1px var(--pos-border); }
.pos-ledger-strip > div { min-width: 0; padding: 0.875rem 1.25rem; }
.pos-ledger-strip > div + div { border-inline-start: 1px solid var(--pos-border); }
.pos-ledger-strip dt { font-size: 0.8125rem; color: var(--pos-muted); }
.pos-ledger-strip dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem; }
.pos-ledger-strip dd strong { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pos-ledger-strip dd > span { font-size: 0.8125rem; color: var(--pos-muted); }
.pos-register-workspace { display: grid; gap: 0.875rem; }
.pos-register-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.pos-register-filters { display: flex; align-items: center; gap: 0.25rem; }
.pos-register-filters button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--pos-muted); border-radius: 0.5rem; }
.pos-register-filters button span { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pos-register-filters button:hover { background: var(--pos-hover); }
.pos-register-filters button.is-active { background: var(--pos-surface); color: var(--pos-ink); box-shadow: inset 0 0 0 1px var(--pos-border); font-weight: 800; }
.pos-register-search { display: flex; align-items: center; gap: 0.5rem; width: 19rem; max-width: 100%; padding-inline: 0.75rem; color: var(--pos-muted); background: var(--pos-surface); border-radius: 0.5rem; box-shadow: inset 0 0 0 1px var(--pos-border); }
.pos-register-search input { min-width: 0; width: 100%; height: 2.75rem; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--pos-ink); font: inherit; font-size: 0.8125rem; }
.pos-register-search input::placeholder { color: var(--pos-muted); }
.pos-register-search:focus-within { outline: 2px solid var(--pos-accent); outline-offset: 2px; }
.pos-register-search input:focus-visible { outline: none; }
.pos-dashboard .pos-dash-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.pos-dashboard .pos-register-card { min-width: 0; padding: 0; }
.pos-register-card .pos-dash-card-head { align-items: center; flex-wrap: nowrap; padding: 0.875rem 1rem 0.375rem; }
.pos-register-identity { flex: 1; min-width: 0; }
.pos-register-identity h2 { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.pos-register-card .pos-dash-card-sub { margin-top: 0.125rem; }
.pos-register-menu { flex-shrink: 0; align-self: flex-start; }
.pos-register-card .pos-dash-dots { width: 2.75rem; height: 2.75rem; }
.pos-register-session { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0 1rem 0.875rem; font-size: 0.8125rem; color: var(--pos-muted); }
.pos-register-session .pos-ticket-status { font-size: 0.8125rem; line-height: 1.6; padding: 0.125rem 0.5rem; }
.pos-register-totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 0.75rem 1rem; border-block: 1px solid var(--pos-border); }
.pos-register-totals > div { min-width: 0; }
.pos-register-totals dt { font-size: 0.8125rem; color: var(--pos-muted); }
.pos-register-totals dd { margin-top: 0.25rem; font-size: 1.1875rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pos-register-totals small { font-size: 0.8125rem; font-weight: 400; color: var(--pos-muted); }
.pos-register-details { display: grid; gap: 0.25rem; padding: 0.75rem 1rem; font-size: 0.8125rem; }
.pos-register-details > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.pos-register-details dt { color: var(--pos-muted); }
.pos-register-details dd { font-variant-numeric: tabular-nums; }
.pos-register-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.875rem 1rem; }
.pos-register-report { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.25rem 0.375rem; color: var(--pos-accent); font-size: 0.8125rem; font-weight: 700; }
.pos-register-report:hover { text-decoration: underline; text-underline-offset: 0.25rem; }
.pos-register-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 0.75rem; padding: 2rem 1rem; text-align: center; background: var(--pos-surface); border-radius: 0.75rem; }
.pos-register-empty h2 { font-weight: 700; font-size: 1rem; }
.pos-register-empty p { max-width: 42ch; color: var(--pos-muted); font-size: 0.8125rem; }
.pos-report-workspace { min-width: 0; background: var(--pos-surface); box-shadow: inset 0 0 0 1px var(--pos-border); border-radius: 0.75rem; }
.pos-report-tabs { display: flex; gap: 0.25rem; padding: 0.375rem 0.75rem 0; border-bottom: 1px solid var(--pos-border); }
.pos-report-tabs button { min-height: 2.75rem; padding: 0.5rem 0.875rem; border-bottom: 2px solid transparent; color: var(--pos-muted); font-size: 0.8125rem; font-weight: 700; }
.pos-report-tabs button:hover { background: var(--pos-hover); }
.pos-report-tabs button.is-active { color: var(--pos-accent); border-bottom-color: var(--pos-accent); }
.pos-report-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); }
.pos-report-chart, .pos-report-methods { min-width: 0; padding: 1rem 1.25rem; }
.pos-report-methods { border-inline-start: 1px solid var(--pos-border); }
.pos-report-section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.pos-report-section-heading h2 { font-size: 0.875rem; font-weight: 700; }
.pos-report-section-heading > span { color: var(--pos-muted); font-size: 0.8125rem; }
.pos-hour-chart { display: flex; gap: 0.25rem; margin-top: 0.75rem; list-style: none; }
.pos-hour-chart > li { position: relative; flex: 1; min-width: 0; text-align: center; }
.pos-hour-chart > li:focus-visible { outline: 2px solid var(--pos-accent); outline-offset: 2px; }
.pos-hour-tooltip { position: absolute; z-index: 2; bottom: 1.5rem; left: 50%; transform: translateX(-50%); padding: 0.375rem 0.5rem; border-radius: 0.375rem; background: var(--pos-surface); border: 1px solid var(--pos-border); font-size: 0.8125rem; white-space: nowrap; opacity: 0; pointer-events: none; }
.pos-hour-chart > li:is(:hover, :focus) .pos-hour-tooltip { opacity: 1; }
.pos-hour-chart > li:first-child .pos-hour-tooltip { left: 0; transform: none; }
.pos-hour-chart > li:last-child .pos-hour-tooltip { left: auto; right: 0; transform: none; }
.pos-dashboard .pos-dash-menu { position: fixed; inset-inline: auto; max-height: calc(100dvh - 2rem); overflow-y: auto; }
.pos-hour-track { position: relative; height: 9rem; }
.pos-hour-track::before { content: ''; position: absolute; bottom: 0; left: -0.125rem; right: -0.125rem; height: 1px; background: var(--pos-border); }
.pos-hour-chart.has-returns .pos-hour-track::before { top: 50%; bottom: auto; }
.pos-hour-bar { position: absolute; inset-inline: 15%; min-height: 0; border-radius: 0.1875rem; background: var(--pos-accent); }
.pos-hour-bar.is-negative { background: #dc2626; }
.pos-hour-label { color: var(--pos-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pos-chart-private { display: none; padding: 4rem 0; color: var(--pos-muted); font-size: 0.8125rem; text-align: center; }
.ep-hide-amounts .pos-hour-chart { display: none; }
.ep-hide-amounts .pos-chart-private { display: block; }
.pos-report-note { margin-top: 0.75rem; color: var(--pos-muted); font-size: 0.8125rem; line-height: 1.8; }
.pos-method-list { margin-top: 0.5rem; }
.pos-method-list > div:not(.pos-report-empty) { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 0.75rem; }
.pos-method-list > div + div { border-top: 1px solid var(--pos-border); }
.pos-method-list dt { font-size: 0.8125rem; }
.pos-method-list dt small { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--pos-muted); }
.pos-method-list dd { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.pos-method-list dd small { font-size: 0.8125rem; color: var(--pos-muted); }
.pos-report-empty { min-height: 11rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; color: var(--pos-muted); font-size: 0.8125rem; }
.pos-report-empty > span { font-size: 0.8125rem; }
.pos-report-table-heading { padding: 1rem 1.25rem; }
.pos-report-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: start; font-size: 0.8125rem; }
.pos-report-table th, .pos-report-table td { padding: 0.75rem 1.25rem; border-top: 1px solid var(--pos-border); overflow-wrap: anywhere; }
.pos-report-table thead { background: var(--pos-hover); font-size: 0.8125rem; color: var(--pos-muted); }
.pos-report-table thead th:first-child { width: 54%; }
.pos-report-table tbody th { font-weight: 500; }
.pos-report-table .is-numeric { text-align: end; font-variant-numeric: tabular-nums; }
.pos-report-table small { font-size: 0.8125rem; color: var(--pos-muted); white-space: nowrap; }
.pos-report-workspace > [role=tabpanel] > .pos-report-note { margin: 0; padding: 0.875rem 1.25rem; border-top: 1px solid var(--pos-border); }
.pos-closed-shifts { padding: 0 1.25rem 0.5rem; }
.pos-closed-shift { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--pos-border); }
.pos-closed-shift h3 { font-size: 0.8125rem; font-weight: 700; overflow-wrap: anywhere; }
.pos-closed-shift h3 span { color: var(--pos-muted); font-weight: 400; }
.pos-closed-shift p { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--pos-muted); }
.pos-close-difference { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pos-dashboard .is-short { color: #b91c1c; }
.pos-dashboard .is-over { color: #166534; }
.dark .pos-dashboard .is-short { color: #fca5a5; }
.dark .pos-dashboard .is-over { color: #86efac; }
@media (max-width: 767px) {
    .pos-ledger-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pos-ledger-strip > div { padding: 0.625rem 0.875rem; }
    .pos-ledger-strip > div:nth-child(3) { border-inline-start: none; }
    .pos-ledger-strip > div:nth-child(n+3) { border-top: 1px solid var(--pos-border); }
    .pos-report-overview { grid-template-columns: minmax(0, 1fr); }
    .pos-report-methods { border-inline-start: none; border-top: 1px solid var(--pos-border); }
    .pos-report-chart, .pos-report-methods { padding: 0.875rem 1rem; }
}
@media (max-width: 639px) {
    .pos-app-nav-compact { position: relative; flex-wrap: nowrap; justify-content: space-between; }
    .pos-app-nav-mobile { display: inline-flex; gap: 0.5rem; align-items: center; justify-content: center; min-height: 2.75rem; padding-inline: 0.75rem; font-size: 0.8125rem; font-weight: 700; color: var(--pos-ink); }
    .pos-app-nav-compact .pos-app-nav-links { display: none; }
    .pos-app-nav-compact .pos-app-nav-links.is-expanded { position: absolute; top: calc(100% + 0.375rem); inset-inline: 0; z-index: 40; display: flex; flex-direction: column; align-items: stretch; padding: 0.5rem; background: var(--pos-surface); border-radius: 0.75rem; box-shadow: 0 4px 12px rgb(0 0 0 / 0.14); }
    .pos-app-nav-compact .pos-app-nav-item { min-height: 2.75rem; height: auto; width: 100%; justify-content: space-between; }
    .pos-app-nav-compact .pos-app-nav-menu { position: static; width: 100%; max-width: 100%; box-shadow: none; padding-inline-start: 0.75rem; }
    .pos-workspace-heading { gap: 0.5rem; }
    .pos-workspace-actions { width: 100%; }
    .pos-workspace-actions > a { flex: 1; justify-content: center; }
    .pos-register-toolbar { gap: 0.375rem; }
    .pos-register-search { width: 100%; }
    .pos-register-filters { flex: 1; }
    .pos-register-filters button { flex: 1; }
    .pos-report-tabs { padding-inline: 0.375rem; }
    .pos-report-tabs button { flex: 1; padding-inline: 0.375rem; font-size: 0.8125rem; }
    .pos-report-table th, .pos-report-table td { padding: 0.75rem 0.625rem; }
    .pos-report-table thead th:first-child { width: 46%; }
    .pos-report-table-heading { padding-inline: 1rem; }
    .pos-closed-shifts { padding-inline: 1rem; }
    .pos-closed-shift { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; }
    .pos-closed-shift .pos-register-report { grid-column: 2; grid-row: 1 / 3; }
    .pos-close-difference { grid-column: 1; }
}

/* Products: Odoo's kanban of products */
.pos-prod-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.pos-prod-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.pos-prod-filter {
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pos-ink);
    background: var(--pos-surface);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-prod-filter.is-active {
    color: #fff;
    background: var(--pos-accent);
    box-shadow: none;
}

.pos-prod-views {
    display: flex;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-prod-views button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.25rem;
    color: var(--pos-muted);
    background: var(--pos-surface);
}

.pos-prod-views button.is-active {
    color: var(--pos-accent);
    background: rgb(var(--pos-accent-rgb) / 0.1);
}

.pos-prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 0.75rem;
}

.pos-prod-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    background: var(--pos-surface);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-prod-card:hover {
    box-shadow: inset 0 0 0 2px rgb(var(--pos-accent-rgb) / 0.5);
}

.pos-prod-card.is-hidden {
    background: var(--pos-hover);
}

.pos-prod-edit {
    text-align: start;
}

.pos-prod-edit::after {
    position: absolute;
    inset: 0;
    border-radius: 0.625rem;
    content: '';
}

.pos-prod-card .pos-prod-toggle {
    z-index: 1;
}

.pos-prod-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border-radius: 0.5rem;
    color: var(--pos-muted);
    background: var(--pos-hover);
}

.pos-prod-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-prod-name {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--pos-ink);
    overflow-wrap: anywhere;
}

.pos-prod-sub {
    font-size: 0.8125rem;
    color: var(--pos-muted);
}

.pos-prod-price {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

/* «Available in POS» switch */
.pos-prod-toggle {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--pos-border);
    transition: background 0.15s;
}

.pos-prod-toggle span {
    position: absolute;
    top: 0.125rem;
    inset-inline-start: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
    transition: inset-inline-start 0.15s;
}

.pos-prod-toggle.is-on {
    background: #16a34a;
}

.pos-prod-toggle.is-on span {
    inset-inline-start: 1.125rem;
}

@media (max-width: 639px) {
    .pos-dash-card-body {
        flex-direction: column;
        align-items: stretch;
    }

    .pos-dash-facts {
        min-width: 0;
    }

    .pos-dash-card-head {
        flex-wrap: wrap;
    }

    .pos-dash-card-name {
        overflow-wrap: anywhere;
    }

    .pos-app-nav-menu {
        min-width: min(13rem, calc(100vw - 4rem));
        max-width: calc(100vw - 4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pos-backoffice *,
    .pos-backoffice *::after {
        transition: none !important;
        animation: none !important;
    }
}

.dark .pos-cashier-root {
    --pos-surface: rgb(var(--ep-surface-bg-dark-rgb, 17 28 47));
    --pos-canvas: rgb(var(--ep-canvas-bg-dark-rgb, 11 20 36));
    --pos-hover: rgb(var(--ep-hover-bg-dark-rgb, 30 41 59));
    --pos-border: rgb(var(--ep-surface-border-dark-rgb, 39 51 73));
    --pos-ink: rgb(var(--ep-ink-dark-rgb, 248 250 252));
    --pos-muted: rgb(var(--ep-muted-text-dark-rgb, 185 195 211));
}

/* The register takes the whole screen: no panel sidebar or top bar (the menu has «الرئيسية»). */
body.pos-cashier-active .fi-topbar,
body.pos-cashier-active .fi-sidebar,
body.pos-cashier-active .fi-sidebar-close-overlay {
    display: none !important;
}

body.pos-cashier-active .fi-main-ctn {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Navbar */
.pos-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.5rem;
    padding: 0 0.75rem;
    flex-shrink: 0;
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
}

.pos-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 14rem;
}

.pos-nav-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--pos-accent);
    color: #fff;
}

.pos-nav-brand-name,
.pos-nav-brand-user {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-nav-brand-name {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--pos-ink);
}

.pos-nav-brand-user {
    font-size: 0.8125rem;
    color: var(--pos-muted);
}

.pos-nav-search {
    flex: 0 1 26rem;
    min-width: 8rem;
}

.pos-nav-search .pos-search-field input {
    padding-block: 0.5rem;
}

.pos-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pos-ink);
}

.pos-nav-btn:hover {
    background: var(--pos-hover);
}

/* Odoo's order tabs */
.pos-nav-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.pos-nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 3.5rem;
    height: 2.5rem;
    padding: 0 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--pos-ink);
    background: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
    font-variant-numeric: tabular-nums;
}

.pos-nav-tab:hover {
    box-shadow: inset 0 0 0 1px rgb(var(--pos-accent-rgb) / 0.55);
}

.pos-nav-tab.is-active {
    color: #fff;
    background: var(--pos-accent);
    box-shadow: none;
    cursor: default;
}

.pos-nav-tab.is-plus {
    min-width: 2.5rem;
    padding: 0;
    color: var(--pos-accent);
}

.pos-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3125rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 900;
    color: #fff;
    background: var(--pos-accent);
    font-variant-numeric: tabular-nums;
}

.pos-nav-spacer {
    flex: 1 1 auto;
}

.pos-nav .pos-connection-status {
    position: static;
    pointer-events: auto;
    flex-shrink: 0;
}

.pos-nav-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    inset-inline-end: 0;
    z-index: 60;
    min-width: 14rem;
    padding: 0.375rem;
    border-radius: 0.75rem;
    background: var(--pos-surface);
    box-shadow: 0 0 0 1px var(--pos-border), 0 12px 32px rgb(0 0 0 / 0.14);
}

.pos-nav-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pos-ink);
    text-align: start;
}

.pos-nav-menu-item:hover {
    background: var(--pos-hover);
}

.pos-nav-menu-item.is-danger {
    color: #dc2626;
}

@media (max-width: 767px) {
    .pos-nav {
        gap: 0.25rem;
        padding: 0 0.5rem;
    }

    .pos-nav-btn-label,
    .pos-nav-brand-user {
        display: none;
    }

    .pos-nav-brand {
        flex-shrink: 0;
    }

    .pos-nav-brand > .min-w-0 {
        display: none;
    }

    .pos-nav-btn {
        padding: 0 0.5rem;
    }
}

.pos-toast-wrap {
    position: absolute;
    top: 4rem;
    inset-inline: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* Workspace */
body.pos-cashier-active .pos-cashier-root .pos-workspace {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.pos-cashier-root .pos-order {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pos-surface) !important;
}

/* As in Odoo, the order sits on the left and the products on the right. */
@media (min-width: 1280px) {
    .pos-cashier-root .pos-order.pos-cart-sidebar {
        order: 2;
        width: clamp(24rem, 34vw, 32rem);
        min-width: 24rem;
        max-width: 32rem;
        padding-inline-end: 0;
        border-inline-start: 1px solid var(--pos-border);
    }
}

/* Order lines */
.pos-order-lines {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
}

.pos-order-line {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--pos-border);
    border-inline-start: 3px solid transparent;
    cursor: pointer;
}

.pos-order-line:hover {
    background: var(--pos-hover);
}

.pos-order-line.is-selected {
    background: rgb(var(--pos-accent-rgb) / 0.08);
    border-inline-start-color: var(--pos-accent);
}

.pos-order-line-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.pos-order-line-name {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pos-ink);
    overflow-wrap: anywhere;
}

.pos-order-line-total {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

.pos-order-line-info {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--pos-muted);
    font-variant-numeric: tabular-nums;
}

.pos-order-line-info strong {
    color: var(--pos-ink);
}

.pos-order-line-flag {
    margin-inline-start: 0.375rem;
    font-weight: 700;
    color: #b45309;
}

.pos-order-line-note {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--pos-muted);
    white-space: pre-line;
}

.pos-order-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    min-height: 9rem;
    font-weight: 600;
    color: #6b7280;
    cursor: default;
}

/* Totals */
.pos-order-summary {
    flex-shrink: 0;
    padding: 0.5rem 1rem 0.625rem;
    border-top: 1px solid var(--pos-border);
}

.pos-order-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.125rem;
    font-size: 0.8125rem;
    color: var(--pos-muted);
    font-variant-numeric: tabular-nums;
}

.pos-order-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

.pos-order-summary-total small {
    font-size: 0.8125rem;
    font-weight: 700;
}

.pos-order-install {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pos-accent);
    background: rgb(var(--pos-accent-rgb) / 0.1);
}

.pos-order-discount-input {
    width: 6rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: left;
    color: #dc2626;
    background: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

/* Control buttons */
.pos-order-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--pos-border);
    background: var(--pos-hover);
}

.pos-order-control {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pos-ink);
    background: var(--pos-surface);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-order-control:hover {
    box-shadow: inset 0 0 0 1px rgb(var(--pos-accent-rgb) / 0.55);
}

.pos-order-control.is-active {
    color: var(--pos-accent);
    background: rgb(var(--pos-accent-rgb) / 0.1);
}

.pos-order-control.is-danger:hover {
    color: #dc2626;
}

/* Action pad: customer + payment beside the numpad */
.pos-actionpad {
    display: flex;
    flex-shrink: 0;
    height: 15rem;
    border-top: 1px solid var(--pos-border);
}

/* Customer and payment on the products' side, the numpad on the outer edge. */
.pos-actionpad-side {
    display: flex;
    flex-direction: column;
    order: 2;
    width: 38%;
    border-inline-start: 1px solid var(--pos-border);
}

.pos-actionpad-side .flex.gap-1 {
    gap: 0;
}

.pos-actionpad-customer {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    width: 100%;
    height: 3rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: start;
    color: var(--pos-ink);
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
}

.pos-actionpad-customer:hover,
.pos-actionpad-add:hover {
    background: var(--pos-hover);
}

.pos-actionpad-add {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 3rem;
    color: var(--pos-muted);
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
    border-inline-start: 1px solid var(--pos-border);
}

/* Customer's last jobs: one row of small chips, so the order lines keep the room. */
.pos-cashier-root .pos-recent-lines.pos-recent-chips {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--pos-border);
}

.pos-cashier-root .pos-recent-chips .pos-recent-lines__title {
    flex-shrink: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.pos-cashier-root .pos-recent-chips .pos-recent-line {
    flex-shrink: 0;
    width: auto;
    max-width: 12rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 9999px;
    gap: 0.375rem;
}

.pos-cashier-root .pos-recent-chips .pos-recent-line__name {
    overflow: hidden;
    font-size: 0.8125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pos-cashier-root .pos-recent-chips .pos-recent-line__meta {
    display: none;
}

.pos-actionpad-pay {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    background: var(--pos-accent);
}

.pos-actionpad-pay:hover {
    filter: brightness(1.06);
}

.pos-actionpad-pay small {
    font-size: 0.8125rem;
    font-weight: 700;
    opacity: 0.75;
}

/* Numpad */
.pos-numpad {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 1px;
    background: var(--pos-border);
}

.pos-numpad-key {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pos-ink);
    background: var(--pos-surface);
    user-select: none;
}

.pos-numpad-key:hover {
    background: var(--pos-hover);
}

.pos-numpad-key:active {
    background: rgb(var(--pos-accent-rgb) / 0.14);
}

.pos-numpad-key.is-mode {
    font-size: 0.8125rem;
    background: var(--pos-hover);
}

.pos-numpad-key.is-mode.is-active {
    color: #fff;
    background: var(--pos-accent);
}

.pos-numpad-key.is-back {
    color: #dc2626;
}

.pos-numpad-key:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Products */
body.pos-cashier-active .pos-cashier-root .pos-products-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0;
    gap: 0;
}

.pos-cashier-root .pos-category-chips {
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    overflow-x: auto;
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
}

.pos-category {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--pos-ink);
    background: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-cashier-root .pos-category-chips .pos-category {
    min-width: 0;
}

.pos-category.is-active {
    color: #fff;
    background: var(--pos-accent);
    box-shadow: none;
}

.pos-products-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
}

@media (max-width: 1279px) {
    .pos-products-scroll {
        padding-bottom: 5.5rem;
    }
}

@media (min-width: 1280px) {
    .pos-cashier-root .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    }
}

.pos-product {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 9.5rem;
    overflow: hidden;
    border-radius: 0.5rem;
    text-align: center;
    background: var(--pos-surface);
    box-shadow: 0 0 0 1px var(--pos-border);
    transition: box-shadow 0.12s, transform 0.08s;
}

.pos-product:hover {
    box-shadow: 0 0 0 2px rgb(var(--pos-accent-rgb) / 0.6);
}

.pos-product:active {
    transform: scale(0.98);
}

.pos-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.25rem;
    color: var(--pos-accent);
    background: rgb(var(--pos-accent-rgb) / 0.07);
}

/* A product picture fills the card's image area, as in Odoo; no picture keeps the icon. */
.pos-product-image.has-photo {
    background: var(--pos-surface);
}

.pos-product-image.has-photo > svg {
    display: none !important;
}

.pos-product-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-product-name {
    display: -webkit-box;
    padding: 0.5rem 0.5rem 0.25rem;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pos-ink);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pos-product-hint {
    padding-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #b45309;
}

.pos-product-price {
    position: absolute;
    top: 0.375rem;
    inset-inline-end: 0.375rem;
    z-index: 1;
    padding: 0.125rem 0.4375rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff;
    background: rgb(17 24 39 / 0.72);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Phone bar */
.pos-mobile-pay {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 900;
    color: #fff;
    background: var(--pos-accent);
}

.pos-mobile-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 800;
    color: var(--pos-ink);
    background: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

/* Payment screen */
.pos-pay {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    background: var(--pos-canvas);
}

.pos-pay-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    height: 3.5rem;
    padding: 0 0.75rem;
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
}

.pos-pay-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    font-weight: 700;
    color: var(--pos-ink);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-pay-title {
    font-size: 1.125rem;
    font-weight: 900;
    color: var(--pos-ink);
}

.pos-pay-due {
    margin-inline-start: auto;
    font-size: 0.875rem;
    color: var(--pos-muted);
}

.pos-pay-due strong {
    font-size: 1.125rem;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

.pos-pay-validate {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    background: var(--pos-accent);
}

.pos-pay-validate.is-disabled {
    opacity: 0.45;
}

.pos-pay-body {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 16rem minmax(0, 1fr) 16rem;
    min-height: 0;
}

.pos-pay-methods {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    overflow-y: auto;
    background: var(--pos-surface);
    border-inline-end: 1px solid var(--pos-border);
}

.pos-pay-heading {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--pos-muted);
}

.pos-pay-method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 800;
    text-align: start;
    color: var(--pos-ink);
    background: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-pay-method:hover {
    box-shadow: inset 0 0 0 2px rgb(var(--pos-accent-rgb) / 0.6);
}

.pos-pay-method-icon {
    display: flex;
    color: var(--pos-accent);
}

.pos-pay-center {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 40rem;
    min-height: 0;
    margin: 0 auto;
    padding: 1rem;
}

.pos-pay-lines {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 14rem;
    overflow-y: auto;
}

.pos-pay-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.5rem;
    font-weight: 700;
    color: var(--pos-muted);
}

.pos-pay-empty-amount {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

.pos-pay-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    cursor: pointer;
    background: var(--pos-surface);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-pay-line.is-selected {
    background: rgb(var(--pos-accent-rgb) / 0.06);
    box-shadow: inset 0 0 0 2px var(--pos-accent);
}

.pos-pay-line-name {
    flex: 1 1 auto;
    font-weight: 800;
    color: var(--pos-ink);
}

.pos-pay-line-amount {
    direction: ltr;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

.pos-pay-line-remove {
    color: #6b7280;
}

.pos-pay-line-remove:hover {
    color: #dc2626;
}

.pos-pay-status {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    background: var(--pos-surface);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-pay-status > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-weight: 700;
    color: var(--pos-muted);
}

.pos-pay-status strong {
    font-size: 1.875rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.pos-pay-status strong.is-due {
    color: #dc2626;
}

.pos-pay-status strong.is-change {
    color: #16a34a;
}

.pos-pay-warning {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #dc2626;
}

.pos-pay-note {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #b45309;
}

.pos-numpad.is-pay {
    flex: 0 0 auto;
    grid-auto-rows: 3.5rem;
    overflow: hidden;
    border-radius: 0.625rem;
    box-shadow: 0 0 0 1px var(--pos-border);
}

.pos-pay-side {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem;
    background: var(--pos-surface);
    border-inline-start: 1px solid var(--pos-border);
}

.pos-pay-customer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    font-weight: 800;
    color: var(--pos-ink);
    background: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

/* Order list: full screen, no rounded box, the modal's height limit lifted. */
.pos-cashier-root .pos-modal.pos-orders-screen {
    max-height: none;
    height: 100dvh;
    border-radius: 0;
}

/* Order list (Odoo's ticket screen): top bar, table, opened order. */
.pos-orders-screen {
    background: var(--pos-canvas);
}

.pos-tickets-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
}

.pos-tickets-new {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: #fff;
    background: var(--pos-accent);
}

.pos-tickets-search {
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: 0.375rem;
    max-width: 30rem;
    height: 2.5rem;
    padding-inline-end: 0.5rem;
    border-radius: 0.5rem;
    background: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-tickets-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pos-ink);
}

.pos-cashier-root .pos-modal input.pos-tickets-input,
.dark .pos-cashier-root .pos-modal input.pos-tickets-input {
    background-color: transparent !important;
    box-shadow: none !important;
}

.pos-tickets-input:focus {
    outline: none;
    box-shadow: none;
}

.pos-tickets-select {
    height: 2.5rem;
    padding-block: 0;
    border: 0;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pos-ink);
    background-color: var(--pos-hover);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-tickets-select.is-field {
    height: 100%;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    background-color: var(--pos-surface);
}

.pos-tickets-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.pos-tickets-list {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
}

.pos-tickets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: var(--pos-ink);
}

.pos-tickets-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 800;
    text-align: start;
    color: var(--pos-muted);
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
}

.pos-tickets-table td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--pos-border);
    background: var(--pos-surface);
}

.pos-tickets-table .is-num {
    font-weight: 800;
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pos-tickets-table tbody tr {
    cursor: pointer;
}

.pos-tickets-table tbody tr:hover td {
    background: var(--pos-hover);
}

.pos-tickets-table tbody tr.is-selected td {
    background: rgb(var(--pos-accent-rgb) / 0.1);
}

.pos-tickets-table tbody tr.is-cancelled td {
    opacity: 0.55;
    text-decoration: line-through;
}

.pos-tickets-table tbody tr.is-held td {
    background: rgb(59 130 246 / 0.06);
}

.pos-ticket-sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--pos-muted);
}

.pos-ticket-status {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 800;
    white-space: nowrap;
}

.pos-ticket-status.is-success { color: #15803d; background: rgb(22 163 74 / 0.12); }
.pos-ticket-status.is-warning { color: #b45309; background: rgb(245 158 11 / 0.15); }
.pos-ticket-status.is-danger { color: #dc2626; background: rgb(220 38 38 / 0.12); }
.pos-ticket-status.is-info { color: #2563eb; background: rgb(59 130 246 / 0.12); }

.pos-tickets-detail {
    display: flex;
    flex-direction: column;
    width: 26rem;
    flex-shrink: 0;
    min-height: 0;
    overflow-y: auto;
    background: var(--pos-surface);
    border-inline-start: 1px solid var(--pos-border);
}

.pos-tickets-detail-head {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--pos-border);
}

.pos-tickets-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pos-order-line.is-static {
    cursor: default;
}

.pos-tickets-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.75rem 1rem 1rem;
}

.pos-tickets-refund {
    display: inline-flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    font-weight: 900;
    color: #fff;
    background: #dc2626;
}

.pos-tickets-refund:hover {
    background: #ef4444;
}

.pos-tickets-return .pos-numpad.is-pay {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 3rem;
    margin-top: 0.75rem;
}

@media (max-width: 767px) {
    .pos-tickets-detail {
        width: 100%;
        border-inline-start: 0;
    }

    .pos-tickets-search {
        flex-basis: 100%;
        max-width: none;
        order: 5;
    }
}

/* Customer list: a centered dialog, as in Odoo, with compact table-like rows. */
.pos-customers {
    position: fixed;
    inset: 0;
    z-index: 47;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(15 23 42 / 0.45);
}

.pos-customers-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 40rem;
    max-height: min(36rem, calc(100dvh - 2rem));
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--pos-surface);
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
}

.pos-customers-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--pos-border);
}

.pos-customers-title {
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 900;
    color: var(--pos-ink);
}

.pos-customers-search {
    flex: 1 1 auto;
    min-width: 0;
}

.pos-customers-search .pos-search-field input {
    padding-block: 0.4375rem;
}

.pos-customers-new {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff;
    background: var(--pos-accent);
}

.pos-customers-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: var(--pos-muted);
}

.pos-customers-close:hover {
    background: var(--pos-hover);
}

.pos-customers-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.pos-customer-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--pos-border);
    font-size: 0.8125rem;
    text-align: start;
    color: var(--pos-ink);
}

.pos-customer-row:hover {
    background: var(--pos-hover);
}

.pos-customer-row.is-selected {
    background: rgb(var(--pos-accent-rgb) / 0.1);
    box-shadow: inset -3px 0 0 var(--pos-accent); /* the start edge (right) in Arabic */
}

.pos-customer-row.is-clear {
    font-weight: 700;
    color: #dc2626;
}

.pos-customer-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8125rem;
    border-radius: 9999px;
    font-weight: 900;
    color: var(--pos-accent);
    background: rgb(var(--pos-accent-rgb) / 0.12);
}

.pos-customer-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-customer-phone {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--pos-muted);
    font-variant-numeric: tabular-nums;
}

.pos-pay-customer {
    width: 100%;
    text-align: start;
}

@media (max-width: 1023px) {
    .pos-pay-body {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        overflow-y: auto;
    }

    .pos-pay-methods {
        flex-direction: row;
        padding: 0.625rem;
        overflow-x: auto;
        border-inline-end: 0;
        border-bottom: 1px solid var(--pos-border);
    }

    .pos-pay-heading,
    .pos-pay-title {
        display: none;
    }

    .pos-pay-method {
        flex-shrink: 0;
        padding: 0.625rem 0.875rem;
    }

    .pos-pay-side {
        border-inline-start: 0;
        border-top: 1px solid var(--pos-border);
    }

    .pos-pay-validate {
        padding: 0 1rem;
    }
}

/* After payment */
.pos-receipt {
    position: fixed;
    inset: 0;
    z-index: 46;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--pos-canvas);
}

.pos-receipt-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
}

.pos-receipt-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    color: #fff;
    background: #16a34a;
}

.pos-receipt-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--pos-ink);
}

.pos-receipt-number {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pos-muted);
}

.pos-receipt-total {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

.pos-receipt-total small {
    font-size: 1rem;
}

.pos-receipt-change {
    font-size: 1rem;
    font-weight: 700;
    color: #16a34a;
}

.pos-receipt-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pos-receipt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-radius: 0.625rem;
    font-weight: 800;
    color: var(--pos-ink);
    background: var(--pos-surface);
    box-shadow: inset 0 0 0 1px var(--pos-border);
}

.pos-receipt-btn:hover {
    box-shadow: inset 0 0 0 2px rgb(var(--pos-accent-rgb) / 0.55);
}

.pos-receipt-new {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    background: var(--pos-accent);
}

.pos-receipt-preview {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    overflow: auto;
    background: var(--pos-hover);
    border-inline-start: 1px solid var(--pos-border);
}

.pos-receipt-frame {
    width: min(100%, 24rem);
    height: 100%;
    min-height: 30rem;
    border: 0;
    border-radius: 0.25rem;
    background: #fff;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
}

@media (max-width: 1023px) {
    .pos-receipt {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }

    .pos-receipt-preview {
        display: none;
    }
}

/* Touch targets: category tabs and order controls were 34-36px high. */
.pos-category,
.pos-order-control { min-height: 2.75rem; }

/* Dark mode: white labels on the orange accent are 3.6:1; use shade 700 behind them. */
.dark .pos-nav-brand-icon,
.dark .pos-nav-tab.is-active,
.dark .pos-actionpad-pay,
.dark .pos-numpad-key.is-mode.is-active,
.dark .pos-category.is-active {
    background: rgb(var(--primary-700));
    border-color: rgb(var(--primary-700));
}
/* Dark mode: the light-mode amber and gray text colors above are under 4.5:1 on dark surfaces. */
.dark .pos-cart-item-override,
.dark .pos-order-line-flag,
.dark .pos-product-hint,
.dark .pos-pay-note,
.dark .pos-ticket-status.is-warning { color: #f59e0b; }
.dark .pos-order-empty,
.dark .pos-pay-line-remove { color: #9ca3af; }