/* =============================================
   TOAST NOTIFICATION SYSTEM
   Lightweight, mobile-friendly notifications
   ============================================= */

.toast-notification {
  position: fixed;
  bottom: 80px; /* Above FAB buttons on mobile */
  left: 50%;
  transform: translateX(-50%) translateY(100px);
}

/* Success toasts appear at TOP on ALL devices so they don't block reading */
.toast-success {
  bottom: auto !important;
  top: 20px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-100px) !important;
}

.toast-success.toast-visible {
  transform: translateX(-50%) translateY(0) !important;
}

/* Show toast animation */
.toast-notification.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

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

/* Toast message */
.toast-message {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

/* =============================================
   TOAST TYPES (Colors)
   ============================================= */

/* Info (default) - Blue */
.toast-info {
  background: rgba(37, 99, 235, 0.95); /* Blue */
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.toast-info .toast-icon {
  color: #93c5fd; /* Light blue */
}

/* Success - Green */
.toast-success {
  background: rgba(34, 197, 94, 0.95); /* Green */
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.toast-success .toast-icon {
  color: #86efac; /* Light green */
}

/* Warning - Orange */
.toast-warning {
  background: rgba(249, 115, 22, 0.95); /* Orange */
  border: 1px solid rgba(251, 146, 60, 0.3);
}

.toast-warning .toast-icon {
  color: #fed7aa; /* Light orange */
}

/* Error - Red */
.toast-error {
  background: rgba(239, 68, 68, 0.95); /* Red */
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.toast-error .toast-icon {
  color: #fca5a5; /* Light red */
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */

/* Mobile - Smaller, bottom position */
@media (max-width: 768px) {
  .toast-notification {
    bottom: 100px; /* Above mobile FABs */
    left: 1rem;
    right: 1rem;
    transform: translateY(100px);
    max-width: none;
    width: auto;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
  }

  .toast-notification.toast-visible {
    transform: translateY(0);
  }

  .toast-icon {
    font-size: 1.125rem;
  }
}

/* Tablet - Medium size */
@media (min-width: 769px) and (max-width: 1024px) {
  .toast-notification {
    bottom: 90px;
    max-width: 400px;
  }
}

/* Desktop - Centered, bottom */
@media (min-width: 1025px) {
  .toast-notification {
    bottom: 40px;
    max-width: 500px;
  }
}

/* =============================================
   DARK MODE SUPPORT
   ============================================= */

body.dark-mode .toast-info {
  background: rgba(30, 64, 175, 0.95); /* Darker blue */
}

body.dark-mode .toast-success {
  background: rgba(21, 128, 61, 0.95); /* Darker green */
}

body.dark-mode .toast-warning {
  background: rgba(194, 65, 12, 0.95); /* Darker orange */
}

body.dark-mode .toast-error {
  background: rgba(185, 28, 28, 0.95); /* Darker red */
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

/* High contrast mode */
@media (prefers-contrast: high) {
  .toast-notification {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toast-notification {
    transition: opacity 0.1s ease;
    transform: translateX(-50%) translateY(0);
  }

  .toast-notification.toast-visible {
    opacity: 1;
  }

  @media (max-width: 768px) {
    .toast-notification {
      transform: translateY(0);
    }
  }
}