/* ==========================================================================
   NOTIFICATION & ALERT COMPONENTS
   ========================================================================== */

/* Notifications */
#notification-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
  pointer-events: none;
}

.notification {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-weight: 500;
  font-size: 0.875rem;
  pointer-events: auto;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s ease;
  background: var(--surface);
  border: 1px solid var(--border);
}

.notification.animate-slideInUp {
  transform: translateX(0);
  opacity: 1;
}

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

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

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

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

.notification-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.25rem;
  padding: var(--space-1);
  opacity: 0.8;
}

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.alert-warning {
  background-color: #fef3c7;
  border: 1px solid var(--warning);
  color: #92400e;
}

.alert-success {
  background-color: #10b981;
  color: white;
  border: 1px solid #059669;
}

.alert-danger {
  background-color: #ef4444;
  color: white;
  border: 1px solid #dc2626;
}

.alert-icon {
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.alert-content {
  flex: 1;
}

.alert-content strong {
  font-weight: 600;
  color: #78350f;
}

/* "Alert with action" modifier — icon/body on the left, primary action button
   on the right, vertically centered, wraps cleanly on narrow viewports. */
.alert--with-action {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.alert--with-action > .alert-body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.alert--with-action > .alert-body p {
  margin: 0;
}
.alert--with-action .btn {
  white-space: nowrap;
}

/* ── Mobile toast: prevent right-anchor from clipping on narrow phones ───── */
@media (max-width: 480px) {
  #notification-container {
    right: var(--space-2);
    left: var(--space-2);
    max-width: none;
  }
}