/**
 * SISTEMA PROFISSIONAL DE NOTIFICAÇÕES (TOAST) - PORTAL GTI
 * Estilo corporativo moderno, discreto e minimalista.
 * Respeita as diretrizes de Motion Design e acessibilidade (WCAG + prefers-reduced-motion).
 */

:root {
  /* Parâmetros de Motion Design - Personalidade Corporativa */
  --toast-duration-enter: 240ms;
  --toast-duration-exit: 180ms;
  --toast-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); /* MD3 Decelerate */
  --toast-ease-exit: cubic-bezier(0.3, 0, 1, 1);        /* MD3 Accelerate */
  --toast-width: 456px;
  --toast-border-radius: 12px;
  --toast-z-index: 100000;

  /* Cores Semânticas Corporativas (Modo Claro) */
  --toast-bg-light: #ffffff;
  --toast-border-light: rgba(15, 23, 42, 0.08);
  --toast-shadow-light: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --toast-title-light: #0f172a;
  --toast-body-light: #475569;

  /* Cores Semânticas Corporativas (Modo Escuro) */
  --toast-bg-dark: #151f32;
  --toast-border-dark: rgba(255, 255, 255, 0.12);
  --toast-shadow-dark: 0 14px 28px -4px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --toast-title-dark: #f8fafc;
  --toast-body-dark: #cbd5e1;

  /* Acentos de Status */
  --toast-success: #10b981;
  --toast-error: #ef4444;
  --toast-warning: #f59e0b;
  --toast-info: #2563eb;
}

/* Container Flutuante Superior Direito */
.gti-toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: var(--toast-z-index);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: var(--toast-width);
  max-width: calc(100vw - 2.5rem);
  pointer-events: none; /* Não bloqueia cliques na página */
}

/* Item Toast */
.gti-toast {
  position: relative;
  pointer-events: auto; /* Permite interagir com o toast */
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background-color: var(--toast-bg-light);
  border: 1px solid var(--toast-border-light);
  border-left-width: 5px;
  border-radius: var(--toast-border-radius);
  box-shadow: var(--toast-shadow-light);
  font-family: var(--font-main, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
  color: var(--toast-body-light);
  box-sizing: border-box;
  overflow: hidden;
  will-change: transform, opacity;
  max-height: 280px;
}

/* Adaptação com tema escuro (suporta classe .dark e data-bs-theme="dark") */
html.dark .gti-toast,
[data-bs-theme="dark"] .gti-toast {
  background-color: var(--toast-bg-dark);
  border-color: var(--toast-border-dark);
  box-shadow: var(--toast-shadow-dark);
  color: var(--toast-body-dark);
}

/* Estados de Animação */
.gti-toast-entering {
  opacity: 0;
  transform: translate3d(20px, 0, 0) scale(0.98);
}

.gti-toast-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity var(--toast-duration-enter) var(--toast-ease-enter),
    transform var(--toast-duration-enter) var(--toast-ease-enter),
    max-height 200ms ease,
    margin 200ms ease,
    padding 200ms ease;
}

.gti-toast-exiting {
  opacity: 0;
  transform: translate3d(20px, 0, 0) scale(0.96);
  transition:
    opacity var(--toast-duration-exit) var(--toast-ease-exit),
    transform var(--toast-duration-exit) var(--toast-ease-exit);
}

.gti-toast-collapsing {
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  border-width: 0 !important;
  transition:
    max-height 180ms ease,
    margin 180ms ease,
    padding 180ms ease,
    border-width 180ms ease;
}

/* Ícone Semântico */
.gti-toast-icon-wrap {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.gti-toast-icon-wrap svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}

/* Tipos Semânticos: Sucesso */
.gti-toast-success {
  border-left-color: var(--toast-success);
}
.gti-toast-success .gti-toast-icon-wrap {
  color: #059669;
  background-color: #ecfdf5;
}
html.dark .gti-toast-success .gti-toast-icon-wrap,
[data-bs-theme="dark"] .gti-toast-success .gti-toast-icon-wrap {
  color: #34d399;
  background-color: rgba(16, 185, 129, 0.18);
}
.gti-toast-success .gti-toast-progress-bar {
  background-color: var(--toast-success);
}

/* Tipos Semânticos: Erro / Danger */
.gti-toast-error {
  border-left-color: var(--toast-error);
}
.gti-toast-error .gti-toast-icon-wrap {
  color: #dc2626;
  background-color: #fef2f2;
}
html.dark .gti-toast-error .gti-toast-icon-wrap,
[data-bs-theme="dark"] .gti-toast-error .gti-toast-icon-wrap {
  color: #f87171;
  background-color: rgba(239, 68, 68, 0.18);
}
.gti-toast-error .gti-toast-progress-bar {
  background-color: var(--toast-error);
}

/* Tipos Semânticos: Aviso / Warning */
.gti-toast-warning {
  border-left-color: var(--toast-warning);
}
.gti-toast-warning .gti-toast-icon-wrap {
  color: #d97706;
  background-color: #fffbeb;
}
html.dark .gti-toast-warning .gti-toast-icon-wrap,
[data-bs-theme="dark"] .gti-toast-warning .gti-toast-icon-wrap {
  color: #fbbf24;
  background-color: rgba(245, 158, 11, 0.18);
}
.gti-toast-warning .gti-toast-progress-bar {
  background-color: var(--toast-warning);
}

/* Tipos Semânticos: Informação / Info */
.gti-toast-info {
  border-left-color: var(--toast-info);
}
.gti-toast-info .gti-toast-icon-wrap {
  color: #2563eb;
  background-color: #eff6ff;
}
html.dark .gti-toast-info .gti-toast-icon-wrap,
[data-bs-theme="dark"] .gti-toast-info .gti-toast-icon-wrap {
  color: #60a5fa;
  background-color: rgba(37, 99, 235, 0.18);
}
.gti-toast-info .gti-toast-progress-bar {
  background-color: var(--toast-info);
}

/* Área de Conteúdo */
.gti-toast-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gti-toast-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.25rem;
  color: var(--toast-title-light);
  letter-spacing: -0.01em;
}

html.dark .gti-toast-title,
[data-bs-theme="dark"] .gti-toast-title {
  color: var(--toast-title-dark);
}

.gti-toast-message {
  font-size: 0.925rem;
  line-height: 1.45;
  color: var(--toast-body-light);
  word-break: break-word;
  white-space: pre-line;
}

html.dark .gti-toast-message,
[data-bs-theme="dark"] .gti-toast-message {
  color: var(--toast-body-dark);
}

/* Botão Fechar */
.gti-toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin-left: 0.25rem;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
  line-height: 1;
}

.gti-toast-close svg {
  width: 1.05rem;
  height: 1.05rem;
}

.gti-toast-close:hover {
  color: #334155;
  background-color: rgba(0, 0, 0, 0.06);
}

html.dark .gti-toast-close:hover,
[data-bs-theme="dark"] .gti-toast-close:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.1);
}

.gti-toast-close:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Barra de Progresso do Fechamento Automático */
.gti-toast-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

html.dark .gti-toast-progress-track,
[data-bs-theme="dark"] .gti-toast-progress-track {
  background: rgba(255, 255, 255, 0.04);
}

.gti-toast-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  animation: gtiToastProgress linear forwards;
}

/* Pausa no Hover */
.gti-toast:hover .gti-toast-progress-bar,
.gti-toast:focus-within .gti-toast-progress-bar {
  animation-play-state: paused;
}

@keyframes gtiToastProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Responsividade Mobile */
@media (max-width: 640px) {
  .gti-toast-container {
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
  }

  .gti-toast {
    padding: 0.9rem 1.05rem;
  }
}

/* Acessibilidade: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .gti-toast,
  .gti-toast-entering,
  .gti-toast-visible,
  .gti-toast-exiting,
  .gti-toast-collapsing,
  .gti-toast-progress-bar {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}