/* Voyager Notification System Styles */

/* Container principale per i toast */
.toast-container {
  z-index: 1060; /* Sopra i modal Bootstrap */
  max-width: 350px;
}

/* Stili base per i toast Voyager */
.toast {
  backdrop-filter: blur(8px);
  background-color: rgba(13, 17, 23, 0.95); /* Dark theme Voyager */
  border: 1px solid;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
  min-width: 300px;
}

/* Header del toast */
.toast-header {
  background-color: rgba(13, 17, 23, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0f6fc;
}

/* Body del toast */
.toast-body {
  color: #f0f6fc;
  background-color: rgba(13, 17, 23, 0.95);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Varianti colore per diversi tipi */
.toast.border-success {
  border-color: #238636 !important;
}

.toast.border-success .toast-header {
  border-bottom-color: rgba(35, 134, 54, 0.3);
}

.toast.border-danger {
  border-color: #da3633 !important;
}

.toast.border-danger .toast-header {
  border-bottom-color: rgba(218, 54, 51, 0.3);
}

.toast.border-warning {
  border-color: #fb8500 !important;
}

.toast.border-warning .toast-header {
  border-bottom-color: rgba(251, 133, 0, 0.3);
}

.toast.border-info {
  border-color: #1f6feb !important;
}

.toast.border-info .toast-header {
  border-bottom-color: rgba(31, 111, 235, 0.3);
}

/* Toast critico - styling speciale */
.toast.bg-danger {
  background-color: rgba(218, 54, 51, 0.95) !important;
  border-color: #da3633 !important;
}

.toast.bg-danger .toast-header {
  background-color: rgba(218, 54, 51, 1) !important;
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.toast.bg-danger .toast-body {
  background-color: rgba(218, 54, 51, 0.95) !important;
}

/* Animazioni di entrata/uscita */
.toast.showing {
  animation: toastSlideIn 0.3s ease-out;
}

.toast.hiding {
  animation: toastSlideOut 0.3s ease-in;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Icone colorate nei toast */
.text-success {
  color: #3fb950 !important;
}

.text-danger {
  color: #f85149 !important;
}

.text-warning {
  color: #fb8500 !important;
}

.text-info {
  color: #58a6ff !important;
}

/* Hover effects per interattività */
.toast:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

/* Responsive per schermi piccoli */
@media (max-width: 576px) {
  .toast-container {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none;
  }
  
  .toast {
    min-width: auto;
    width: 100%;
  }
}

/* Integrazione con il tema scuro di Voyager */
[data-bs-theme="dark"] .toast {
  --bs-toast-bg: rgba(13, 17, 23, 0.95);
  --bs-toast-border-color: rgba(255, 255, 255, 0.1);
  --bs-toast-header-bg: rgba(13, 17, 23, 0.98);
  --bs-toast-header-border-color: rgba(255, 255, 255, 0.1);
  --bs-toast-color: #f0f6fc;
}

/* Pulsante di chiusura personalizzato */
.toast .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.7;
}

.toast .btn-close:hover {
  opacity: 1;
}

/* Stili per toast persistenti (critici) */
.toast.persistent {
  animation: pulseAttention 2s infinite;
}

@keyframes pulseAttention {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(218, 54, 51, 0.3);
  }
  50% {
    box-shadow: 0 8px 32px rgba(218, 54, 51, 0.6);
  }
}

/* Indicatore di progresso per toast temporizzati */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
  animation: progressBar linear;
}

/* Progress bar per toast con timer */
.toast.border-success .toast-progress {
  background: linear-gradient(90deg, transparent, #238636);
}

.toast.border-danger .toast-progress {
  background: linear-gradient(90deg, transparent, #da3633);
}

.toast.border-warning .toast-progress {
  background: linear-gradient(90deg, transparent, #fb8500);
}

.toast.border-info .toast-progress {
  background: linear-gradient(90deg, transparent, #1f6feb);
}

@keyframes progressBar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}