/* ============================================================================
   customer_alerts.css - Modal d'alertes client post-login
   Cree par Claude 2026-06-23
   Couleurs / rayons / ombres / espacements : tokens :root de stylesheet.css.
   ============================================================================ */

.ca-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
  z-index: 1200;
}

.ca-box {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  margin: auto;
  font-family: var(--font-sans);
  color: var(--color-text);
  overflow: hidden;
}

/* En-tete */
.ca-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.ca-box-header h3 {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--color-text);
}
.ca-box-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0 var(--space-1);
}
.ca-box-close:hover { color: var(--color-text); }

/* Bandeau "ces points bloquent la commande" */
.ca-blocking-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-error-soft);
  color: var(--color-error);
  font-size: var(--text-sm);
}

/* Corps : liste des alertes */
.ca-list {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ca-item {
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
}
/* Severite -> couleur du liseré + fond doux */
.ca-item.ca-error   { border-left-color: var(--color-error);   background: var(--color-error-soft); }
.ca-item.ca-warning { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.ca-item.ca-info    { border-left-color: var(--color-info);    background: var(--color-info-soft); }

.ca-item-title {
  font-weight: 700;
  font-size: var(--text-md);
  margin: 0 0 var(--space-1);
}
.ca-item-msg {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
  /* Claude 2026-09-05 - le message est rendu via x-text (textContent) : sans
     pre-line, les retours a la ligne saisis en back-office se reduisent a une
     espace et le texte s'affiche en un seul bloc. pre-line preserve les sauts
     de ligne tout en continuant a fusionner les espaces multiples, donc les
     libelles des fichiers de langue (une seule ligne) sont inchanges. */
  white-space: pre-line;
}
.ca-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Bouton "corriger" (lien) */
.ca-cta {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-bg);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background var(--transition-base) ease;
}
.ca-cta:hover { background: var(--color-primary-hover); }
/* Claude 2026-09-17 - meme rendu quand l'action est un <button> ("C'est exact") :
   reset des styles natifs du bouton, aucune valeur graphique nouvelle. */
button.ca-cta { border: none; cursor: pointer; font-family: inherit; line-height: inherit; }

/* Lien "ne plus afficher" */
.ca-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  text-decoration: underline;
  padding: 0;
}
.ca-dismiss:hover { color: var(--color-text-muted); }

/* Pied */
.ca-box-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.ca-btn-close {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
}
.ca-btn-close:hover { background: var(--color-panel-alt); }

/* Bouton "Commander" desactive sur le panier quand une alerte bloque la caisse.
   Reutilise l'apparence .dform-btn--primary ; seul l'etat desactive est ajoute. */
.dform-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Message bloquant du panier : occupe toute la largeur de la .cart-submit-row
   pour que "Voir le detail" + "Suivant" se placent sur la ligne en dessous. */
.cart-blocked-msg { flex: 1 1 100%; }

/* Transitions (memes classes nommees que wishlist pour homogeneite) */
.ca-fade-enter-active { transition: opacity var(--transition-base) ease; }
.ca-fade-enter-from   { opacity: 0; }
.ca-fade-leave-active { transition: opacity var(--transition-fast) ease; }
.ca-fade-leave-to     { opacity: 0; }