/* === Minimal custom styles - Tailwind handles most styling === */

* { -webkit-tap-highlight-color: transparent; }

/* Pipeline drag-and-drop states */
.drag-over {
  background-color: #dbeafe !important;
  border: 2px dashed #3b82f6 !important;
  border-radius: 0.5rem;
}

.dragging {
  opacity: 0.4;
  transform: rotate(1deg);
}

/* Pipeline horizontal scroll */
.pipeline-scroll::-webkit-scrollbar { height: 6px; }
.pipeline-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
.pipeline-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.pipeline-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Toast notifications */
@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
.toast-enter { animation: toastIn 0.3s ease-out; }
.toast-exit { animation: toastOut 0.3s ease-in forwards; }

/* Focus ring for inputs */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Backdrop blur for modals */
.modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Login page */
.login-container {
  max-width: 400px;
  margin: 80px auto;
  padding: 0 16px;
}