/* Toast-meldingen (F3.9, components/toast.js): korte meldingen onder in beeld
   die vanzelf verdwijnen, met optionele actieknop. Huisstijl: vlak, volledige
   1px-rand + lichte schaduw (geen accentbalk); het soort kleurt alleen het icoon. */

.toast-vlak {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 120; /* boven de modals (mail-modal 80, bevestigmodal 100) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: min(560px, calc(100vw - 32px));
  pointer-events: none; /* de houder vangt geen klikken; de toasts zelf wel */
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 9px 10px 9px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: .85rem;
  color: var(--ink-900);
  animation: toast-in .18s ease-out;
}
.toast--weg {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

.toast svg { width: 16px; height: 16px; }
.toast__ico { flex: 0 0 auto; }
.toast--info .toast__ico { color: var(--blue-700); }
.toast--succes .toast__ico { color: var(--ok); }
.toast--fout .toast__ico { color: var(--err); }

.toast__tekst { flex: 1 1 auto; min-width: 0; }

.toast__actie {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--blue-700);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.toast__actie:hover { background: var(--bg-50); text-decoration: underline; }

.toast__sluit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
}
.toast__sluit:hover { background: var(--bg-50); color: var(--ink-900); }
.toast__sluit svg { width: 14px; height: 14px; }

/* ---- Rijke kaartvariant (agenda-herinnering, F6.39) -------------------------
   Een melding met een titel + metaregel en meerdere acties is geen strook maar
   een klein kaartje: icoon + titel/meta bovenin (koprij), de acties op een eigen
   rij eronder. components/toast.js zet .toast--kaart aan zodra er een titel is of
   meer dan een actie; de gewone strook hierboven blijft ongewijzigd. De primaire
   actie valt terug op de globale gouden knop (.btn-actie--primair, base.css); de
   overige blijven de rustige .toast__actie, hier gedempt zodat de hoofdactie
   eruit springt. Vaste breedte zodat het kaartje niet met de titellengte meebeweegt. */
.toast--kaart {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "ico body sluit"
    ".   acties acties";
  align-items: start;
  gap: 2px 12px;
  width: 400px;
  max-width: 100%;
  padding: 13px 13px 11px 15px;
}
.toast--kaart .toast__ico { grid-area: ico; margin-top: 2px; }
.toast--kaart .toast__ico svg { width: 18px; height: 18px; }

.toast__body { grid-area: body; min-width: 0; }
.toast__titel {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--ink-900);
}
.toast__meta {
  margin-top: 3px;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--muted);
}
.toast__meta b { color: var(--blue-700); font-weight: 600; }

.toast--kaart .toast__sluit { grid-area: sluit; margin: -2px -2px 0 0; }

.toast__acties {
  grid-area: acties;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.toast--kaart .toast__acties .toast__actie { color: var(--muted); }
.toast--kaart .toast__acties .toast__actie:hover { color: var(--ink-900); }

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