/* Shared by TDT and classic pages. Fallbacks preserve the classic light theme;
   TDT pages resolve theme tokens, including dark mode. */
.tdt-toast {
  background: var(--tdt-surface, #ffffff);
  border: 1px solid var(--tdt-border, #d9dde3);
  border-radius: var(--tdt-radius, 10px);
  box-shadow: var(--tdt-shadow-lg, 0 8px 24px rgba(15, 23, 42, 0.16));
  padding: 0.85rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 320px;
  max-width: 400px;
}
.tdt-toast-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--tdt-radius-sm, 6px);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tdt-toast-icon .fa-solid, .tdt-toast-icon .fa-brands, .tdt-toast-icon .fa-regular,
.tdt-toast-icon .fas, .tdt-toast-icon .far { font-size: 16px; }
.tdt-toast-icon.is-success { background: var(--tdt-create-100, #d6f0dd); color: var(--tdt-create, #28a745); }
.tdt-toast-icon.is-danger  { background: var(--tdt-danger-100, #fbdcdf); color: var(--tdt-danger, #dc3545); }
.tdt-toast-icon.is-info    { background: var(--tdt-action-100, #d6e6ff); color: var(--tdt-action, #0d6efd); }
.tdt-toast-icon.is-warning { background: var(--tdt-warning-100, #fff3cd); color: var(--tdt-warning, #b58100); }
.tdt-toast-body { flex: 1; }
.tdt-toast-title { font-weight: 600; font-size: 0.9rem; }
.tdt-toast-desc { color: var(--tdt-text-muted, #5f6774); font-size: 0.82rem; }
/* Toast stack: TdtToast.js appends transient toasts here (bottom-right,
   slide-up entrance, auto-dismiss) */
.tdt-toast-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tdt-toast-stack .tdt-toast {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.tdt-toast-stack .tdt-toast.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tdt-toast-stack .tdt-toast { transition: none; transform: none; }
}
/* The dismiss button borrows the TDT modal-close look; scoped duplicate so
   classic pages (no tdt-components.css) style it too */
.tdt-toast .tdt-modal-close {
  background: none;
  border: 0;
  color: var(--tdt-text-muted, #5f6774);
  padding: 0.2rem;
  border-radius: var(--tdt-radius-sm, 6px);
}
.tdt-toast .tdt-modal-close:hover {
  background: var(--tdt-surface-alt, #f1f3f6);
  color: var(--tdt-text, #1c2128);
}