/**
 * Modal Components
 * Modal dialogs, overlays, and popup animations
 * Extracted from components.css for better organization
 */

/* ============================================================================
   MODAL ANIMATIONS
   ============================================================================ */

/**
 * Modal Animation System
 * Smooth modal entrance and exit animations
 */
.animate-modal-slide-in {
  animation: modal-slide-in 0.2s ease-out;
}

.animate-modal-slide-out {
  animation: modal-slide-out 0.2s ease-out;
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-slide-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
}

/* ============================================================================
   ENHANCED MODAL STYLING FROM CUSTOM.CSS
   ============================================================================ */

/* Enhanced modal backdrop */
.modal-backdrop {
  background: rgb(0 0 0 / 50%);
  backdrop-filter: blur(4px);
  transition: all var(--transition-base);
}

/* Enhanced modal styling */
.modal {
  background: white;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--color-gray-200);
  transform: scale(0.95);
  transition: all var(--transition-base);
}

.modal.show {
  transform: scale(1);
}

html.dark .modal {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

/* Modal fade effects */
.modal-fade-out {
  animation: fadeOut 0.3s ease-in-out;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ============================================================================
   MODAL RESPONSIVE BEHAVIOR
   ============================================================================ */

@media (width <= 640px) {
  .modal {
    margin: 1rem;
    border-radius: var(--border-radius-lg);
  }
}

/* ============================================================================
   MODAL ACCESSIBILITY
   ============================================================================ */

/* Modal focus management */
.modal:focus {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: -2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .modal {
    border: 3px solid currentColor;
  }

  .modal-backdrop {
    background: rgb(0 0 0 / 70%);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .modal {
    transition: none;
  }

  .modal-backdrop {
    transition: none;
  }

  .modal-fade-out {
    animation: none;
  }
}