/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

/* Scanner overlay */
.scanner { --roi: 60%; position: relative; }
.scanner__video { aspect-ratio: 3 / 4; object-fit: cover; background: #000; }

/* Hide overlay when video is hidden (Safari supports :has) */
.scanner:has(video[hidden]) .scanner__overlay { display: none; }

.scanner__overlay { position: absolute; inset: 0; }
.scanner__frame {
  position: absolute;
  width: var(--roi);
  height: var(--roi);
  left: calc((100% - var(--roi)) / 2);
  top: calc((100% - var(--roi)) / 2);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;
}

/* Dim outside ROI with four shades */
.scanner__shade { position: absolute; background: rgba(0,0,0,0.45); }
.scanner__shade--top {
  top: 0; left: 0; right: 0;
  height: calc((100% - var(--roi)) / 2);
}
.scanner__shade--bottom {
  bottom: 0; left: 0; right: 0;
  height: calc((100% - var(--roi)) / 2);
}
.scanner__shade--left {
  left: 0;
  top: calc((100% - var(--roi)) / 2);
  width: calc((100% - var(--roi)) / 2);
  height: var(--roi);
}
.scanner__shade--right {
  right: 0;
  top: calc((100% - var(--roi)) / 2);
  width: calc((100% - var(--roi)) / 2);
  height: var(--roi);
}

/* Animated scan line inside ROI */
.scanner__line {
  position: absolute;
  left: calc((100% - var(--roi)) / 2);
  width: var(--roi);
  height: 2px;
  background: rgba(255, 0, 0, 0.85);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
  border-radius: 2px;
  animation: scanner-sweep 1.8s linear infinite;
}
@keyframes scanner-sweep {
  0%   { top: calc((100% - var(--roi)) / 2); }
  100% { top: calc((100% - var(--roi)) / 2 + var(--roi) - 2px); }
}