/*
 * G_Scan - lecteur de codes-barres par camera (gscan-camera.js).
 * Le panneau vit soit dans la modale #cameraScanModal du POS, soit en
 * superposition (dans la modale parente d'un champ, ou plein ecran).
 */
.fc-camera {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc-camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.6);
}

/* Ouvert depuis une modale Bootstrap : le panneau reste DANS la modale pour
   ne pas se battre avec son piege de focus. */
.fc-camera-overlay.is-inline {
  position: absolute;
  z-index: 20;
  border-radius: inherit;
}

.fc-camera-overlay > .fc-camera {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 14px;
  border-radius: 12px;
  background: var(--bs-body-bg, #ffffff);
  color: var(--bs-body-color, #212529);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.35);
}

.fc-camera-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #0b1220;
}

.fc-camera-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Viseur : bande centrale, la seule zone decodee. */
.fc-camera-viewfinder {
  position: absolute;
  top: 30%;
  left: 10%;
  width: 80%;
  height: 40%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgba(11, 18, 32, 0.45);
  pointer-events: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fc-camera-viewfinder::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 2px;
  background: rgba(239, 68, 68, 0.85);
}

.fc-camera-viewfinder.is-hit {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.18);
}

.fc-camera-viewfinder.is-error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.18);
}

.fc-camera-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fc-camera-toolbar .btn,
.fc-camera-toolbar .form-select {
  min-height: 44px;
}

.fc-camera-device {
  flex: 1 1 180px;
  width: auto;
}

.fc-camera-close {
  margin-left: auto;
}

.fc-camera-status {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.fc-camera-status.is-error {
  color: var(--bs-danger, #dc3545);
}

.fc-camera-status.is-success {
  color: var(--bs-success, #198754);
}

.fc-camera-history {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
}

.fc-camera-history li {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.fc-camera-history li.is-error,
.fc-camera-history li.is-warning {
  color: var(--bs-danger, #dc3545);
}

.fc-camera-history code {
  color: inherit;
  opacity: 0.75;
}

@media (max-width: 575.98px) {
  .fc-camera-overlay {
    padding: 0;
  }

  .fc-camera-overlay > .fc-camera {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .fc-camera-stage {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 55vh;
  }
}