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

/* Notifications */
#notification-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-float);
  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;
}

/* Toasts TONALS depuis 2026-08-28 (arbitrage Olivier phase 3) : blanc sur
   --success/--warning faisait 2,5/2,15:1 — même traitement que les alertes. */
.notification-success {
  background: var(--state-emerald-bg);
  color: var(--state-emerald-fg);
  border-color: var(--success);
}

.notification-error {
  background: var(--state-red-bg);
  color: var(--state-red-fg);
  border-color: var(--error);
}

.notification-warning {
  background: var(--state-amber-bg);
  color: var(--state-amber-fg);
  border-color: var(--warning);
}

.notification-info {
  background: var(--state-blue-bg);
  color: var(--state-blue-fg);
  border-color: var(--info);
}

.notification-close {
  background: none;
  border: none;
  color: currentColor;
  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: var(--state-amber-bg);
  border: 1px solid var(--warning);
  color: var(--state-amber-fg);
}

/* Pendant teinté de .alert-warning pour l'information neutre — canonisé
   2026-08-27 : build (tenant-management) et xorizo le redéfinissaient
   localement faute d'exister ici. */
.alert-info {
  background-color: var(--state-blue-bg);
  border: 1px solid var(--info);
  color: var(--state-blue-fg);
}

/* Tonal depuis 2026-08-28 — la famille alert devient cohérente (warning et
   info l'étaient déjà). */
.alert-success {
  background-color: var(--state-emerald-bg);
  color: var(--state-emerald-fg);
  border: 1px solid var(--success);
}

.alert-danger {
  background-color: var(--state-red-bg);
  color: var(--state-red-fg);
  border: 1px solid var(--error);
}

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

.alert-content {
  flex: 1;
}

.alert-content strong {
  font-weight: 600;
  /* css-color-ok: amber-900 historique — un cran plus sombre que --state-amber-fg pour l'emphase */
  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;
  }
}