/* Reddo - de scanner van het bedrijf in de app (kaart #101380, ui/scanner.ts).

   Eerst 390px, één hand: het beeld vult de breedte, de code om in te tikken staat eronder met een groot veld en
   een grote knop. Alles volgt tokens.css. Eigen prefix .r-scanner, want er is geen bundler en alle CSS is globaal. */

.r-scanner { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }

.r-scanner__back {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  font-size: 14px; color: var(--r-muted); text-decoration: underline;
}
.r-scanner__back:visited { color: var(--r-muted); }

/* Het beeld. Een rechtopstaand vlak: een telefoon in de hand is hoger dan breed, en de camera vult het bij (cover). */
.r-scanner__view {
  position: relative; width: 100%; max-width: 480px; margin: 0 auto;
  aspect-ratio: 3 / 4; max-height: 62vh; overflow: hidden;
  background: var(--r-black); border-radius: var(--r-radius-card);
}
.r-scanner__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Het kader zegt waar de QR hoort. Alleen een aanwijzing: het hele beeld wordt gelezen. */
.r-scanner__frame {
  position: absolute; inset: 18%; pointer-events: none;
  border: 3px solid var(--r-paper); border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}

.r-scanner__status { margin: 0; padding: 0 8px; min-height: 1.5em; text-align: center; font-size: 15px; color: var(--r-muted); }

/* Een melding: een code die niet van ons is, of een camera die niets doet. Dezelfde toon als op het Stickers-scherm. */
.r-scanner__note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--r-card); border: 1px solid var(--r-border);
  border-left: var(--r-strip-w) solid #A8341F; border-radius: var(--r-radius-card);
  padding: 12px 14px; font-size: 14px; line-height: 1.45; color: #A8341F; font-weight: 600;
}
.r-scanner__note[hidden] { display: none; }
.r-scanner__notetext { margin: 0; flex: 1 1 200px; min-width: 0; }
.r-scanner__retry {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px;
  background: var(--r-black); color: var(--r-paper); border: 0;
}
.r-scanner__retry:visited { color: var(--r-paper); }

/* De code intikken. */
.r-scanner__code { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 0; }
.r-scanner__codetitle { margin: 0; padding: 0 8px; font-size: 16px; font-weight: 700; }
.r-scanner__codelabel { padding: 0 8px; font-size: 13px; color: var(--r-muted); }
.r-scanner__codeinput {
  font: inherit; font-size: 18px; box-sizing: border-box; width: 100%; min-height: 56px; padding: 12px 14px;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--r-card); color: var(--r-black); border: 1px solid var(--r-border); border-radius: var(--r-radius-btn);
}
.r-scanner__codeinput::placeholder { text-transform: none; letter-spacing: 0; color: var(--r-faint); }
.r-scanner__codego {
  font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-sizing: border-box;
  width: 100%; min-height: 56px; padding: 14px 20px;
  background: var(--r-black); color: var(--r-paper); border: 0;
}
.r-scanner__codego:disabled { opacity: 0.5; cursor: default; }
.r-scanner__codeerror { margin: 0; padding: 0 8px; font-size: 14px; line-height: 1.45; font-weight: 600; color: #A8341F; }
.r-scanner__codeerror[hidden] { display: none; }

/* De knop op het bedrijfsscherm (ui/ops-screen.ts): klein in de balk, maar een vinger groot. */
.r-topbar__scan {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 44px; margin-left: 12px; padding: 0 16px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  background: var(--r-black); color: var(--r-paper);
}
.r-topbar__scan:visited { color: var(--r-paper); }