/* ============================================================
   Vandelay Companies — Alerts and Toasts
   Active only inside .vc-design-context.

   Note: page-header.css already restyles Bootstrap `.alert-*`
   classes for messages framework compatibility. The classes below
   are the canonical .vc-* design-system equivalents that new code
   should use directly.
   ============================================================ */

/* ── Alert (inline / banner) ─────────────────────────────── */
.vc-design-context .vc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--vc-space-3);
  padding: var(--vc-space-3) var(--vc-space-4);
  font-family: var(--vc-sans);
  font-size: 13.5px;
  border: 1px solid transparent;
  border-radius: var(--vc-r-md);
  background: var(--vc-paper-2);
  color: var(--vc-ink);
  border-color: var(--vc-rule);
}

.vc-design-context .vc-alert__icon {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
  margin-top: 1px;
}

.vc-design-context .vc-alert__body {
  flex: 1;
  min-width: 0;
}

.vc-design-context .vc-alert__title {
  font-weight: 600;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.vc-design-context .vc-alert__text {
  margin: 0;
  color: var(--vc-ink-2);
}

.vc-design-context .vc-alert__close {
  background: transparent;
  border: 0;
  color: var(--vc-ink-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px;
  border-radius: var(--vc-r-sm);
}
.vc-design-context .vc-alert__close:hover { background: rgba(0,0,0,0.04); color: var(--vc-ink); }

/* Variants */
.vc-design-context .vc-alert--success {
  background: var(--vc-positive-soft);
  border-color: var(--vc-positive);
}
.vc-design-context .vc-alert--success .vc-alert__icon { color: var(--vc-positive); }

.vc-design-context .vc-alert--warning {
  background: var(--vc-warning-soft);
  border-color: var(--vc-warning);
}
.vc-design-context .vc-alert--warning .vc-alert__icon { color: var(--vc-warning); }

.vc-design-context .vc-alert--error,
.vc-design-context .vc-alert--danger {
  background: var(--vc-negative-soft);
  border-color: var(--vc-negative);
}
.vc-design-context .vc-alert--error .vc-alert__icon,
.vc-design-context .vc-alert--danger .vc-alert__icon { color: var(--vc-negative); }

.vc-design-context .vc-alert--info {
  background: var(--vc-navy-tint);
  border-color: var(--vc-navy-soft);
}
.vc-design-context .vc-alert--info .vc-alert__icon { color: var(--vc-navy); }

/* ── Toast (top-right notification) ──────────────────────── */
.vc-design-context .vc-toast-stack {
  position: fixed;
  top: var(--vc-space-4);
  right: var(--vc-space-4);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-2);
  pointer-events: none;
  max-width: 360px;
}

.vc-design-context .vc-toast {
  pointer-events: auto;
  background: var(--vc-surface);
  border: 1px solid var(--vc-rule);
  border-left: 3px solid var(--vc-navy);
  border-radius: var(--vc-r-md);
  padding: var(--vc-space-3) var(--vc-space-4);
  box-shadow: var(--vc-shadow-lg);
  font-family: var(--vc-sans);
  font-size: 13px;
  color: var(--vc-ink);
  display: flex;
  align-items: flex-start;
  gap: var(--vc-space-2);
  animation: vc-toast-in 0.18s ease-out;
}

.vc-design-context .vc-toast--success { border-left-color: var(--vc-positive); }
.vc-design-context .vc-toast--warning { border-left-color: var(--vc-warning); }
.vc-design-context .vc-toast--error,
.vc-design-context .vc-toast--danger  { border-left-color: var(--vc-negative); }
.vc-design-context .vc-toast--info    { border-left-color: var(--vc-navy); }

@keyframes vc-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}