/* Barcode lookup scan button icon (QR / scanner) */
.dx-icon.barcode-lookup-scan-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%23000' d='M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 0h2v6h-6v-2h4v-4zM7 7h4v4H7V7zm6 0h4v4h-4V7zM7 13h4v4H7v-4zm6 2h2v2h-2v-2zm2 2h2v2h-2v-2zm2-2h2v2h-2v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%23000' d='M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 0h2v6h-6v-2h4v-4zM7 7h4v4H7V7zm6 0h4v4h-4V7zM7 13h4v4H7v-4zm6 2h2v2h-2v-2zm2 2h2v2h-2v-2zm2-2h2v2h-2v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Scanner DxPopup — viewport-centered (Pixel 7 / phones) */
.dxbl-modal:has(.barcode-scanner-dx-popup) {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(0.5rem, env(safe-area-inset-top, 0px))
             max(0.5rem, env(safe-area-inset-right, 0px))
             max(0.5rem, env(safe-area-inset-bottom, 0px))
             max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.dxbl-modal:has(.barcode-scanner-dx-popup) > .dxbl-modal-root {
    display: contents;
}

.barcode-scanner-dx-popup {
    --dxbl-popup-align-self: center !important;
    --dxbl-popup-justify-self: center !important;
    align-self: center !important;
    justify-self: center !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: min(92vw, 400px) !important;
    width: min(92vw, 400px) !important;
    max-height: min(90dvh, 640px) !important;
    box-sizing: border-box !important;
    z-index: 1;
}

.barcode-scanner-dx-popup .dxbl-popup-content,
.barcode-scanner-dx-popup .dxbl-popup-body,
.barcode-scanner-dx-popup .dxbl-modal-body {
    max-height: calc(min(90dvh, 640px) - 3.25rem);
    overflow: auto;
    box-sizing: border-box;
}

.barcode-scanner-popup-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
}

.barcode-scanner-hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.3;
    opacity: 0.85;
}

.barcode-scanner-reader {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    max-height: min(52dvh, 320px);
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.barcode-scanner-reader video,
.barcode-scanner-reader canvas,
.barcode-scanner-reader img {
    max-width: 100% !important;
    max-height: min(52dvh, 320px) !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

.barcode-pairing-qr {
    display: block;
    width: min(240px, 70vw);
    height: auto;
    margin: 0 auto;
    background: #fff;
    padding: 0.5rem;
    border-radius: 4px;
}

.barcode-pairing-wait {
    text-align: center;
}

.barcode-pairing-url {
    word-break: break-all;
    text-align: center;
    font-size: 0.75rem;
    user-select: all;
}

.barcode-pairing-local-btn {
    appearance: none;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 4px;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}

.barcode-scan-page {
    min-height: 100dvh;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
}

.barcode-scan-page .barcode-scanner-popup-body {
    max-width: 400px;
    margin: 0 auto;
}

.barcode-scan-status {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
}

@media (max-height: 750px) {
    .barcode-scanner-hint {
        font-size: 0.8rem;
    }

    .barcode-scanner-reader,
    .barcode-scanner-reader video,
    .barcode-scanner-reader canvas,
    .barcode-scanner-reader img {
        max-height: min(45dvh, 260px) !important;
    }
}