/* Vale Forms - Main Styles */
/* ======================== */

/* Scrollbar Styles */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* Animations */
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes typing { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }

.animate-slideUp { animation: slideUp 0.3s ease-out; }
.animate-slideDown { animation: slideDown 0.3s ease-out; }
.animate-slideInRight { animation: slideInRight 0.3s ease-out; }
.animate-slideInLeft { animation: slideInLeft 0.3s ease-out; }
.animate-fadeIn { animation: fadeIn 0.3s ease-out; }
.animate-scaleIn { animation: scaleIn 0.3s ease-out; }
.animate-bounceIn { animation: bounceIn 0.5s ease-out; }
.animate-shake { animation: shake 0.4s ease-in-out; }
.animate-float { animation: float 3s ease-in-out infinite; }

/* Satia typing indicator */
.satia-typing span {
  display: inline-block;
  width: 8px; height: 8px;
  margin: 0 2px;
  background: #9333EA;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}
.satia-typing span:nth-child(2) { animation-delay: 0.2s; }
.satia-typing span:nth-child(3) { animation-delay: 0.4s; }

/* Drag and Drop */
.field-dragging { opacity: 0.5; transform: scale(0.98); }
.field-drag-over { border: 2px dashed #FF6B35 !important; background: #FFF4ED !important; }
.drop-zone-active { background: #FFF4ED; border-color: #FF6B35; }

/* Sidebar transitions */
.sidebar-item { transition: all 0.2s ease; }
.sidebar-item:hover { background: rgba(255,107,53,0.08); }
.sidebar-item.active { background: rgba(255,107,53,0.12); border-right: 3px solid #FF6B35; }

/* Folder card */
.folder-card {
  transition: all 0.2s ease;
  cursor: pointer;
}
.folder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Form card */
.form-card {
  transition: all 0.2s ease;
  cursor: pointer;
}
.form-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Editor field item */
.editor-field {
  transition: all 0.15s ease;
  cursor: grab;
}
.editor-field:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-color: #FF6B35;
}
.editor-field:active { cursor: grabbing; }
.editor-field.selected {
  border-color: #FF6B35;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
}

/* Element palette item */
.element-item {
  transition: all 0.15s ease;
  cursor: grab;
}
.element-item:hover {
  background: rgba(255,107,53,0.1);
  transform: translateX(3px);
}
.element-item:active { cursor: grabbing; }

/* Toast */
.toast-enter { animation: slideInRight 0.3s ease-out; }
.toast-exit { animation: fadeOut 0.3s ease-out forwards; }

/* Tabs */
.tab-active {
  color: #FF6B35;
  border-bottom: 3px solid #FF6B35;
  font-weight: 600;
}

/* Status badges */
.status-active { background: #DCFCE7; color: #166534; }
.status-draft { background: #FEF3C7; color: #92400E; }
.status-inactive { background: #FEE2E2; color: #991B1B; }

/* Context Menu */
.context-menu {
  position: fixed;
  z-index: 100;
  animation: scaleIn 0.15s ease-out;
  transform-origin: top left;
}

/* Field Type Icons Colors */
.field-icon-text { color: #3B82F6; }
.field-icon-email { color: #EF4444; }
.field-icon-number { color: #8B5CF6; }
.field-icon-select { color: #10B981; }
.field-icon-photo { color: #F59E0B; }
.field-icon-date { color: #EC4899; }
.field-icon-textarea { color: #6366F1; }
.field-icon-checkbox { color: #14B8A6; }
.field-icon-location { color: #F97316; }
.field-icon-qrcode { color: #0EA5E9; }
.field-icon-smart-list { color: #A855F7; }
.field-icon-custom { color: #64748B; }

/* Responsive */
@media (max-width: 768px) {
  .sidebar-desktop { display: none !important; }
  .mobile-full { width: 100% !important; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}

/* Print styles for data export */
@media print {
  .no-print { display: none !important; }
  body { background: white; }
}