/* Toast styles for eNOTF pages (mirrors admin.scss toast styles) */
/* These pages use divi.scss instead of admin.scss, so toast styles must be duplicated here. */

#intra-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1080;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 380px;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #29282f;
  border: 1px solid #3d3a44;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: #bbbac1;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  transform: translateX(100%);
  opacity: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.toast-item.toast-visible {
  animation: toast-slide-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast-item.toast-dismissing {
  animation: toast-slide-out 0.25s ease-out forwards;
}

.toast-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.toast-msg {
  flex: 1;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: #818189;
  font-size: 1.1rem;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}

.toast-close:hover {
  color: #fff;
}

.toast-retry {
  background: none;
  border: 1px solid #818189;
  color: #818189;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.toast-retry:hover {
  color: #fff;
  border-color: #fff;
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0 0 0 10px;
  animation: toast-countdown linear forwards;
}

.toast-item.toast-success {
  border-left: 3px solid #3a7d44;
}
.toast-item.toast-success .toast-icon { color: #6abf76; }
.toast-item.toast-success .toast-progress { background: #3a7d44; }

.toast-item.toast-danger {
  border-left: 3px solid #b03a3a;
}
.toast-item.toast-danger .toast-icon { color: #d46b6b; }
.toast-item.toast-danger .toast-progress { background: #b03a3a; }

.toast-item.toast-warning {
  border-left: 3px solid #c49a2a;
}
.toast-item.toast-warning .toast-icon { color: #ddb84a; }
.toast-item.toast-warning .toast-progress { background: #c49a2a; }

.toast-item.toast-info {
  border-left: 3px solid #4a6fa5;
}
.toast-item.toast-info .toast-icon { color: #7ba3d4; }
.toast-item.toast-info .toast-progress { background: #4a6fa5; }

@keyframes toast-slide-in {
  from { transform: translateX(40px) scale(0.95); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes toast-slide-out {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to { transform: translateX(40px) scale(0.95); opacity: 0; }
}

@keyframes toast-countdown {
  from { width: 100%; }
  to { width: 0; }
}

@media (max-width: 767.98px) {
  #intra-toast-container {
    max-width: calc(100vw - 2rem);
    right: 1rem;
    left: 1rem;
    bottom: 1rem;
  }
}