/* ============================================================
   APEX POS — Toast Notifications
   ============================================================ */

#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 99999;
  pointer-events: none;
}

[dir="rtl"] #toast-container {
  right: auto;
  left: var(--space-6);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #0f172a;
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 380px;
  pointer-events: all;
  animation: toastIn 300ms ease forwards;
  border-left: 4px solid #475569;
}

.toast.toast-success {
  border-left-color: var(--color-success);
}
.toast.toast-danger {
  border-left-color: var(--color-danger);
}
.toast.toast-warning {
  border-left-color: var(--color-warning);
}
.toast.toast-info {
  border-left-color: var(--color-info);
}

.toast-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.toast-body {
  flex: 1;
}
.toast-title {
  font-weight: var(--font-semi);
  font-size: var(--text-sm);
  margin-bottom: 2px;
}
.toast-msg {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.75);
}

.toast.removing {
  animation: toastOut 300ms ease forwards;
}

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

[dir="rtl"] .toast {
  border-left: none;
  border-right: 4px solid #475569;
}
[dir="rtl"] .toast.toast-success {
  border-right-color: var(--color-success);
}
[dir="rtl"] .toast.toast-danger {
  border-right-color: var(--color-danger);
}
[dir="rtl"] .toast.toast-warning {
  border-right-color: var(--color-warning);
}
[dir="rtl"] .toast.toast-info {
  border-right-color: var(--color-info);
}