/* ============================================
   ALERT STYLES
   Modern alert system for WebEngine CMS
   ============================================ */

:root {
  /* Alert colors - Dark theme with purple/pink accents */
  --alert-error-bg: rgba(248, 113, 113, 0.1);
  --alert-error-border: rgba(248, 113, 113, 0.3);
  --alert-error-text: #FCA5A5;
  --alert-error-icon: #EF4444;
  
  --alert-success-bg: rgba(34, 197, 94, 0.1);
  --alert-success-border: rgba(34, 197, 94, 0.3);
  --alert-success-text: #86EFAC;
  --alert-success-icon: #22C55E;
  
  --alert-warning-bg: rgba(251, 191, 36, 0.1);
  --alert-warning-border: rgba(251, 191, 36, 0.3);
  --alert-warning-text: #FCD34D;
  --alert-warning-icon: #FBBF24;
  
  --alert-info-bg: rgba(126, 58, 242, 0.1);
  --alert-info-border: rgba(126, 58, 242, 0.3);
  --alert-info-text: #AC94FA;
  --alert-info-icon: #7E3AF2;
  
  /* Common alert styles */
  --alert-border-radius: 0.75rem;
  --alert-padding: 1rem 1.25rem;
  --alert-gap: 0.75rem;
}

/* Base alert styles */
.alert {
  position: relative;
  padding: var(--alert-padding);
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--alert-border-radius);
  display: flex;
  flex-direction: column;
  gap: var(--alert-gap);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  animation: alertSlideIn 0.3s ease-out;
  backdrop-filter: blur(10px);
}

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

.alert-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alert-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}

.alert-body {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Error Alert */
.alert-danger {
  background: var(--alert-error-bg);
  border-color: var(--alert-error-border);
  color: var(--alert-error-text);
}

.alert-danger .alert-title {
  color: var(--alert-error-icon);
}

.alert-danger::before {
  content: '⚠';
  position: absolute;
  left: 1.25rem;
  top: 1rem;
  font-size: 1.25rem;
  opacity: 0.7;
}

.alert-danger .alert-header,
.alert-danger .alert-body {
  padding-left: 2rem;
}

/* Success Alert */
.alert-success {
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}

.alert-success .alert-title {
  color: var(--alert-success-icon);
}

.alert-success::before {
  content: '✓';
  position: absolute;
  left: 1.25rem;
  top: 1rem;
  font-size: 1.25rem;
  opacity: 0.7;
}

.alert-success .alert-header,
.alert-success .alert-body {
  padding-left: 2rem;
}

/* Warning Alert */
.alert-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}

.alert-warning .alert-title {
  color: var(--alert-warning-icon);
}

.alert-warning::before {
  content: '⚡';
  position: absolute;
  left: 1.25rem;
  top: 1rem;
  font-size: 1.25rem;
  opacity: 0.7;
}

.alert-warning .alert-header,
.alert-warning .alert-body {
  padding-left: 2rem;
}

/* Info Alert */
.alert-info {
  background: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

.alert-info .alert-title {
  color: var(--alert-info-icon);
}

.alert-info::before {
  content: 'ℹ';
  position: absolute;
  left: 1.25rem;
  top: 1rem;
  font-size: 1.25rem;
  opacity: 0.7;
}

.alert-info .alert-header,
.alert-info .alert-body {
  padding-left: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .alert {
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    gap: 0.625rem;
  }
  
  .alert-title {
    font-size: 0.95rem;
  }
  
  .alert-body {
    font-size: 0.9rem;
  }
  
  .alert-danger::before,
  .alert-success::before,
  .alert-warning::before,
  .alert-info::before {
    left: 1rem;
    top: 0.875rem;
    font-size: 1.1rem;
  }
  
  .alert-danger .alert-header,
  .alert-danger .alert-body,
  .alert-success .alert-header,
  .alert-success .alert-body,
  .alert-warning .alert-header,
  .alert-warning .alert-body,
  .alert-info .alert-header,
  .alert-info .alert-body {
    padding-left: 1.75rem;
  }
}

@media (max-width: 576px) {
  .alert {
    padding: 0.75rem 0.875rem;
    margin-bottom: 1rem;
    gap: 0.5rem;
  }
  
  .alert-title {
    font-size: 0.9rem;
  }
  
  .alert-body {
    font-size: 0.85rem;
  }
  
  .alert-danger::before,
  .alert-success::before,
  .alert-warning::before,
  .alert-info::before {
    left: 0.875rem;
    top: 0.75rem;
    font-size: 1rem;
  }
  
  .alert-danger .alert-header,
  .alert-danger .alert-body,
  .alert-success .alert-header,
  .alert-success .alert-body,
  .alert-warning .alert-header,
  .alert-warning .alert-body,
  .alert-info .alert-header,
  .alert-info .alert-body {
    padding-left: 1.5rem;
  }
}