/* CSS fixes for video layout issues while preserving black screen fix */

/* Base styles for the reader element */
#reader {
    position: relative !important;
    overflow: hidden !important;
    min-height: 150px !important;
    width: 100% !important;
}

/* Make sure video is displayed properly without absolute positioning */
#reader video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100px !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}

/* Canvas should remain in absolute position to overlay on video */
#reader canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure scanner controls stay visible */
#reader__dashboard_section {
    position: relative !important;
    padding-top: 10px !important;
}

/* Keep scan region properly laid out */
#reader__scan_region {
    position: relative !important;
    overflow: hidden !important;
}

/* Make QR/Barcode controls more visible and functional */
#reader__dashboard_section_csr button,
#reader__dashboard_section_fsr button,
#reader__dashboard_section_swaplink {
    position: relative !important;
    z-index: 5 !important;
    margin: 2px !important;
}

/* Ensure file selection controls are visible */
#reader__dashboard_section_fsr input {
    position: relative !important;
    z-index: 3 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Style for QR video that preserves layout */
.qr-video {
    position: relative !important;
    width: 100% !important;
}