/* Kezpo Tag — Custom Styles */

body {
  background: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* QR Scanner viewport */
#qr-reader {
  border: none !important;
  border-radius: 0.75rem;
  overflow: hidden;
}
#qr-reader video {
  border-radius: 0.75rem;
}
#qr-reader__scan_region {
  min-height: 200px;
}
#qr-reader__dashboard {
  padding: 8px !important;
}
#qr-reader__dashboard button {
  background: #3b82f6 !important;
  color: white !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
#qr-reader__dashboard select {
  background: #1e293b !important;
  color: white !important;
  border: 1px solid #475569 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}

/* Key list animations */
.key-item {
  transition: all 0.3s ease;
}
.key-item.new-item {
  animation: slideIn 0.4s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.key-item.recognized {
  animation: pulse-green 0.6s ease-out;
}
@keyframes pulse-green {
  0% { background-color: rgba(34, 197, 94, 0.3); }
  100% { background-color: transparent; }
}

/* Feedback toast */
.feedback-toast {
  animation: fadeInOut 2s ease-in-out;
}
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Progress bar */
.progress-fill {
  transition: width 0.5s ease-in-out;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #1e293b;
}
::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Log entries */
.log-entry {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Packaging success animation */
.package-success {
  animation: packagePulse 0.6s ease-out;
}
@keyframes packagePulse {
  0% { transform: scale(1); background-color: rgba(34, 197, 94, 0.3); }
  50% { transform: scale(1.02); background-color: rgba(34, 197, 94, 0.5); }
  100% { transform: scale(1); background-color: transparent; }
}

/* Status badge pulse for pending state */
.status-pending {
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}