/* Toast Notification System */

/* Toast Container */
.toast-container {
   position: fixed;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 99999;
   pointer-events: none;
}

/* Individual Toast */
.toast {
   background: white;
   padding: 16px 24px;
   border-radius: 12px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 300px;
   max-width: 500px;
   pointer-events: auto;
   font-size: 14px;
   font-weight: 500;
   color: #334155;
   margin-bottom: 12px;
   animation: slideUp 0.3s ease forwards, slideDown 0.3s ease 3.7s forwards;
}

/* Toast animations */
@keyframes slideUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes slideDown {
   from {
      opacity: 1;
      transform: translateY(0);
   }
   to {
      opacity: 0;
      transform: translateY(20px);
   }
}

/* Toast Icon */
.toast-icon {
   font-size: 18px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
}

/* Toast Message */
.toast-message {
   flex: 1;
   line-height: 1.5;
}

/* Toast Close Button */
.toast-close {
   background: none;
   border: none;
   padding: 0;
   margin: 0;
   cursor: pointer;
   font-size: 16px;
   color: #94a3b8;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color 0.2s ease;
}

.toast-close:hover {
   color: #64748b;
}

/* Success Toast */
.toast.toast-success {
   border-left: 4px solid #10b981;
   background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
   color: #065f46;
}

.toast.toast-success .toast-icon {
   color: #10b981;
}

/* Error Toast */
.toast.toast-error {
   border-left: 4px solid #ef4444;
   background: linear-gradient(135deg, #fef2f2 0%, #fef1f1 100%);
   color: #7f1d1d;
}

.toast.toast-error .toast-icon {
   color: #ef4444;
}

/* Info Toast */
.toast.toast-info {
   border-left: 4px solid #3b82f6;
   background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%);
   color: #1e40af;
}

.toast.toast-info .toast-icon {
   color: #3b82f6;
}

/* Warning Toast */
.toast.toast-warning {
   border-left: 4px solid #f59e0b;
   background: linear-gradient(135deg, #fffbeb 0%, #fef9e7 100%);
   color: #78350f;
}

.toast.toast-warning .toast-icon {
   color: #f59e0b;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
   .toast {
      background: #1e293b;
      color: #e2e8f0;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
   }

   .toast.toast-success {
      background: linear-gradient(135deg, #064e3b 0%, #0d4437 100%);
      color: #d1fae5;
      border-left-color: #10b981;
   }

   .toast.toast-error {
      background: linear-gradient(135deg, #7f1d1d 0%, #6b1c1c 100%);
      color: #fecaca;
      border-left-color: #ef4444;
   }

   .toast.toast-info {
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
      color: #bfdbfe;
      border-left-color: #3b82f6;
   }

   .toast.toast-warning {
      background: linear-gradient(135deg, #78350f 0%, #5f2c0c 100%);
      color: #fde047;
      border-left-color: #f59e0b;
   }

   .toast-close {
      color: #64748b;
   }

   .toast-close:hover {
      color: #94a3b8;
   }
}

/* Responsive - Stack vertically on small screens */
@media (max-width: 576px) {
   .toast-container {
      bottom: 20px;
      left: 20px;
      right: 20px;
      transform: none;
   }

   .toast {
      min-width: auto;
      max-width: 100%;
      width: 100%;
   }
}

/* Inline Message Animations */
@keyframes fadeOut {
   from {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
   to {
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
   }
}

/* Inline message with auto-fade */
.inline-message-fade-out {
   animation: fadeOut 0.4s ease forwards !important;
}