/* =====================================================================
   RAPPELS CLIENTS — pile de notifications  (classes .rcl-*)
   ---------------------------------------------------------------------
   Remplace la modale bloquante #modal-display-recall. Un rappel est une
   information a traiter, pas une interruption : la carte n'attrape pas le
   focus, ne pose pas de voile et ne bloque pas la saisie en cours.

   Toutes les couleurs passent par var(--rcl-*, repli en dur). Le bloc de
   remappage ci-dessous les branche sur les jetons du theme V3 « Prism »
   (--t3-*), qui sont redefinis par chaque ambiance (azur / espana /
   menthe) et par le mode sombre : la carte suit donc les trois themes et
   le sombre sans qu'on ecrive une regle par theme.
   Si le theme V3 est desactive (inc/theme_v3.php), les --t3-* n'existent
   plus et les replis en dur reprennent la main — le composant reste
   correct.

   Composant : js/rappels.js — Portage : helpers/PORTAGE_RAPPELS.md
   ===================================================================== */

:root {
    --rcl-surface:   var(--t3-solid, #ffffff);
    --rcl-border:    var(--t3-border-sub, rgba(19, 26, 46, 0.07));
    --rcl-shadow:    var(--t3-sh-3, 0 16px 44px rgba(19, 26, 46, 0.16), 0 4px 12px rgba(19, 26, 46, 0.08));
    --rcl-text:      var(--t3-text, #131a2e);
    --rcl-text-2:    var(--t3-text-2, #4c5670);
    --rcl-text-3:    var(--t3-text-3, #5f6883);
    --rcl-accent:    var(--t3-accent, #2563eb);
    --rcl-accent-2:  var(--t3-accent-2, #ec4899);
    --rcl-accent-lo: var(--t3-accent-lo, #1d4ed8);
    --rcl-accent-on: var(--t3-accent-on, #ffffff);
    --rcl-radius:    var(--t3-radius-lg, 14px);
    --rcl-radius-sm: var(--t3-radius-sm, 7px);
    --rcl-font:      var(--t3-font, inherit);
}

.rcl-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 348px;
    max-width: calc(100vw - 40px);
    /* Doit passer AU-DESSUS des modales Bootstrap (1050) et des selecteurs
       de date : un rappel reste lisible par-dessus une fiche ouverte,
       c'est ce qui permet de ne plus bloquer l'ecran. */
    z-index: 10060;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* La pile couvre une bande verticale entiere : sans ca elle
       intercepterait les clics de la page sous les cartes. */
    pointer-events: none;
}

.rcl-toast {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    padding: 13px 15px 14px 18px;
    border-radius: var(--rcl-radius, 14px);
    background: var(--rcl-surface, #ffffff);
    border: 1px solid var(--rcl-border, rgba(19, 26, 46, 0.07));
    box-shadow: var(--rcl-shadow, 0 16px 44px rgba(19, 26, 46, 0.16),
                                  0 4px 12px rgba(19, 26, 46, 0.08));
    color: var(--rcl-text, #131a2e);
    font-family: var(--rcl-font, inherit);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.rcl-toast.rcl-in  { opacity: 1; transform: none; }
.rcl-toast.rcl-out { opacity: 0; transform: translateX(18px); }

/* Pendant l'aller-retour serveur : on neutralise les commandes sans poser
   de voile plein ecran (HoldOn), qui reprendrait tout ce qu'on vient
   d'abandonner en quittant la modale. */
.rcl-toast.rcl-busy .rcl-actions,
.rcl-toast.rcl-busy .rcl-delays { opacity: 0.45; pointer-events: none; }

/* Filet d'accent au bord gauche : c'est lui qui porte la couleur du
   theme, le fond de la carte restant neutre et lisible. */
.rcl-bar {
    position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg,
                var(--rcl-accent, #2563eb),
                var(--rcl-accent-2, #ec4899));
}

.rcl-close {
    position: absolute; top: 7px; right: 7px;
    width: 24px; height: 24px; padding: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--rcl-text-3, #5f6883);
    font-size: 14px; line-height: 1; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rcl-close:hover, .rcl-close:focus-visible {
    background: rgba(19, 26, 46, 0.08);
    color: var(--rcl-text, #131a2e);
}

.rcl-head { display: flex; align-items: center; gap: 9px; padding-right: 24px; }

.rcl-ico {
    flex: 0 0 auto; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.13);
    color: var(--rcl-accent, #2563eb);
    font-size: 16px;
}

.rcl-head-txt { min-width: 0; display: flex; flex-direction: column; }

.rcl-kind {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--rcl-accent, #2563eb);
}

.rcl-when { font-size: 11.5px; color: var(--rcl-text-3, #5f6883); }

/* Le retard est la seule information reellement urgente : il garde la
   teinte d'accent alors que le reste de la ligne est en gris. */
.rcl-late { color: var(--rcl-accent, #2563eb); font-weight: 600; }

.rcl-name {
    display: block; margin-top: 9px;
    font-size: 15px; font-weight: 700; line-height: 1.25;
    color: var(--rcl-text, #131a2e); text-decoration: none;
}
.rcl-name:hover, .rcl-name:focus {
    color: var(--rcl-accent, #2563eb); text-decoration: none;
}

/* Raison sociale : sous le nom du contact, en retrait. */
.rcl-org {
    display: block; margin-top: 2px;
    font-size: 12px; color: var(--rcl-text-2, #4c5670);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rcl-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.rcl-chip {
    display: inline-flex; align-items: center; gap: 4px;
    max-width: 100%; padding: 2px 8px; border-radius: 999px;
    background: rgba(19, 26, 46, 0.05);
    color: var(--rcl-text-2, #4c5670);
    font-size: 11.5px; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.rcl-chip:hover, a.rcl-chip:focus {
    background: rgba(37, 99, 235, 0.12);
    color: var(--rcl-accent, #2563eb); text-decoration: none;
}

/* Le commentaire vient de la base et peut etre long : deux lignes au
   plus, la fiche porte le texte complet. */
.rcl-note {
    margin: 8px 0 0;
    color: var(--rcl-text-2, #4c5670);
    font-size: 12.5px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

.rcl-actions {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px;
    transition: opacity 0.15s ease;
}

.rcl-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px;
    border: 1px solid var(--rcl-border, rgba(19, 26, 46, 0.07));
    border-radius: var(--rcl-radius-sm, 7px);
    background: rgba(19, 26, 46, 0.04);
    color: var(--rcl-text, #131a2e);
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    line-height: 1.2; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.1s ease;
}
.rcl-btn:hover, .rcl-btn:focus-visible {
    background: rgba(19, 26, 46, 0.09);
    color: var(--rcl-text, #131a2e);
    text-decoration: none;
}
.rcl-btn:active { transform: translateY(1px); }

.rcl-btn-main {
    background: var(--rcl-accent, #2563eb);
    border-color: var(--rcl-accent, #2563eb);
    color: var(--rcl-accent-on, #ffffff);
}
.rcl-btn-main:hover, .rcl-btn-main:focus-visible {
    background: var(--rcl-accent-lo, #1d4ed8);
    border-color: var(--rcl-accent-lo, #1d4ed8);
    color: var(--rcl-accent-on, #ffffff);
}

.rcl-btn-ghost {
    background: transparent; border-color: transparent;
    color: var(--rcl-text-3, #5f6883); font-weight: 500;
}

/* Reports alternatifs : lisibles, mais nettement en retrait des trois
   commandes principales. */
.rcl-delays {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    margin-top: 9px; padding-top: 8px;
    border-top: 1px solid var(--rcl-border, rgba(19, 26, 46, 0.07));
    font-size: 11.5px; color: var(--rcl-text-3, #5f6883);
    transition: opacity 0.15s ease;
}

.rcl-delay {
    padding: 2px 8px; border: 0; border-radius: 999px;
    background: rgba(19, 26, 46, 0.05);
    color: var(--rcl-text-2, #4c5670);
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rcl-delay:hover, .rcl-delay:focus-visible {
    background: rgba(37, 99, 235, 0.14);
    color: var(--rcl-accent, #2563eb);
}

/* L'erreur reste DANS la carte : une notification qui ouvre une boite
   systeme (alert, growl) redevient exactement ce qu'on cherchait a
   supprimer. */
.rcl-err {
    margin-top: 8px; padding: 5px 9px;
    border-radius: var(--rcl-radius-sm, 7px);
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c; font-size: 11.5px;
}

/* Mode sombre — le CRM pose .v2-dark sur <body> (voir template_start.php).
   Les jetons --t3-* suivent seuls ; ne restent que les fonds translucides
   ecrits en dur, qui doivent s'eclaircir au lieu de s'assombrir. */
body.v2-dark .rcl-toast     { border-color: rgba(255, 255, 255, 0.12); }
body.v2-dark .rcl-close:hover,
body.v2-dark .rcl-close:focus-visible { background: rgba(255, 255, 255, 0.10); }
body.v2-dark .rcl-ico       { background: rgba(96, 165, 250, 0.16); }
body.v2-dark .rcl-chip      { background: rgba(255, 255, 255, 0.07); }
body.v2-dark a.rcl-chip:hover,
body.v2-dark a.rcl-chip:focus { background: rgba(96, 165, 250, 0.16); }
body.v2-dark .rcl-btn       { background: rgba(255, 255, 255, 0.06); }
body.v2-dark .rcl-btn:hover,
body.v2-dark .rcl-btn:focus-visible { background: rgba(255, 255, 255, 0.12); }
body.v2-dark .rcl-delay     { background: rgba(255, 255, 255, 0.07); }
body.v2-dark .rcl-delay:hover,
body.v2-dark .rcl-delay:focus-visible { background: rgba(96, 165, 250, 0.18); }
body.v2-dark .rcl-err       { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }

/* Ecrans etroits : a 348px fixes la carte deborde en portrait. */
@media (max-width: 480px) {
    .rcl-stack { top: 10px; right: 10px; left: 10px; width: auto; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rcl-toast, .rcl-btn, .rcl-chip, .rcl-delay, .rcl-close {
        transition-duration: 0.01ms !important;
    }
}