/* Shared popup backdrop styling for consistent appearance across the app */
.popup-backdrop {
  z-index: 11000 !important; /* Ensure proper stacking order */
  cursor: pointer !important;
  backdrop-filter: blur(6px) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transition: opacity 300ms !important;
  pointer-events: auto !important; /* Make sure clicks are registered */
}

/* Hide the backdrop when no popups are open */
.popup-backdrop:not(.backdrop-in) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure all popups have proper z-index to appear above backdrop */
.popup {
  z-index: 12000 !important;
}


/* Classes-specific popup styles */
.popup[id$="-popup"]:not(#profile-popup):not(#progress-tracker-popup) {
  /* Keep the specific styling for classes popups */
  top: 80px;
  bottom: 90px;
  border-radius: 8px;
  overflow: auto;
}

/* Progress tracker specific styles */
#progress-tracker-popup {
  /* Make sure these values override any others */
  width: 85% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
}