/* =========================================================================
   styles-main.css — Scanner-Seiten (index = Entnehmen, add = Hinzufügen)
   =========================================================================
   Dünnes Seiten-CSS auf Basis von design-system.css (Tokens, Reset,
   Buttons, Felder, Cards, Header/Footer). Hier nur das Scanner-spezifische
   Layout:
     - App-Shell mit fixer Höhe (kein Body-Scroll).
     - Adaptiver Scanner über die Zustands-Klasse `.main-content.is-detail`
       (gesetzt vom Scanner-JS: showScannerView / showDetailsView):
         · Scannen  → Scanner groß + QR-Eingabe darunter (einspaltig).
         · nach Scan → iPhone: Swap (nur Details); iPad hoch: Scanner oben,
           Details darunter; iPad quer: Scanner links, Details rechts.
   ========================================================================= */

/* Scanner-Seiten sind nicht scrollbar; Schrift/Farben aus design-system. */
html, body {
  height: 100%;
  overflow: hidden;
}

/* Fixe Shell-Höhe (überschreibt min-height aus design-system). */
.container {
  height: 100vh;
}

/* Inhaltsbereich: Flex-Spalte. Voller Bleed (kein max-width), damit der
   Scanner die Fläche nutzt. */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  max-width: none;
  overflow: hidden;
}

/* ---------------------------------------------------------------- Scanner */
.camera-container {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background-color: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

#qr-reader {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Grüner Marker + Scrim außerhalb (begrenzt vom overflow:hidden oben). */
.scanner-border {
  width: 250px;
  height: 250px;
  max-width: 70%;
  max-height: 70%;
  border: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
}


/* ------------------------------------------------------ Panel (Eingabe) */
.scanner-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

/* Manuelle QR-Eingabe (Zustand: Scannen) */
.scan-qr {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.scan-qr label {
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.scan-qr .input {
  flex: 1;
}
.scan-qr .manual-qr-submit {
  flex: 0 0 auto;
  padding: 0 var(--space-4);
}

/* Details (Zustand: nach Scan) — standardmäßig versteckt */
.scan-details {
  display: none;
}
.main-content.is-detail .scan-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.main-content.is-detail .scan-qr {
  display: none;
}
.main-content.is-detail .scanner-panel {
  flex: 1 1 auto;
}

/* Nach Scan: Scanner ÜBERALL ausblenden (Swap-Modell wie iPhone). Der
   Scanner läuft im Hintergrund weiter; onScanSuccess ignoriert Scans im
   Detail-Zustand → kein versehentliches Re-Scan. Bewusst kein pause()
   (das gab auf iPad ein schwarzes Bild + Fehler-Freeze). */
.main-content.is-detail .camera-container {
  display: none;
}

.scan-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.scan-title {
  font-size: var(--fs-lg);
}

/* Eingabe + Aktionen als ein Block unten andocken (Daumen-Zone) */
.scan-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
}
.scan-actions {
  display: flex;
  gap: var(--space-3);
}
.scan-actions .btn--primary {
  flex: 1;
}

/* iPhone: kompakt, Titel weglassen (Verhalten unverändert) */
@media (max-width: 767px) {
  .scan-title {
    display: none;
  }
}

/* ===========  iPad/Tablet: Buchung füllt die Fläche  ===================
   Scanner ist ausgeblendet. Produkt-Card oben zentriert; Anzahl-Eingabe
   UND Aktionen als Block unten RECHTS (Daumen-Zone im Querformat). Gilt
   für hoch + quer. */
@media (min-width: 768px) {
  .main-content {
    padding: var(--space-4);
    gap: var(--space-4);
  }
  .main-content.is-detail .scan-content {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
  .main-content.is-detail .scan-entry {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
  }
  .main-content.is-detail .scan-actions {
    justify-content: flex-end;
  }
  .main-content.is-detail .scan-actions .btn--primary {
    flex: 0 0 auto;
    padding-inline: var(--space-6);
  }
}