/**
 * Modal Popup Fixes
 * Improves backdrop blur, visibility, and professional appearance
 */

/* Enhanced backdrop with better blur */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.modal-backdrop.hidden {
  display: none !important;
}

.modal-backdrop:not(.hidden) {
  display: flex !important;
}

/* Improved modal shadow and animation */
.modal,
[data-app-modal-panel] .card {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: center center;
}

/* Better modal animation */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Ensure modals with inline styles also get proper backdrop */
[id$="-modal"],
[id*="-modal-"] {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Fix for modals that use flex display */
[id$="-modal"]:not(.hidden),
[id*="-modal-"]:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure modal panels are properly centered and visible */
[data-app-modal-panel] {
  position: relative;
  z-index: 1050;
}

/* Dark mode support for modal backdrop */
html.dark .modal-backdrop,
html.dark [id$="-modal"],
html.dark [id*="-modal-"] {
  background: rgba(0, 0, 0, 0.85) !important;
}