/**
 * Global Alert Styles
 * Ensures alerts appear above all modals and overlays
 */

/* Base alert styles with higher z-index */
.alert-floating,
.alert-floating-error,
.toast,
.toast-container {
  z-index: 20000 !important; /* Higher than any modal/overlay */
}

/* Ensure alerts are positioned correctly on mobile */
@media (max-width: 768px) {
  .alert-floating,
  .alert-floating-error {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 20000 !important;
  }
  
  /* Bootstrap toasts on mobile */
  .toast-container {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    z-index: 20000 !important;
  }
  
  .toast {
    margin: 0 !important;
    width: 100% !important;
  }
}

/* Ensure alerts stay visible when modals are open */
.modal-open .alert-floating,
.modal-open .alert-floating-error,
.modal-open .toast-container {
  z-index: 20000 !important;
}

/* Mobile-specific alert positioning */
.alert-mobile {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Specific overrides for known high z-index elements */
.first-story-modal ~ .alert-floating,
.first-story-modal ~ .alert-floating-error,
.sidebar-overlay.active ~ .alert-floating,
.sidebar-overlay.active ~ .alert-floating-error {
  z-index: 20000 !important;
}

/* Alert animations should work above modals */
@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.alert-floating.show,
.alert-floating-error.show {
  animation: slideInFromTop 0.3s ease-out;
}

/* Ensure proper stacking context */
body > .alert-floating,
body > .alert-floating-error,
body > .toast-container {
  position: fixed !important;
  z-index: 20000 !important;
}

/* For alerts inside modal bodies, position them at the top */
.modal-body .alert {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 1rem;
}

/* Character edit modal specific alerts */
.character-edit-modal .alert,
.profile-edit-overlay .alert {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  margin: 0 0 1rem 0 !important;
}