/* Flash messages styling */

.flash {
  @apply rounded-md p-4 mb-4 shadow-md flex items-start relative pointer-events-auto;
  @apply transition-opacity duration-300 opacity-100;
  @apply text-base;
}

/* High contrast flash messages for better accessibility */
.flash-success {
  @apply bg-green-100 border-2 border-green-600 text-green-900;
}

.flash-error {
  @apply bg-red-100 border-2 border-red-600 text-red-900;
}

.flash-info {
  @apply bg-blue-100 border-2 border-blue-600 text-blue-900;
}

.flash-warning {
  @apply bg-amber-100 border-2 border-amber-600 text-amber-900;
}

.flash-icon {
  @apply flex-shrink-0 h-5 w-5;
}

.flash-success .flash-icon {
  @apply text-green-700;
}

.flash-error .flash-icon {
  @apply text-red-700;
}

.flash-info .flash-icon {
  @apply text-blue-700;
}

.flash-warning .flash-icon {
  @apply text-amber-700;
}

.flash-content {
  @apply ml-3 flex-1;
}

.flash-message {
  @apply text-base font-medium;
}

.flash-success .flash-message {
  @apply text-green-900;
}

.flash-error .flash-message {
  @apply text-red-900;
}

.flash-info .flash-message {
  @apply text-blue-900;
}

.flash-warning .flash-message {
  @apply text-amber-900;
}

.flash-dismiss {
  @apply ml-auto pl-3 -mr-1 -mt-1;
}

.flash-dismiss-button {
  @apply inline-flex p-1.5 text-gray-700 bg-white border border-gray-300 rounded-full hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300;
}

/* For login page */
.login-flash-container {
  @apply relative w-full max-w-md mb-4;
}

/* Flash container positioning */
.flash-container {
  @apply fixed top-4 right-4 left-4 sm:top-6 sm:right-6 sm:left-auto sm:max-w-sm z-50 flex flex-col gap-2 pointer-events-none;
}

.flash-container-local {
  @apply relative my-4 flex flex-col gap-2;
}

/* Animation */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.flash {
  animation: slideIn 0.3s ease-out;
}