/* Shared toast notifications for server-rendered Django messages. */

:root {
  --toast-duration: 4000ms;
  --toast-top: 1rem;
  --toast-right: 1rem;
  --toast-width: min(24rem, calc(100vw - 2rem));
  --toast-surface: #ffffff;
  --toast-foreground: #1f2333;
  --toast-border: #e4e7ee;
  --toast-muted-strong: #eef0f4;
  --toast-radius: 8px;
  --toast-shadow: 0 18px 45px rgba(20, 25, 50, 0.12);
  --toast-success: #0f7a52;
  --toast-success-soft: #dff3ea;
  --toast-warning: #946a14;
  --toast-warning-soft: #fbefd0;
  --toast-danger: #b83a42;
  --toast-danger-soft: #fbdddf;
  --toast-info: #546a8a;
  --toast-info-soft: #eef2f7;
}

.admin-body,
.admin-auth-body {
  --toast-top: calc(var(--admin-topbar-height, 3.9rem) + 0.75rem);
  --toast-surface: #ffffff;
  --toast-foreground: var(--admin-foreground, #1f2333);
  --toast-border: var(--admin-border, #e4e7ee);
  --toast-muted-strong: var(--admin-muted-strong, #eef0f4);
  --toast-radius: var(--admin-radius-card, 8px);
  --toast-shadow: var(--admin-shadow-popover, 0 18px 45px rgba(20, 25, 50, 0.12));
  --toast-success: var(--admin-success, #0f7a52);
  --toast-success-soft: var(--admin-success-soft, #dff3ea);
  --toast-warning: var(--admin-warning, #946a14);
  --toast-warning-soft: var(--admin-warning-soft, #fbefd0);
  --toast-danger: var(--admin-danger, #b83a42);
  --toast-danger-soft: var(--admin-danger-soft, #fbdddf);
  --toast-info: var(--admin-info, #546a8a);
  --toast-info-soft: var(--admin-info-soft, #eef2f7);
}

.user-body {
  --toast-top: 76px;
  --toast-surface: var(--surface, #ffffff);
  --toast-foreground: var(--ink-900, #1f2333);
  --toast-border: var(--border, #e4e7ee);
  --toast-muted-strong: var(--border-soft, #eef0f4);
  --toast-radius: var(--r-sm, 8px);
  --toast-shadow: var(--shadow-lg, 0 18px 45px rgba(20, 25, 50, 0.12));
  --toast-success: var(--success, #0f7a52);
  --toast-success-soft: var(--success-bg, #dff3ea);
  --toast-warning: var(--warn, #946a14);
  --toast-warning-soft: var(--warn-bg, #fbefd0);
  --toast-danger: var(--danger, #b83a42);
  --toast-danger-soft: var(--danger-bg, #fbdddf);
  --toast-info: var(--info, #546a8a);
  --toast-info-soft: var(--info-100, #eef2f7);
}

.toast-region {
  position: fixed;
  top: var(--toast-top);
  right: var(--toast-right);
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: var(--toast-width);
  pointer-events: none;
}

/* Spacing is each toast's own margin, so a dismissed one folds it away too. */
.toast {
  --toast-accent: var(--toast-info);
  --toast-soft: var(--toast-info-soft);
  --toast-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  flex: none;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border: 1px solid var(--toast-border);
  border-radius: var(--toast-radius);
  background: var(--toast-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.08);
  color: var(--toast-foreground);
  font-size: 0.8125rem;
  line-height: 1.45;
  pointer-events: auto;
  animation: toast-enter 420ms var(--toast-ease) both;
  transition:
    opacity 260ms ease,
    transform 360ms var(--toast-ease),
    height 360ms var(--toast-ease) 120ms,
    margin 360ms var(--toast-ease) 120ms,
    border-width 0s linear 480ms;
}

.toast.is-dismissing {
  /* The entrance animation would otherwise pin opacity and transform. */
  animation: none;
  margin-bottom: 0;
  opacity: 0;
  transform: translateX(0.75rem);
  border-width: 0;
  pointer-events: none;
}

/* A small accent dot names the level without a heavy coloured edge. */
.toast__content {
  position: relative;
  padding: 0.75rem 2.6rem 0.75rem 2rem;
  white-space: pre-line;
}

.toast__content::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0.95rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--toast-accent);
  box-shadow: 0 0 0 3px var(--toast-soft);
}

.toast__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: color-mix(in srgb, var(--toast-foreground) 55%, transparent);
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.toast__close:hover {
  color: var(--toast-foreground);
  background: var(--toast-muted-strong);
}

.toast__close:focus-visible {
  outline: 2px solid var(--toast-accent);
  outline-offset: 1px;
}

.toast__progress {
  height: 2px;
  background: transparent;
}

.toast__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--toast-accent);
  opacity: 0.35;
  transform-origin: left center;
  animation: toast-progress var(--toast-duration) linear forwards;
}

.toast:hover .toast__progress-bar {
  animation-play-state: paused;
}

.toast--success {
  --toast-accent: var(--toast-success);
  --toast-soft: var(--toast-success-soft);
}

.toast--error {
  --toast-accent: var(--toast-danger);
  --toast-soft: var(--toast-danger-soft);
}

.toast--warning {
  --toast-accent: var(--toast-warning);
  --toast-soft: var(--toast-warning-soft);
}

.toast--debug,
.toast--info {
  --toast-accent: var(--toast-info);
  --toast-soft: var(--toast-info-soft);
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-progress {
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-dismissing,
  .toast__progress-bar {
    animation: none;
    transition: opacity 200ms ease;
  }

  .toast.is-dismissing {
    transform: none;
  }
}