/* notifications.css - Toast notification styles */

.notification {
  display: flex;
  align-items: center;
  gap: 12px;
  position: fixed;
  top: 80px; /* Below header */
  right: 20px;
  padding: var(--space-4) 24px;
  border-radius: var(--radius-md);
  font-weight: 500;
  z-index: 1005; /* Above header (1004) */
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  max-width: 400px;
  word-wrap: break-word;
}

.notification-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.notification-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.notification-message {
  flex: 1;
}

.notification.show {
  transform: translateX(0);
}

.notification.success {
  background: var(--color-success);
  color: var(--color-white);
}

.notification.error {
  background: var(--color-danger);
  color: var(--color-white);
}

.notification.warning {
  background: var(--color-warning);
  color: var(--color-gray-900);
}

.notification.info {
  background: var(--color-info);
  color: var(--color-white);
}

/* Dark mode overrides */
.dark .notification.success {
  background: var(--dark-success);
  color: var(--color-white);
}

.dark .notification.error {
  background: var(--dark-danger);
  color: var(--color-white);
}

.dark .notification.warning {
  background: var(--dark-warning);
  color: var(--color-gray-900);
}

.dark .notification.info {
  background: var(--dark-info);
  color: var(--color-white);
}