/* Placeholders overal half zo sterk als het standaardgrijs (#9ca3af), zodat bijvoorbeeld de laatste scan
   in de scanbalk niet op ingevulde tekst lijkt. Eén regel voor alle pagina's: hier aanpassen, niet per veld. */
input::placeholder,
textarea::placeholder {
  color: #9ca3af;
  opacity: 0.5;
}

/* Camera als scanner (js/camera.js): knop rechts in de scanbalk of het badgeveld, en het camerascherm */
.scan-met-camera { position: relative; }
.scan-met-camera input { padding-right: 3.5rem; }
.camera-knop {
  position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  color: #15803d; background: transparent; border: 0; border-radius: 0.5rem; cursor: pointer;
}
.camera-knop:hover, .camera-knop:active { background: #f0fdf4; }

#camera-scanner { display: none; position: fixed; inset: 0; z-index: 60; background: #000; }
#camera-scanner.actief { display: block; }
#camera-scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#camera-scanner .camera-kader {
  position: absolute; top: 50%; left: 50%; width: 80%; max-width: 28rem; height: 9rem; transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 0.75rem; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
}
#camera-scanner .camera-tekst {
  position: absolute; top: calc(50% - 7rem); left: 0; right: 0; text-align: center; color: #fff; font-size: 1rem;
}
#camera-scanner .camera-stop {
  position: absolute; bottom: calc(2rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  padding: 0.75rem 2rem; color: #111827; background: #fff; border: 0; border-radius: 0.5rem; font-size: 1rem;
}

/* Scrollbar styling - always visible */
#customer-info-block .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #e5e7eb;
}

#customer-info-block .overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}

#customer-info-block .overflow-y-auto::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 4px;
}

#customer-info-block .overflow-y-auto::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 4px;
}

#customer-info-block .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Instructies blok: shake + ademend effect */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-1deg); }
  30% { transform: translateX(5px) rotate(1deg); }
  45% { transform: translateX(-4px) rotate(-0.5deg); }
  60% { transform: translateX(3px) rotate(0.5deg); }
  75% { transform: translateX(-2px); }
}

@keyframes breathe {
  0%, 100% { background-color: #ffffff; }
  50% { background-color: #dcfce7; }
}

#instructions-block.shake {
  animation: shake 0.6s ease-in-out;
}

#instructions-block.breathing {
  animation: breathe 2s ease-in-out infinite;
  cursor: pointer;
}