/**
 * 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;
  }
}

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* ULTRA-AGGRESSIVE CONTRAST FIX - Override any remaining gray-800 text in dark mode */

/* NUCLEAR OPTION: Force white text on any element with gray-800 color in dark contexts */
html.dark *[style*="color: rgb(31, 41, 55)"],
body.dark *[style*="color: rgb(31, 41, 55)"],
.dark *[style*="color: rgb(31, 41, 55)"],
html.dark *[style*="color:rgb(31, 41, 55)"],
body.dark *[style*="color:rgb(31, 41, 55)"],
.dark *[style*="color:rgb(31, 41, 55)"],
html.dark *[style*="color: rgb(31,41,55)"],
body.dark *[style*="color: rgb(31,41,55)"],
.dark *[style*="color: rgb(31,41,55)"],
html.dark *[style*="color:rgb(31,41,55)"],
body.dark *[style*="color:rgb(31,41,55)"],
.dark *[style*="color:rgb(31,41,55)"] {
  color: #ffffff !important;
}

/* Cover computed styles that might result in gray-800 */