/* Flash leve (ver app/javascript/controllers/toast_controller.js) --
   substitui o banner de página inteira que empurrava o conteúdo. */
#toast-container {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  pointer-events: none;
}

.toast-message {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 28rem;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: #fff;
  font-size: var(--text-sm);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-message span {
  flex: 1;
}

.toast-message button {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  opacity: 0.8;
  padding: 0 var(--space-1);
}

.toast-message button:hover {
  opacity: 1;
}

.toast-message.toast-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

/* Fundo escuro fixo nos dois temas: o texto é branco, então o fundo não pode
   clarear no tema escuro (contraste 5,1:1 e 6,6:1). */
.toast-success {
  background: var(--brand-hero-from);
}

.toast-danger {
  background: var(--brand-danger);
}