/* Modern Edit Panel Enhancements */

/* Focus states for form inputs */
#editOptionsCard input[type="number"]:focus,
#editOptionsCard input[type="text"]:focus,
#editOptionsCard input[type="email"]:focus,
#editOptionsCard input[type="url"]:focus,
#editOptionsCard select:focus,
#editOptionsCard textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: #ffffff;
}

/* Checkbox focus states */
#editOptionsCard input[type="checkbox"]:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* Radio button focus states */
#editOptionsCard input[type="radio"]:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* Hover states for form inputs */
#editOptionsCard input[type="number"]:hover,
#editOptionsCard input[type="text"]:hover,
#editOptionsCard input[type="email"]:hover,
#editOptionsCard input[type="url"]:hover,
#editOptionsCard select:hover {
  border-color: #9ca3af;
}

/* Button hover animations */
#editOptionsCard button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbar for the panel */
#editOptionsCard {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

#editOptionsCard::-webkit-scrollbar {
  width: 6px;
}

#editOptionsCard::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

#editOptionsCard::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

#editOptionsCard::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Enhanced button states */
.move-btn.activated {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

.move-btn.activated svg g {
  stroke: #ffffff !important;
}

/* Enhanced section dividers */
#editOptionsCard > div + div {
  border-top: 1px solid rgba(226, 232, 240, 0.3);
  margin-top: 0;
}

/* Animation for panel entrance */
#editOptionsCard.visible {
  animation: slideInPanel 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInPanel {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Typography consistency */
#editOptionsCard h1,
#editOptionsCard h2,
#editOptionsCard h3,
#editOptionsCard h4,
#editOptionsCard h5,
#editOptionsCard h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.025em;
}

#editOptionsCard p,
#editOptionsCard span,
#editOptionsCard div,
#editOptionsCard label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Loading state for buttons */
.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Disabled state styling */
#editOptionsCard input:disabled,
#editOptionsCard select:disabled,
#editOptionsCard button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f9fafb;
}

/* Error state styling */
#editOptionsCard .error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Success state styling */
#editOptionsCard .success {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  #editOptionsCard {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.5);
    color: #f1f5f9;
  }
  
  #editOptionsCard h1,
  #editOptionsCard h2,
  #editOptionsCard h3,
  #editOptionsCard h4,
  #editOptionsCard h5,
  #editOptionsCard h6 {
    color: #f1f5f9;
  }
  
  #editOptionsCard input,
  #editOptionsCard select,
  #editOptionsCard textarea {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
  }
}