/* =========================================================
   toast.css — DutchLine Toasts
   - Top-right stacked toasts
   - Same status colors as alerts
   - Progress bar timer (configurable)
   - Soft premium UI (no heavy gradients)
   ========================================================= */

:root{
  /* Fallbacks if theme-core not loaded (still prefer theme-core vars) */
  --dl-toast-z: 1990;
  --dl-toast-gap: 10px;
  --dl-toast-w: 380px;
  --dl-toast-w-sm: calc(100vw - 24px);
  --dl-toast-pad: 14px;
  --dl-toast-r: 18px;
}

/* Container */
.dl-toast-stack{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--dl-toast-z);
  width: min(var(--dl-toast-w), var(--dl-toast-w-sm));
  display: flex;
  flex-direction: column;
  gap: var(--dl-toast-gap);
  pointer-events: none; /* only toast itself clickable */
}

/* Toast base */
.dl-toast{
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--dl-toast-r);
  border: 1px solid var(--border);
  background: rgba(255,255,255);
  box-shadow: var(--shadow);
  padding: var(--dl-toast-pad);
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: start;

  transform: translateY(-6px);
  opacity: 0;
  animation: dlToastIn .22s ease forwards;
}

@keyframes dlToastIn{
  to { transform: translateY(0); opacity: 1; }
}

.dl-toast.is-leaving{
  animation: dlToastOut .16s ease forwards;
}
@keyframes dlToastOut{
  to { transform: translateY(-6px); opacity: 0; }
}

/* Icon */
.dl-toast-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: var(--ink);
  background: rgba(11,18,32,.06);
  border: 1px solid var(--border);
}

/* Content */
.dl-toast-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 1px 0 0;
}
.dl-toast-text{
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 0;
  font-size: .95rem;
}
.dl-toast-text a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(48,77,161,.22);
}
.dl-toast-text a:hover{
  border-bottom-color: rgba(48,77,161,.42);
}

/* Actions (optional) */
.dl-toast-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Close button */
.dl-toast-close{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  color: rgba(11,18,32,.78);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-weight: 950;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-toast-close:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

/* Topline (very DutchLine) */
.dl-toast::before{
  content:"";
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.72), rgba(128,160,208,.26), transparent);
  opacity: .85;
}

/* Progress bar */
.dl-toast-progress{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(11,18,32,.06);
}
.dl-toast-progress > span{
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform linear;
  background: var(--accent);
   
}

/* Status colors: same logic as alerts (soft) */
.dl-toast-success{
  border-color: rgba(32,201,151,.24);
  background: linear-gradient(180deg, rgba(32,201,151), rgba(255,255,255,.92));
}
.dl-toast-success .dl-toast-icon{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.22);
}
.dl-toast-success .dl-toast-progress > span{ background: rgba(32,201,151,.95); }

.dl-toast-info{
  border-color: rgba(13,110,253,.22);
  background: linear-gradient(180deg, rgba(13,110,253), rgba(255,255,255,.92));
}
.dl-toast-info .dl-toast-icon{
  background: rgba(13,110,253,.7);
  border-color: rgba(13,110,253,.18);
}
.dl-toast-info .dl-toast-progress > span{ background: rgba(13,110,253,.92); }

.dl-toast-warning{
  border-color: rgba(255,193,7,.24);
  background: linear-gradient(180deg, rgba(255,193,7), rgba(255,255,255,.92));
}
.dl-toast-warning .dl-toast-icon{
  background: rgba(255,193,7,.14);
  border-color: rgba(255,193,7,.22);
}
.dl-toast-warning .dl-toast-progress > span{ background: rgba(255,193,7,.95); }

.dl-toast-danger,
.dl-toast-error{
  border-color: rgba(255,77,77,.22);
  background: linear-gradient(180deg, rgba(255,77,77), rgba(255,255,255,.92));
}
.dl-toast-danger .dl-toast-icon,
.dl-toast-error .dl-toast-icon{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.20);
}
.dl-toast-danger .dl-toast-progress > span,
.dl-toast-error .dl-toast-progress > span{ background: rgba(255,77,77,.92); }

/* Neutral: calmer, no brand tint */
.dl-toast-neutral{
  border-color: var(--border);
  background: rgba(255,255,255,.92);
}
.dl-toast-neutral .dl-toast-icon{
  background: rgba(11,18,32,.06);
  border-color: var(--border);
}
.dl-toast-neutral .dl-toast-progress > span{ background: rgba(11,18,32,.45); }

/* Accent: DutchLine brand */
.dl-toast-accent{
  border-color: rgba(48,77,161,.22);
  background: linear-gradient(180deg, rgba(48,77,161), rgba(255,255,255,.92));
}
.dl-toast-accent .dl-toast-icon{
  background: rgba(48,77,161,.12);
  border-color: rgba(48,77,161,.18);
}
.dl-toast-accent .dl-toast-progress > span{ background: rgba(48,77,161,.95); }

/* Compact variant */
.dl-toast-compact{
  padding: 12px;
  grid-template-columns: 38px 1fr auto;
}
.dl-toast-compact .dl-toast-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
.dl-toast-compact .dl-toast-text{ margin-top: 4px; }

/* Confirm variant (no auto close unless you close) */
.dl-toast-confirm .dl-toast-progress{ display:none; }

/* Pause hint (when hovering) */
.dl-toast.is-paused .dl-toast-progress > span{
  opacity: .55;
}

/* Mobile: stack width full-ish */
@media (max-width: 575px){
  .dl-toast-stack{
    left: 12px;
    right: 12px;
    width: auto;
  }
}