/* Barcode scanner overlay (Phase 2). Full-screen on a phone — a scanner is a
   modal task, not a panel. Themed for light AND dark from the start rather than
   leaving dark to be retrofitted, which is what caused the platform-wide dark
   mode debt. */
.bcs-back{
  position:fixed; inset:0; z-index:6000;
  background:rgba(4,10,20,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.bcs-panel{
  width:100%; max-width:460px; background:#fff; color:#0f172a;
  border:1px solid #e2e8f0; border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px rgba(2,8,20,.5); display:flex; flex-direction:column;
}
.bcs-head{ display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #e2e8f0; }
.bcs-title{ font-weight:800; font-size:15px; }
.bcs-x{ background:none; border:0; font-size:26px; line-height:1; cursor:pointer;
  color:#64748b; padding:0 4px; min-height:44px; min-width:44px; }

/* The video is the point — give it the room. */
.bcs-stage{ position:relative; background:#000; aspect-ratio:4/3; }
.bcs-vid{ width:100%; height:100%; object-fit:cover; display:block; }
/* Aiming guide: a 1D barcode wants a WIDE, short window, not a square. */
.bcs-reticle{
  position:absolute; left:8%; right:8%; top:50%; height:26%; transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.9); border-radius:10px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35);
  pointer-events:none;
}
.bcs-msg{ margin:0; padding:12px 14px; font-size:13px; color:#475569;
  word-break:break-all; min-height:42px; }
.bcs-msg.bcs-err{ color:#b91c1c; font-weight:600; }
.bcs-foot{ display:flex; gap:8px; justify-content:flex-end;
  padding:10px 14px 14px; border-top:1px solid #e2e8f0; }
.bcs-foot button{
  min-height:44px; padding:0 16px; border-radius:10px; font-weight:700; cursor:pointer;
  border:1px solid #cbd5e1; background:#f8fafc; color:#0f172a;
}
.bcs-torch.on{ background:#fde68a; border-color:#f59e0b; }

/* Dark — same palette as the rest of the app (dark.css). */
html[data-theme="dark"] .bcs-panel{
  background:#0f1e2e; color:#e6edf6; border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .bcs-head,
html[data-theme="dark"] .bcs-foot{ border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .bcs-x{ color:#a9b8cc; }
html[data-theme="dark"] .bcs-msg{ color:#a9b8cc; }
html[data-theme="dark"] .bcs-msg.bcs-err{ color:#fca5a5; }
html[data-theme="dark"] .bcs-foot button{
  background:#16233a; color:#e6edf6; border-color:rgba(255,255,255,.12);
}
html[data-theme="dark"] .bcs-torch.on{ background:rgba(245,158,11,.22); border-color:rgba(245,158,11,.5); color:#fcd34d; }

/* Phone: go full-bleed. Chasing a barcode in a small window is miserable. */
@media (max-width: 1180px){
  .bcs-back{ padding:0; }
  .bcs-panel{ max-width:none; height:100%; border:0; border-radius:0; }
  .bcs-stage{ flex:1; aspect-ratio:auto; }
}
@media (prefers-reduced-motion: reduce){
  .bcs-back{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}