/* Toast Notification Styles */

@keyframes cs-toast-in {
  0% {
    opacity: 0;
    transform: translateX(40px) rotate(4deg);
  }
  70% {
    opacity: 1;
    transform: translateX(-4px) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes cs-toast-out {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(40px) rotate(4deg);
  }
}

.cs-toast {
  animation: cs-toast-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  max-width: 420px;
  word-wrap: break-word;
  word-break: break-word;
}

.cs-toast-out {
  animation: cs-toast-out 0.3s ease-in-out forwards !important;
}

/* Color variants for different notification types */
.text-ok {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.bg-ok-soft {
  background-color: rgb(240 253 244 / 1);
}

.border-ok {
  border-color: rgb(34 197 94 / 1);
}

.text-err {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.bg-err-soft {
  background-color: rgb(254 242 242 / 1);
}

.border-err {
  border-color: rgb(220 38 38 / 1);
}

.text-warn {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.bg-warn-soft {
  background-color: rgb(254 252 231 / 1);
}

.border-warn {
  border-color: rgb(217 119 6 / 1);
}

.text-info {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.bg-info-soft {
  background-color: rgb(239 246 255 / 1);
}

.border-info {
  border-color: rgb(59 130 246 / 1);
}

/* Mobile responsive */
@media (max-width: 640px) {
  #toast-container {
    left: 12px !important;
    right: 12px !important;
  }

  .cs-toast {
    max-width: 100%;
  }
}

/* Confirmation Dialog Styles */

dialog.confirm-dialog {
  border: none;
  padding: 0;
  border-radius: 12px;
  background-color: #fff;
  max-width: 100%;
  overflow: visible;
}

dialog.confirm-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

dialog.confirm-dialog {
  animation: slideUp 0.3s ease-out;
}

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