/* Outer box: wide, tall, responsive */
#barcodeScanModal .quagga-wrapper {
  /* Make it as wide as the modal body allows */
  width: 100%;
  max-width: 960px; /* optional upper bound */
  margin: 0 auto;

  /* Keep a proper video shape without Bootstrap's .ratio quirks */
  aspect-ratio: 16 / 9;
  max-height: 70vh; /* don't exceed viewport */
  min-height: 320px; /* never collapse to tiny */
  position: relative; /* anchor for absolute children */
  overflow: hidden;
}

/* Quagga injects <video> and <canvas> into #quagga-target.
   Force them to completely fill the wrapper. */
#barcodeScanModal .quagga-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#barcodeScanModal #quagga-target video,
#barcodeScanModal #quagga-target canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* show entire frame without cropping */
}

/* Optional: keep modal sensible on wide screens */
#barcodeScanModal .modal-dialog {
  max-width: 450px;
}
#barcodeScanModal .modal-body {
  max-height: 80vh;
  overflow: auto;
}

/* ensure the badge is always readable */
#barcodeScanModal #liveCodeBadge {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}