/* Estilos para notificações */
.notification-item {
  transition: all 0.3s ease;
}

.notification-item.notification-read {
  opacity: 0.75;
}

/* Animação para remoção de notificação */
.notification-item.removing {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0;
}

/* =====================
  Toasts – Tema & Layout
===================== */
.toast-container {
  max-width: 420px;
  z-index: 1090;
  pointer-events: none;
  /* não bloqueia cliques do app */
}

.toast-container .toast {
  pointer-events: auto;
}

.toast {
  --radius: 14px;
  --pad-x: 14px;
  --pad-y: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .18);

  border: 0 !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow) !important;
  margin-bottom: .875rem;
  background: var(--tone-bg, #0ea5e9);
  /* fallback */
  color: var(--tone-fg, #fff);
  transform: translateY(10px) translateX(10px);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease, box-shadow .2s ease;
  position: relative;
  isolation: isolate;
  /* para pseudo-elements */
}

.toast.show {
  opacity: 1;
  transform: none;
}

.toast.hide,
.toast.fade:not(.show) {
  opacity: 0;
}

/* Header claro + corpo colorido */
.toast .toast-header {
  background: var(--tone-soft, #e0f2fe);
  color: var(--tone-heading, #0c4a6e);
  border: 0;
  padding: var(--pad-y) calc(var(--pad-x) + 4px);
  align-items: center;
}

.toast .toast-body {
  background: var(--tone-bg, #0ea5e9);
  color: var(--tone-fg, #fff);
  padding: var(--pad-y) calc(var(--pad-x) + 4px) calc(var(--pad-y) + 6px);
}

/* Ícone em círculo no header */
.toast .lead-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  margin-right: .5rem;
  background: var(--tone-accent, rgba(255, 255, 255, .25));
  color: var(--tone-icon, currentColor);
  flex: 0 0 28px;
}

/* Botão fechar com acessibilidade visual */
.toast .btn-close {
  opacity: .6;
}

.toast .btn-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .15);
  border-radius: 6px;
}

/* Barra de progresso (auto-dismiss) */
.toast .toast-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgba(255, 255, 255, .6);
  transform-origin: left center;
  animation-name: toast-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  /* ficar em 0 ao terminar */
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* Ornamentação: cantos arredondados com "dobradinha" no canto sup-esq */
.toast .toast-header::before {
  content: '';
  position: absolute;
  inset: -14px auto auto -14px;
  width: 36px;
  height: 36px;
  background: radial-gradient(circle at 70% 70%, var(--tone-soft) 0 60%, transparent 62%);
  opacity: .9;
  pointer-events: none;
}

/* Variantes (cores) */
.toast.theme-info {
  --tone-bg: #0ea5e9;
  /* sky-500 */
  --tone-soft: #e0f2fe;
  /* sky-100 */
  --tone-fg: #ffffff;
  --tone-heading: #0c4a6e;
  /* slate para header */
  --tone-accent: rgba(255, 255, 255, .4);
}

.toast.theme-success {
  --tone-bg: #22c55e;
  /* green-500 */
  --tone-soft: #ecfdf5;
  /* emerald-50 */
  --tone-fg: #ffffff;
  --tone-heading: #065f46;
  --tone-accent: rgba(255, 255, 255, .35);
}

.toast.theme-warning {
  --tone-bg: #f59e0b;
  /* amber-500 */
  --tone-soft: #fef3c7;
  /* amber-100 */
  --tone-fg: #111827;
  /* preto p/ contraste */
  --tone-heading: #78350f;
  --tone-accent: rgba(0, 0, 0, .25);
}

.toast.theme-danger {
  --tone-bg: #ef4444;
  /* red-500 */
  --tone-soft: #fee2e2;
  /* red-200 */
  --tone-fg: #ffffff;
  --tone-heading: #7f1d1d;
  --tone-accent: rgba(255, 255, 255, .35);
}

/* Estado ao passar o mouse */
.toast:hover {
  box-shadow: 0 12px 38px rgba(0, 0, 0, .22) !important;
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }

  .toast .toast-progress {
    display: none;
  }
}

/* Tipografia e listas do corpo */
.toast-body ul {
  margin: 0;
  padding-left: 1.1rem;
}

.toast-body li {
  margin: .125rem 0;
}