.barcode-scan-wrapper .barcode-scan-open {
    display: none;
    align-items: center;
    justify-content: center;
}

.barcode-scan-wrapper .barcode-scan-open:not(.d-none) {
    display: inline-flex;
}

.cmms-acf-scanner-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000;
    overflow: hidden;
}

.cmms-acf-scanner-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    opacity: 0;
    transition: opacity .15s ease;
    background: #000;
}

.cmms-acf-scanner-video.cmms-is-ready {
    opacity: 1;
}

.cmms-acf-scanner-topbar {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top));
    right: calc(14px + env(safe-area-inset-right));
    z-index: 1000003;
    display: flex;
    gap: 10px;
}

.cmms-acf-scanner-icon {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.cmms-acf-scanner-icon.is-active {
    background: #ffc107;
    color: #111;
}

.cmms-acf-scanner-hint {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1000001;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 14px;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.cmms-acf-scanner-settings {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 1000010;
    padding: 16px;
    border-radius: 18px;
    /*background: rgba(255,255,255,.98);*/--var(--bs-body-bg);
    background: var(--bs-body-bg);
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
    pointer-events: auto;
}

.cmms-acf-scanner-modal {
    pointer-events: auto;
}

.cmms-acf-scanner-video {
    pointer-events: none;
}

.cmms-acf-scanner-topbar {
    pointer-events: auto;
}

.cmms-acf-scanner-settings .form-select,
.cmms-acf-scanner-settings .form-range {
    width: 100%;
}

.cmms-acf-camera-list {
    display: grid;
    gap: 8px;
}

.cmms-acf-camera-option {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-nav-link-color);
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.cmms-acf-camera-option.is-active {
    border-color: #0d6efd;
    background: rgba(13,110,253,.08);
    color: #0d6efd;
    font-weight: 600;
}

.cmms-acf-scanner-loader {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #000;
    color: #fff;
}

.cmms-acf-spinner {
    width: 46px;
    height: 46px;
    border: 4px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 999px;
    animation: cmms-acf-spin .8s linear infinite;
}

.cmms-acf-loader-text {
    font-size: 15px;
    color: rgba(255,255,255,.85);
}

@keyframes cmms-acf-spin {
    to {
        transform: rotate(360deg);
    }
}

.barcode-phone-open {
    align-items: center;
    justify-content: center;
}

.barcode-phone-open.is-active {
}

.cmms-phone-pair-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cmms-phone-pair-box {
    width: 100%;
    max-width: 420px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #111);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
}

.cmms-phone-pair-qr {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cmms-phone-pair-qr img{
    background: #fff;          /* belo ozadje */
    padding: 12px;             /* prostor okoli QR */
    border-radius: 14px;       /* zaobljeni robovi */
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.cmms-phone-pair-status {
    margin-top: 12px;
}


.d-none {
    display: none !important;
}

/**
 * ============================================================
 * Remote phone scan stran
 * ============================================================
 */
.cmms-phone-body {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cmms-phone-scanner {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000;
    overflow: hidden;
}

.cmms-phone-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    opacity: 0;
    transition: opacity .15s ease;
    background: #000;
}

.cmms-phone-video.cmms-is-ready {
    opacity: 1;
}

.cmms-phone-topbar {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top));
    right: calc(14px + env(safe-area-inset-right));
    z-index: 1000003;
    display: flex;
    gap: 10px;
}

.cmms-phone-icon {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.cmms-phone-icon.is-active {
    background: #ffc107;
    color: #111;
}

.cmms-phone-status {
    position: fixed;
    left: 14px;
    right: 14px;
    top: calc(70px + env(safe-area-inset-top));
    z-index: 1000002;
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
}

.cmms-phone-hint {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1000002;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.cmms-phone-loader {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #000;
    color: #fff;
}

.cmms-phone-spinner {
    width: 46px;
    height: 46px;
    border: 4px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 999px;
    animation: cmms-phone-spin .8s linear infinite;
}

@keyframes cmms-phone-spin {
    to {
        transform: rotate(360deg);
    }
}