/* ==========================================================================
   correspondance-panneau.css — Accès directs aux correspondances [EVOL-037 Lot 5]
   `cp-` : le panneau qui ouvre l'espace de rédaction sur place (D4) ;
   `cb-` : les correspondances d'un bail (gestion locative) ;
   `db-alert-` : l'action d'une alerte du tableau de bord.
   Ne dépend que des jetons --fv-*.
   ========================================================================== */

/* ── Panneau ─────────────────────────────────────────────────────────────── */

body.cp-ouvert { overflow: hidden; }

/* Devant TOUTES les fenêtres de la page (celles des états des lieux montent
   à 99 990), sous les messages et l'indicateur de chargement. */
.cp {
  position: fixed;
  inset: 0;
  z-index: calc(var(--fv-z-toast, 200000) - 1000);
}
.cp-voile {
  position: absolute;
  inset: 0;
  background: rgba(15, 34, 35, 0.55);
  backdrop-filter: blur(4px);
  animation: cp-apparition var(--fv-dur-base, 220ms) var(--fv-ease, ease) both;
}
/* Le cadre attend d'être prêt, invisible et sans capter les clics : le
   message d'attente (ou d'échec) reste utilisable. */
.cp-cadre {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fv-dur-base, 220ms) var(--fv-ease, ease);
}
.cp.is-pret .cp-cadre {
  opacity: 1;
  pointer-events: auto;
}
.cp.is-pret .cp-attente { display: none; }

.cp-attente {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 26px 30px;
  color: var(--fv-fg-2, #3c4f52);
  font-size: var(--fv-fs-14, 14px);
  text-align: center;
  background: var(--fv-paper, #fff);
  border-radius: var(--fv-r-xl, 20px);
  box-shadow: var(--fv-shadow-lg, 0 18px 48px rgba(15, 34, 35, 0.18));
  transform: translate(-50%, -50%);
  animation: cp-apparition var(--fv-dur-slow, 420ms) var(--fv-ease-out, ease) both;
}
.cp-roue {
  width: 30px;
  height: 30px;
  border: 3px solid var(--fv-forest-100, #dcebd9);
  border-top-color: var(--fv-primary, #2d5a27);
  border-radius: 50%;
  animation: cp-tourne 0.8s linear infinite;
}
.cp-attente.is-echec > i {
  font-size: 30px;
  line-height: 1;
  color: var(--fv-danger, #a8392e);
}
.cp-attente-texte { font-weight: 600; color: var(--fv-fg-1, #0f2223); }
.cp-attente-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cp-attente-actions a,
.cp-attente-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

@keyframes cp-tourne { to { transform: rotate(360deg); } }
@keyframes cp-apparition { from { opacity: 0; } }

/* Sans le module (forfait, mode conseiller) : les boutons qui mènent aux
   correspondances disparaissent (classe posée par la page). */
body.sans-correspondances .js-correspondance { display: none; }

/* ── Correspondances d'un bail (gestion locative) ────────────────────────── */

.cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cb-actions + .cb-liste { margin-top: 14px; }

.cb-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cb-ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--fv-paper, #fff);
  border: 1px solid var(--fv-border-1, #e6e2d7);
  border-radius: var(--fv-r-lg, 14px);
  cursor: pointer;
  transition: border-color var(--fv-dur-fast, 140ms) var(--fv-ease, ease),
    box-shadow var(--fv-dur-fast, 140ms) var(--fv-ease, ease),
    transform var(--fv-dur-fast, 140ms) var(--fv-ease, ease);
}
.cb-ligne:hover {
  border-color: var(--fv-forest-300, #9fc39a);
  box-shadow: var(--fv-shadow-sm, 0 2px 8px rgba(15, 34, 35, 0.08));
  transform: translateY(-1px);
}
.cb-ligne:focus-visible { outline: none; box-shadow: var(--fv-ring-focus); }
.cb-ligne.is-relance { border-color: var(--fv-honey-300, #f0c36b); }

.cb-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 18px;
  color: var(--fv-forest-700, #2d5a27);
  background: var(--fv-forest-50, #eef5ec);
  border-radius: var(--fv-r-md, 10px);
}
.cb-ligne.is-a_finir .cb-ic { color: var(--fv-honey-700, #8a5a12); background: var(--fv-honey-100, #fbefd2); }
.cb-ligne.is-archivee .cb-ic { color: var(--fv-fg-3, #67757a); background: var(--fv-stone-100, #efece4); }

.cb-textes { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-titre {
  overflow: hidden;
  font-weight: 600;
  color: var(--fv-fg-1, #0f2223);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cb-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-pastille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  font-size: var(--fv-fs-12, 12px);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--fv-r-pill, 999px);
}
.cb-pastille i { font-size: 12px; line-height: 1; }
.cb-pastille.is-a_finir { color: var(--fv-honey-700, #8a5a12); background: var(--fv-honey-100, #fbefd2); }
.cb-pastille.is-envoyee { color: var(--fv-forest-800, #1f3a1d); background: var(--fv-forest-100, #dcebd9); }
.cb-pastille.is-archivee { color: var(--fv-fg-3, #67757a); background: var(--fv-stone-100, #efece4); }
.cb-pastille.is-neutre { color: var(--fv-fg-2, #3c4f52); background: var(--fv-stone-100, #efece4); }
.cb-pastille.is-relance { color: var(--fv-honey-700, #9b6820); background: var(--fv-honey-100, #fbefd5); box-shadow: inset 0 0 0 1px var(--fv-honey-300, #edc782); }
.cb-quand {
  font-size: var(--fv-fs-12, 12px);
  color: var(--fv-fg-4, #97a2a5);
  white-space: nowrap;
}

.cb-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px;
  text-align: center;
  color: var(--fv-fg-3, #67757a);
  background: var(--fv-bg-1, #faf8f3);
  border: 1px dashed var(--fv-border-2, #d4cfc1);
  border-radius: var(--fv-r-lg, 14px);
}
.cb-vide > i {
  font-size: 28px;
  line-height: 1;
  color: var(--fv-forest-600, #36602f);
}
.cb-vide p { max-width: 460px; margin: 0; }
.cb-pied {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.cb-pied a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fv-fs-13, 13px);
  font-weight: 600;
  color: var(--fv-primary, #2d5a27);
  text-decoration: none;
}
.cb-pied a:hover { text-decoration: underline; }

/* Nombre de correspondances sur le sous-onglet du bail */
.cb-compte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fv-forest-800, #1f3a1d);
  background: var(--fv-forest-100, #dcebd9);
  border-radius: var(--fv-r-pill, 999px);
}

@media (max-width: 640px) {
  .cb-ligne { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; gap: 10px; }
  .cb-quand { grid-column: 2; }
}

/* ── Tableau de bord : action d'une alerte ───────────────────────────────── */

.db-alert-actions { margin-top: 6px; }
.db-alert-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: var(--fv-fs-12, 12px);
  font-weight: 600;
  color: var(--fv-primary, #2d5a27);
  text-decoration: none;
  background: var(--fv-forest-50, #eef5ec);
  border: 1px solid var(--fv-forest-100, #dcebd9);
  border-radius: var(--fv-r-pill, 999px);
  cursor: pointer;
}
.db-alert-action:hover { background: var(--fv-forest-100, #dcebd9); }
.db-alert-action:focus-visible { outline: none; box-shadow: var(--fv-ring-focus); }
.db-alert-action i { font-size: 13px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .cp-voile,
  .cp-attente { animation: none; }
  .cp-cadre,
  .cb-ligne { transition: none; }
  .cb-ligne:hover { transform: none; }
  .cp-roue { animation-duration: 2.4s; }
}