/* =============================================
   Shared Alerts - Design System
   Componente compartilhado para alertas
   ============================================= */

/* Base */
.ui-alert {
  border-radius: 12px;
  border: none;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--shadow-xs);
}

/* Quando tem título + subtítulo, alinha ao topo */
.ui-alert:has(.alert-title) {
  align-items: flex-start;
  padding: 12px 14px;
}

.ui-alert .alert-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ui-alert .alert-icon i {
  font-size: 1.25rem;
}

.ui-alert .alert-content {
  flex: 1;
}

.ui-alert .alert-title {
  font-weight: 500;
  font-size: 0.9rem;
  display: block;
  color: var(--color-neutral-900);
}

.ui-alert .alert-text {
  font-size: 0.8rem;
  color: var(--color-bs-gray-500);
  margin-bottom: 0;
  margin-top: 2px;
  line-height: 1.4;
}

/* Danger */
.ui-alert-danger {
  background-color: rgba(220, 53, 69, 0.08);
  border-left: 4px solid var(--color-danger-bs);
}

.ui-alert-danger .alert-icon i {
  color: var(--color-danger-bs);
}

.ui-alert-danger .alert-title {
  color: var(--color-danger-bs-strong);
  font-weight: 600;
}

/* alert-text sem alert-title recebe a cor semântica */
.ui-alert-danger .alert-text:only-child,
.ui-alert-danger .alert-content:not(:has(.alert-title)) .alert-text {
  color: var(--color-danger-bs-strong);
  font-weight: 600;
  font-size: 0.875rem;
}

/* Warning */
.ui-alert-warning {
  background-color: rgba(255, 193, 7, 0.12);
  border-left: 4px solid var(--color-warning-gold-650);
}

.ui-alert-warning .alert-icon i {
  color: var(--color-warning-gold-650);
}

.ui-alert-warning .alert-title {
  color: var(--color-warning-gold-800);
}

/* Success */
.ui-alert-success {
  background-color: rgba(25, 135, 84, 0.08);
  border-left: 4px solid var(--color-success-bs);
}

.ui-alert-success .alert-icon i {
  color: var(--color-success-bs);
}

.ui-alert-success .alert-title {
  color: var(--color-success-bs-600);
}

/* Info - Azul semântico */
.ui-alert-info {
  background-color: rgba(13, 110, 253, 0.07);
  border-left: 4px solid var(--color-info-bs);
}

.ui-alert-info .alert-icon i {
  color: var(--color-info-bs);
}

.ui-alert-info .alert-title {
  color: var(--color-info-bs-hover);
  font-weight: 600;
}

/* alert-text sem alert-title recebe a cor semântica */
.ui-alert-info .alert-content:not(:has(.alert-title)) .alert-text {
  color: var(--color-info-bs-hover);
  font-weight: 600;
  font-size: 0.875rem;
}

/* Info - Brand Pathbit */
.ui-alert-brand {
  background-color: rgba(var(--primary-rgb, 109, 40, 217), 0.08);
  border-left: 4px solid var(--color-primary, var(--color-primary));
}

.ui-alert-brand .alert-icon i {
  color: var(--color-primary, var(--color-primary));
}

.ui-alert-brand .alert-title {
  color: var(--color-primary, var(--color-primary));
  font-weight: 600;
}

/* Neutral - Gray */
.ui-alert-neutral {
  background-color: var(--color-bs-gray-100);
  border-left: 4px solid var(--color-bs-gray-500);
}

.ui-alert-neutral .alert-icon i {
  color: var(--color-bs-gray-500);
}

.ui-alert-neutral .alert-title {
  color: var(--color-bs-gray-600);
}

.ui-alert-neutral .alert-text {
  color: var(--color-bs-gray-500);
}

/* Priority Purple */
.ui-alert-purple {
  background-color: rgba(111, 66, 193, 0.08);
  border-left: 4px solid var(--color-bs-purple);
}

.ui-alert-purple .alert-icon i {
  color: var(--color-bs-purple);
}

.ui-alert-purple .alert-title {
  color: var(--color-purple-800);
  font-weight: 600;
}

/* Utils para texto puro */
.ui-text-blue { color: var(--color-info-bs) !important; }
.ui-text-purple { color: var(--color-bs-purple) !important; }
.ui-text-green { color: var(--color-success-bs) !important; }

/* Alinhamento vertical em páginas de autenticação */
.auth-body .ui-alert {
  align-items: center;
}

/* Animação de entrada */
.alert-animated {
  animation: uiAlertSlideIn 0.35s ease-out;
}

@keyframes uiAlertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}