/* Полноэкранный сканер. Общий для экрана кладовщика и оболочки: код
   один и тот же, и наводка не должна отличаться от того, где её открыли.

   Цвета заданы значениями, а не переменными темы: слой лежит поверх
   страницы на чёрном фоне и выглядит одинаково на обеих. */

/* ---------- сканирование во весь экран ---------- */

/*
 * Видео занимало треть экрана над кнопками. Для штрихкода это мало: человек
 * не видит, попал ли код в область распознавания, и подносит наугад.
 * Во время наведения работа одна — поймать код, и всё остальное на экране
 * только мешает.
 */
.camwrap {
  position: fixed; inset: 0; z-index: 60; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.camwrap video {
  width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; object-fit: cover;
}

/* Рамка — та самая полоса, которую разбирает распознавание. */
.camframe {
  position: absolute; border: 2px solid #FFB020; border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
  pointer-events: none;
}
.camcap {
  position: absolute; left: 16px; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom));
  text-align: center; font-size: 15px; line-height: 1.4; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.camacts {
  position: absolute; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
}
.camacts .btn { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.3); }

/* Что камера дала на самом деле — мелко в углу, чтобы не гадать. */
.caminfo {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px;
  font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.45); padding: 3px 7px; border-radius: 6px;
}
/* Фонарик: этикетка под плёнкой без света не читается. */
.camtorch {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 12px; width: auto;
  background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.3); padding: 8px 14px;
}
.camtorch.on { background: #FFB020; color: #1A1200; border-color: #FFB020; }

/* Отметка наводки: нажатие должно быть видно, даже если камера его не приняла. */
.camdot {
  position: absolute; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border: 2px solid #FFB020; border-radius: 50%; pointer-events: none;
  animation: camdot .7s ease-out forwards;
}
@keyframes camdot {
  from { transform: scale(1.4); opacity: 0; }
  30%  { transform: scale(1);   opacity: 1; }
  to   { transform: scale(.9);  opacity: 0; }
}


/* Вспышка после скана: рамка по краю экрана. Человек со сканером смотрит
   на товар, а не в экран, — отклик должен ловиться боковым зрением. */
.scanflash {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  animation: scanflash .4s ease-out forwards;
}
.scanflash.ok { box-shadow: inset 0 0 0 6px #2FBF71, inset 0 0 42px rgba(47,191,113,.55); }
.scanflash.bad { box-shadow: inset 0 0 0 6px #E4572E, inset 0 0 42px rgba(228,87,46,.55); }
@keyframes scanflash {
  from { opacity: 1; }
  60%  { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------- окно подтверждения ---------- */
/*
 * Живёт здесь, а не в shell.css: экран кладовщика этого листа не грузит,
 * а спрашивать «точно закончить смену?» надо и там. Цвета значениями,
 * как у сканера выше: слой лежит поверх двух разных страниц и обязан
 * выглядеть одинаково.
 */
.ask-back {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12, 26, 29, .55);
  display: grid; place-items: center; padding: 20px;
}
.ask {
  background: #fff; color: #17212b; border-radius: 14px; max-width: 460px; width: 100%;
  box-shadow: 0 18px 50px rgba(12, 26, 29, .35); padding: 20px 22px;
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.ask-h { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.ask-t { font-size: 14px; color: #46535f; }
.ask-t ul { margin: 8px 0 0; padding-left: 20px; }
.ask-t b { color: #17212b; }
.ask-b { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.ask-b button {
  font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 9px; cursor: pointer;
  border: 1px solid #d7dee6; background: #fff; color: #17212b;
}
.ask-b button:hover { background: #f2f5f9; }
.ask-yes { border-color: transparent; background: #0b57d0; color: #fff; }
.ask-yes:hover { background: #0a4bb3; }
.ask-yes.bad { background: #c0392b; }
.ask-yes.bad:hover { background: #a5301f; }
.ask-b button:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  .ask { background: #1b1f26; color: #e7ebf2; }
  .ask-t { color: #a3adbb; }
  .ask-t b { color: #e7ebf2; }
  .ask-b button { background: #232833; border-color: #2b323c; color: #e7ebf2; }
  .ask-b button:hover { background: #2b323c; }
}
.ask-f { display: block; margin-top: 14px; }
.ask-f span { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
              color: #6b7683; margin-bottom: 5px; }
.ask-f input { font: inherit; font-size: 15px; padding: 9px 11px; width: 100%; box-sizing: border-box;
               border: 1px solid #d7dee6; border-radius: 9px; background: #fff; color: #17212b; }
.ask-f input:focus { outline: 2px solid #0b57d0; outline-offset: 1px; border-color: transparent; }
@media (prefers-color-scheme: dark) {
  .ask-f span { color: #8b95a3; }
  .ask-f input { background: #232833; border-color: #2b323c; color: #e7ebf2; }
}