/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Flash Message Popover Styles */

/* Base popover styles - hidden by default */
.flash-popover {
  position: fixed;
  top: 1rem;
  right: 1rem;
  left: auto;
  bottom: auto;
  min-width: 320px;
  max-width: 480px;
  padding: 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: none;
  margin: 0;
  z-index: 9999;
  inset: unset;
}

/* Override popover default centering */
[popover].flash-popover {
  position: fixed;
  inset: unset;
  top: 1rem;
  right: 1rem;
  margin: 0;
}

/* Notice (success) styling */
.flash-notice {
  background-color: rgb(240 253 244); /* green-50 */
  border: 1px solid rgb(34 197 94); /* green-500 */
}

/* Alert (warning) styling */
.flash-alert {
  background-color: rgb(254 252 232); /* yellow-50 */
  border: 1px solid rgb(234 179 8); /* yellow-500 */
}

/* Entrance animation */
.flash-enter {
  animation: flash-slide-in 0.3s ease-out;
}

@keyframes flash-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Exit animation */
.flash-exit {
  animation: flash-slide-out 0.2s ease-in;
}

@keyframes flash-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Stacking for multiple messages - each subsequent message appears below the previous */
.flash-popover:nth-of-type(2) {
  top: 6rem;
}

.flash-popover:nth-of-type(3) {
  top: 11rem;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .flash-popover,
  [popover].flash-popover {
    top: 5rem !important;
    right: 0.5rem !important;
    left: auto !important;
    min-width: 280px;
    max-width: calc(100vw - 1rem);
  }

  .flash-popover:nth-of-type(2) {
    top: 10rem !important;
  }

  .flash-popover:nth-of-type(3) {
    top: 15rem !important;
  }
}

/* Ensure popover displays when shown */
.flash-popover:popover-open {
  display: block;
}