/* ============================================================================
 * RotaOne — UI Toast 2030 (v2.0)
 * Caminho: /public_html/app/assets/css/ui-toast.css
 * Compatível com ui-toast.js (RotaOneToast)
 *
 * Depende de:
 *   - ui-tokens.css (cores, radius, sombras, tipografia)
 *
 * Filosofia 2030:
 *   - Toast em pílula, discreto, sem ocupar a tela.
 *   - Usa sempre tokens (brand/success/danger) para integrar com o tema.
 *   - Animação suave, respeitando prefers-reduced-motion.
 * ========================================================================== */

/* Contêiner fixo dos toasts */
#toast-root {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none; /* não bloquear cliques no resto da UI */
}

/* Toast base */
.ro-toast {
  min-width: 260px;
  max-width: 380px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;

  border-radius: var(--rota-radius-pill, 999px);

  font-size: var(--rota-font-size-sm, 0.82rem);
  line-height: 1.35;
  color: var(--rota-color-text-on-solid, #f9fafb);

  /* fallback neutro escuro com token */
  background: var(--rota-color-bg-elevated-dark, #0f172a);

  box-shadow:
    var(--rota-shadow-strong,
      0 14px 35px rgba(15, 23, 42, 0.7)),
    0 0 0 1px rgba(15, 23, 42, 0.9);

  opacity: 0;
  transform: translateY(8px) translateX(4px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;

  pointer-events: auto; /* botão X continua clicável */
}

/* Estado visível (adicionado pelo JS) */
.ro-toast.show {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

/* ============================================================================
   1) Variações por tipo (usando tokens Rotary / RotaOne)
   ========================================================================== */

.ro-toast.ok {
  background: var(--rota-color-success, #16a34a);
  box-shadow:
    0 14px 35px rgba(34, 197, 94, 0.32),
    0 0 0 1px rgba(21, 128, 61, 0.9);
}

.ro-toast.err {
  background: var(--rota-color-danger, #e02927);
  box-shadow:
    0 14px 35px rgba(248, 113, 113, 0.35),
    0 0 0 1px rgba(185, 28, 28, 0.9);
}

.ro-toast.info {
  background: var(--rota-color-brand, #17458F);
  box-shadow:
    0 14px 35px rgba(59, 130, 246, 0.35),
    0 0 0 1px rgba(30, 64, 175, 0.95);
}

/* ============================================================================
   2) Ícone, texto, botão fechar
   ========================================================================== */

/* Ícone circular à esquerda */
.ro-t-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.22);
  color: inherit;
}

/* Texto */
.ro-t-text {
  flex: 1 1 auto;
  white-space: normal;
}

/* Botão X */
.ro-t-close {
  flex: 0 0 auto;
  margin-left: 4px;
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 999px;
  opacity: 0.85;
  transition:
    background 0.12s ease,
    opacity 0.12s ease,
    transform 0.08s ease;
}

.ro-t-close:hover {
  opacity: 1;
  background: rgba(15, 23, 42, 0.18);
  transform: scale(1.05);
}

.ro-t-close:active {
  transform: scale(0.96);
}

/* ============================================================================
   3) Versão mobile — ocupa quase a largura toda
   ========================================================================== */

@media (max-width: 640px) {
  #toast-root {
    left: 8px;
    right: 8px;
    bottom: 10px;
    align-items: stretch;
  }

  .ro-toast {
    width: 100%;
    max-width: none;
    border-radius: 14px;
  }
}

/* ============================================================================
   4) Respeitar usuários com movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ro-toast {
    transition: none !important;
    transform: translateY(0) translateX(0) !important;
  }
}