// ==========================================================
// Optimization: Hide the technical container when empty to avoid
// blocking clicks or taking space in the layout.
// ==========================================================
.e-toast-container:empty {
  display: none !important;
}

ds-toast {
  display: none !important;
}

// ==========================================================
// DS Toast — Customizações globais (baseado no Figma)
// O Syncfusion Toast renderiza fora do componente (no body),
// portanto os estilos precisam ser globais.
// ==========================================================

// ---- Toast individual ----
.e-toast {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  padding: 12px 16px !important;
  gap: 8px !important;
  width: 355px !important;
  height: auto !important;
  min-height: auto !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
}

// ---- Ícone (16x16, alinhado com título) ----
.e-toast .e-toast-icon {
  flex: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 16px !important;
  min-width: 16px !important;
  height: auto !important;
  padding: 3px 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

// ---- Bloco mensagem (coluna: título + conteúdo) ----
.e-toast .e-toast-message {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  text-align: left !important;
  overflow: visible !important;
}

// Garante que nenhum elemento filho dentro da mensagem prenda as linhas
.e-toast .e-toast-message * {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
}

// ---- Título ----
.e-toast .e-toast-message .e-toast-title {
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  text-align: left !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
}

// ---- Conteúdo ----
.e-toast .e-toast-message .e-toast-content {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
}

// ---- Botão fechar (12x12) ----
.e-toast .e-toast-close-icon {
  flex: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 16px !important;
  padding: 3px 2px !important;
  margin: 0 !important;
  font-size: 12px !important;
  align-self: stretch !important;
}

// ---- Container: posição e empilhamento ----
// Seletor com alta especificidade para vencer .e-lib.e-control do Syncfusion
.e-toast-container,
.e-toast-container.e-toast-container,
.e-toast-container.e-toast-success,
.e-toast-container.e-toast-danger,
.e-toast-container.e-toast-warning,
.e-toast-container.e-toast-info {
  top: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

// ==========================================================
// Temas de cor (Figma tokens)
// ==========================================================

// Para cancelar qualquer tema default do Syncfusion de alta especificidade no container e-toast base
ejs-toast,
ejs-toast .e-toast-container {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.e-toast-container .e-toast.e-toast {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

// Sucesso - Aplicar apenas no componente interno do toast
.e-toast-container .e-toast.e-toast-success {
  background: var(--bs-success-bg-subtle, #d1e7dd) !important;
  background-color: var(--bs-success-bg-subtle, #d1e7dd) !important;
  border: 1px solid var(--bs-success-bg-subtle, #d1e7dd) !important;
  color: var(--bs-success-text-emphasis, #0a3622) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

// Erro
.e-toast-container .e-toast.e-toast-danger {
  background: var(--bs-danger-bg-subtle, #f8d7da) !important;
  background-color: var(--bs-danger-bg-subtle, #f8d7da) !important;
  border: 1px solid var(--bs-danger-bg-subtle, #f8d7da) !important;
  color: var(--bs-danger-text-emphasis, #58151c) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

// Aviso
.e-toast-container .e-toast.e-toast-warning {
  background: var(--bs-warning-bg-subtle, #fff3cd) !important;
  background-color: var(--bs-warning-bg-subtle, #fff3cd) !important;
  border: 1px solid var(--bs-warning-bg-subtle, #fff3cd) !important;
  color: var(--bs-warning-text-emphasis, #664d03) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

// Info
.e-toast-container .e-toast.e-toast-info {
  background: var(--bs-info-bg-subtle, #cff4fc) !important;
  background-color: var(--bs-info-bg-subtle, #cff4fc) !important;
  border: 1px solid var(--bs-info-bg-subtle, #cff4fc) !important;
  color: var(--bs-info-text-emphasis, #055160) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}