/* 
 * Notifications Component
 * 
 * This component handles status messages and notifications in the admin interface.
 */

.notification-area {
  margin-bottom: var(--spacing-md);
  min-height: 48px; /* Fixed height to prevent layout shifts */
}

.notification {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-small);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  position: relative;
  border-left-width: 4px;
  border-left-style: solid;
}

.notification--success {
  background-color: #d1fae5;
  border-left-color: #059669;
  color: #065f46;
}

.notification--error {
  background-color: #fee2e2;
  border-left-color: #dc2626;
  color: #b91c1c;
}

.notification--warning {
  background-color: #fef3c7;
  border-left-color: #d97706;
  color: #92400e;
}

.notification--info {
  background-color: #dbeafe;
  border-left-color: #2563eb;
  color: #1e40af;
}

.notification__content {
  flex: 1;
}

.notification__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0.7;
}

.notification__close:hover {
  opacity: 1;
}

/* Auto-dismissible notifications */
.notification--auto-dismiss {
  animation: fadeOut 0.5s ease 5s forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}