/* 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-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 40;
}

#camera-overlay canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 50;
}

/* 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;
}