/* Mobile-only dark QR-scanner viewfinder for Event Check-In.
   All rules are gated to <lg (max-width: 1023px). Desktop (>=1024px) is fully unchanged:
   the dark chrome is display:none and no modal overrides apply. */

.checkin-darkmobile-chrome { display: none; }

@media (max-width: 1023px) {
    /* Restyle the modal into a full-screen dark viewfinder ONLY while the live scanner
       is showing (.checkin-scanning-active). Success / error states keep the white modal. */
    .checkin-modal-root.checkin-scanning-active {
        padding: 0;
        background: #09113B;
    }

    .checkin-modal-root.checkin-scanning-active .checkin-modal-card {
        position: fixed;
        inset: 0;
        max-width: none;
        max-height: none;
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        background: #09113B;
        overflow: hidden;
    }

    .checkin-modal-root.checkin-scanning-active .checkin-modal-inner {
        position: absolute;
        inset: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide the white-modal header while scanning. */
    .checkin-modal-root.checkin-scanning-active .checkin-modal-header { display: none; }

    /* Within the QRCodeScanner: hide the redundant light helper text and the duplicate
       Cancel button (our dark chrome replaces them). The activate / error cards (nested
       inside .max-w-md) stay intact so the camera-permission flow is unchanged. */
    .checkin-modal-root.checkin-scanning-active .checkin-modal-inner > div > .text-sm.text-center,
    .checkin-modal-root.checkin-scanning-active .checkin-modal-inner > div > button {
        display: none;
    }

    /* Let the live camera element fill the dark screen. */
    .checkin-modal-root.checkin-scanning-active #qr-reader {
        max-width: 100vw;
        width: 100vw;
        border: none;
        border-radius: 0;
    }

    /* Decorative dark chrome overlay: brackets, hint, close, manual fallback.
       pointer-events:none so it never blocks the camera element underneath. */
    .checkin-darkmobile-chrome {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 10;
        pointer-events: none;
    }

    .checkin-darkmobile-close {
        pointer-events: auto;
        position: absolute;
        top: max(16px, env(safe-area-inset-top));
        left: 16px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: rgba(0, 0, 0, 0.35);
        border: none;
    }

    .checkin-darkmobile-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 260px;
        height: 260px;
    }

    .checkin-corner {
        position: absolute;
        width: 32px;
        height: 32px;
        border: 4px solid #10b981;
    }

    .checkin-corner-tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 12px; }
    .checkin-corner-tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 12px; }
    .checkin-corner-bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 12px; }
    .checkin-corner-br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 12px; }

    .checkin-darkmobile-hint {
        position: absolute;
        top: calc(50% + 160px);
        left: 0;
        right: 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.85);
        font-size: 15px;
        margin: 0;
        padding: 0 24px;
    }

    .checkin-darkmobile-manual {
        pointer-events: auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: max(28px, env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        font-size: 14px;
        font-weight: 500;
    }
}