/* 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: grid;
  width: var(--toast-width);
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  --toast-accent: var(--toast-info);
  --toast-soft: var(--toast-info-soft);
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 26%, var(--toast-border));
  border-radius: var(--toast-radius);
  background: var(--toast-surface);
  box-shadow: var(--toast-shadow);
  color: var(--toast-foreground);
  font-size: 0.84rem;
  line-height: 1.45;
  pointer-events: auto;
  transform: translateY(0);
  animation: toast-enter 180ms ease-out;
}

.toast.is-dismissing {
  animation: toast-exit 180ms ease-in forwards;
}

.toast__content {
  border-left: 4px solid var(--toast-accent);
  background: linear-gradient(90deg, var(--toast-soft), var(--toast-surface) 42%);
  padding: 0.875rem 3rem 0.875rem 1rem;
  white-space: pre-line;
}

.toast__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--toast-foreground);
  background: transparent;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.toast__close:hover {
  background: color-mix(in srgb, var(--toast-accent) 12%, transparent);
}

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

.toast__progress {
  height: 3px;
  background: var(--toast-muted-strong);
}

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

.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: translate(0.5rem, -0.25rem);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes toast-exit {
  to {
    opacity: 0;
    transform: translate(0.5rem, -0.25rem);
  }
}

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

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