{% extends 'base.html' %}
{% load static %}
{% block page_scripts %}
    <script src="{% static 'projects/fyw/app/tonal/greg/js/update_record.js' %}"></script>
    <script src="{% static 'projects/fyw/app/tonal/greg/js/sales_documents_edit.js' %}"></script>
    <script src="{% static 'projects/fyw/app/tonal/greg/js/interaction.js' %}"></script>
{% endblock %}
{% block content %}
    {% if user.is_authenticated %}
        <style>



            /* Forcer Select2 à toujours apparaître au-dessus de tout */
            /* Applique un z-index très élevé au menu déroulant, mais uniquement si on n’est PAS dans une modale */
            body:not(.modal-open) .select2-container--open {
              z-index: 2147483647 !important;
            }

            /* Applique pastilles de couleur pour select2 dans edition documents */
            .select2-category-dot {
              display: inline-block;
              width: 13px;
              height: 13px;
              border-radius: 50%;
              margin-right: 6px;
              vertical-align: middle;
              border: 1px solid black;
            }

            /* 🌿 Conteneur exact pour chaque pastille (pas plus large que le point) */
            .dot-wrapper {
              position: relative;
              width: 13px;
              height: 13px;
              display: inline-block;
              vertical-align: middle;
              margin: 0;
              padding: 0;
            }

            /* ✅ Cercle principal vert ou gris */
            .dot {
              width: 13px;
              height: 13px;
              border-radius: 50%;
              display: block;
              background-color: #b0b0b0;
              margin: 0;
              padding: 0;
              box-sizing: border-box;
            }

            /* ✅ Cercle vert et gris */
            .dot.green { background-color: #4CAF50; }
            .dot.gray  { background-color: #b0b0b0; }

            /* 🟠 Pastille orange superposée (centrée pixel-perfect) */
            .dot.orange.inner {
              position: absolute;
              inset: 0; /* ↔️ top/right/bottom/left = 0 */
              margin: auto; /* 📍 centre dans le parent */
              width: 5px;
              height: 5px;
              background-color: orange;
              border-radius: 50%;
              z-index: 2;
              pointer-events: none;
            }

            /* ⚪ Pastille blanche par défaut dans les pastilles vertes */
            .dot.white.inner {
              position: absolute;
              inset: 0; /* ↔️ top/right/bottom/left = 0 */
              margin: auto; /* 📍 centre dans le parent */
              width: 5px;
              height: 5px;
              background-color: white;
              border-radius: 50%;
              z-index: 1;
              pointer-events: none;
            }

            /* 🔗 Trait entre deux cercles */
            .dot-line {
              width: 8px;
              height: 2px;
              background-color: #b0b0b0;
              display: inline-block;
              vertical-align: middle;
              margin: 0;
              padding: 0;
              position: relative;
              top: -0.5px;
              box-sizing: border-box;
            }

            .dot-line.green { background-color: #4CAF50; }
            .dot-line.gray  { background-color: #b0b0b0; }

            /* 📦 Bloc horizontal des pastilles + traits */
            .select2-option-dots {
              display: inline-flex;
              align-items: center;
              gap: 0;
              line-height: 1;
              margin-left: 5px !important;
              margin-right: 8px !important;
              padding: 0 !important;
            }

            /* 📦 Bloc complet de l’option : pastilles + texte */
            .select2-option-full {
              display: inline-flex;
              align-items: center;
              gap: 0 !important;
              padding: 2px 8px;
            }

            /* 📝 Texte de l’option */
            .select2-option-label {
              margin: 0 !important;
              padding: 0 !important;
              white-space: nowrap;
            }

            /* ➕ Option spéciale "Créer un document" */
            .select2-new-option {
              display: inline-flex;
              align-items: center;
              gap: 6px;
              padding: 0 12px;
            }


            /* ✅ Forcer le dropdown à s’adapter à l’option la plus large */
            .select2-container--default .select2-dropdown {
              width: auto !important;
              min-width: calc(100% + 30px) !important;
              max-width: none !important;
              white-space: nowrap;
              overflow-x: visible;
              border-radius: 7px; /* ✅ Coins arrondis conservés */
              background-color: #e6e6e6 !important;  /* gris clair très courant dans les selects natifs */
            }



            /* ✅ Appliquer ton style à la boîte visible du select2 */
            .select2-container--default .select2-selection--single {
              height: 38px;
              padding: 0 30px 0 10px;
              font-size: 16px;
              border: 1px solid #ccc;
              border-radius: 7px;
              background-color: white;
              background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
              background-repeat: no-repeat;
              background-position: right 10px center;
              background-size: 20px;
              box-sizing: border-box;
              text-align: left;
              vertical-align: middle;
              display: flex;
              align-items: center;
            }

            /* ✅ Supprimer le caret natif Select2 */
            .select2-container--default .select2-selection--single .select2-selection__arrow {
              display: none !important;
            }

            /* 🧩 Garde les coins inférieurs arrondis même quand le menu est ouvert */
            .select2-container--default.select2-container--open .select2-selection--single {
              border-bottom-left-radius: 6px !important;
              border-bottom-right-radius: 6px !important;
            }

            /* 🟦 Ajoute les coins arrondis quand une option est survolée ou sélectionnée */
            .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
              border-radius: 7px !important;
            }

            /* 🟨 Premier élément survolé (haut du menu) */
            .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:first-child {
              border-top-left-radius: 7px !important;
              border-top-right-radius: 7px !important;
            }

            /* 🟩 Dernier élément survolé (bas du menu) */
            .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:last-child {
              border-bottom-left-radius: 7px !important;
              border-bottom-right-radius: 7px !important;
            }

            /* 🧊 Supprimer toute coupure visuelle de coins sur l’option sélectionnée */
            .select2-container--default .select2-results__option--selected {
              border-radius: 7px !important;
              overflow: visible;
              position: relative;
              z-index: 2;
            }

            /* 🥇 Si l’option sélectionnée est tout en haut, coins supérieurs */
            .select2-container--default .select2-results__option--selected:first-child {
              border-top-left-radius: 7px !important;
              border-top-right-radius: 7px !important;
            }

            /* 🥇 Si l’option sélectionnée est tout en bas, coins inférieurs */
            .select2-container--default .select2-results__option--selected:last-child {
              border-bottom-left-radius: 7px !important;
              border-bottom-right-radius: 7px !important;
            }

            /* ❌ Supprime le fond gris de l’option sélectionnée */
            /* ✅ Option sélectionnée quand NON survolée */
            .select2-results__option--selected:not(.select2-results__option--highlighted) {
              background-color: transparent !important;
              color: inherit;
            }

            /* 🟦 Arrondir le champ de recherche Select2 dans le menu déroulant */
            .select2-container--default .select2-search--dropdown .select2-search__field {
              border-radius: 7px;        /* 🔁 ajuste ici la valeur à ton goût */
              border: 1px solid #ccc;    /* facultatif : pour harmoniser */
              padding: 5px 10px;         /* facultatif : un peu plus de confort visuel */
            }

            /* 🧩 Même padding gauche pour l'option spéciale '➕' */
            .select2-results__option span.select2-option-label {
              padding-left: 16px; /* même largeur que .option-check */
            }

            .option-check {
              display: inline-block;
              width: 16px;
              text-align: center;
              flex-shrink: 0;
            }

            /* ✅ Coche fine noire comme le natif Safari/macOS */
            .option-check.native-check::before {
              content: "✓";
              font-size: 18px;
                font-weight: 600; /* ← ici on passe à bold */
              color: black;
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
              display: inline-block;
              line-height: 1;
            }

            /* ✅ Check en blanc quand l’option sélectionnée est survolée (comme le texte natif) */
            .select2-results__option--highlighted.select2-results__option--selected .option-check.native-check::before {
              color: white;
            }

            /* 🚫 Slot vide pour conserver l'alignement */
            .option-check.empty::before {
              content: "";
            }

            /* 🕳️ Placeholder pour garder l’alignement quand pas sélectionné */
            .option-check.empty {
              visibility: hidden;
            }

            /* 🧲 Centre complètement l’option spéciale "Créer un document" */
            .select2-results__option .centered {
              justify-content: center;
              text-align: center;
              width: 100%;
            }

            /* 🧼 Enlève le décalage gauche sur l’option spéciale */
            .select2-results__option .centered .select2-option-label {
              margin-left: 0;
              padding-left: 0;
            }

        </style>
        <style>
            /* jquery-editable-select css at https://www.aisln.cn/static/assets/global/plugins/jquery.editable-select/jquery.editable-select.min.css */
            input.es-input {
                border: 1px solid #dee2e6;
                border-radius: 7px;
                height: 38px;
                padding-left: 11px !important;
                padding-right: 20px !important;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat;
            }

            input.es-input:focus {
                outline: 4px solid #c9dbfc;
                border: 1px solid #8eb7f8;
                opacity: 0.9;
                border-radius: 7px;
            }

            .es-list {
                border-radius: 7px;
                display: block;
                position: absolute;
                padding: 0;
                margin: 0;
                border: 1px solid #d1d1d1;
                display: none;
                z-index: 1000;
                background: #fff;
                max-height: 160px;
                overflow-y: auto;
                box-shadow: 0 2px 3px #ccc;
            }

            .es-list li {
                display: block;
                padding: 5px 10px;
                margin: 0;
            }

            .es-list li.selected {
                background: lightgrey;
            }

            /* Tab menu and sub tab menu */
            .tab {
                flex-wrap: nowrap;
                overflow-x: hidden;      /* ✅ Empêche scroll horizontal */
                max-width: 100%;         /* ✅ S'assure que ça ne déborde pas */
                display: flex;
                background-color: #f1f1f1;  /* ✅ ne colore que la ligne boutons */
                border: 0;
                gap: 0;
                flex-shrink: 0;
                min-height: 35px;
                border-bottom-left-radius: 7px;
                border-bottom-right-radius: 7px;
                margin-bottom: 0px;
            }

            .tab button {
                overflow: hidden;
                text-overflow: ellipsis; /* ✅ Si trop long, met des "..." */
                min-width: 0;            /* ✅ Safari fix pour shrink correct */
                white-space: nowrap; /* Empêche le texte de se couper */
                flex-shrink: 0;
                background-color: inherit;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 7px 20px;
                height: auto;
                transition: background-color 0.3s ease;
            }

            .tab button:hover {
                background-color: #ddd;
            }

            .tab button.active {
                background-color: #ccc;
            }

            .tab-group-2.active-group {
                background-color: #f1f1f1; /* backround color of documents menu buttons */
            }

            #div_tab_update_record_contact_labeltags_indicators,
            #div_tab_update_record_company_labeltags_indicators,
            #div_tab_update_record_project_labeltags_indicators {
                position: relative;/* ✅ pour que top: 20px soit relatif à CE conteneur */
            }

            .tabcontent {
                position: relative;     /* 👈 nécessaire pour que z-index s'applique */
                z-index: 1;             /* 👈 met les .tabcontent au-dessus des .sub-tab-indicator  */
                background-color: white; /* 👈 nécessaire pour masquer ce qui passe derriere lui dans  .sub-tab-indicator*/
                display: none;
                padding: 6px 12px;
                border-width: 0px 2px 2px 2px;
                border-style: solid;
                border-color: darkgrey;
                overflow: hidden;

                border-bottom-left-radius: 7px;
                border-bottom-right-radius: 7px;
            }
            .tabcontent-project {
                position: relative;     /* 👈 nécessaire pour que z-index s'applique */
                z-index: 1;             /* 👈 met les .tabcontent au-dessus des .sub-tab-indicator  */
                background-color: white; /* 👈 nécessaire pour masquer ce qui passe derriere lui dans  .sub-tab-indicator*/
                display: none;
                padding: 6px 12px;
                border-width: 0px 2px 2px 2px;
                border-style: solid;
                border-color: darkgrey;
                flex-grow: 1;
                overflow: auto;

                border-bottom-left-radius: 7px;
                border-bottom-right-radius: 7px;
            }

            .sub-tab-indicator {
                position: absolute; /* ✅ pour pouvoir utiliser top */
                z-index: 0; /* 👈 positionne l'indicateur sous les autres blocs */
                top: 3px; /* ✅ baisse de 3px en dessous de .tabcontent pour compenser bug visuelle ligne basse residuelle avec ecran externe */
                left: 0;
                width: 100%;
                display: flex;
                justify-content: center; /* ✅ centre / aligne le contenu  */
                flex-wrap: nowrap;
                overflow-x: hidden;
                flex-shrink: 0;
                gap: 0;
                border-width: 2px 2px 0px 2px;
                border-style: solid;
                border-color: darkgrey;
                min-height: 35px;
                background-color: white;
                border-top-left-radius: 7px;
                border-top-right-radius: 7px;
            }

            .tab-indicator-spacer {
                height: 35px;
                width: 100%;
                border: #77d5f7 0px solid;
            }

            .tab-indicator-spacer.hidden {
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                visibility: hidden !important;
                overflow: hidden;
            }

            /* Custom black menu selectbox (contact_num, company_num , project_num) */
            /* The container must be positioned relative: */
            .custom-select {
                position: relative;
                font-family: Arial;
                font-size: 16px;
            }

            .custom-select select {
                display: none;
            }

            .select-selected {
                height: 20px;
                border: 0px solid green;
                border-radius: 0px;
            }

            .select-selected:after {
                position: relative;
                content: "";
                top: 0px;
                right: 0px;
                width: 0;
                height: 0;
                border: 0px solid transparent;
                border-color: #FFF transparent transparent transparent;
            }

            .select-selected.select-arrow-active:after {
                border-color: transparent transparent #FFF transparent;
                top: 0px;
            }

            .select-items div,
            .select-selected {
                height: 25px;
                line-height: 25px;
                color: white;
                padding: 0px 0px;
                border: 0px solid blue;
                cursor: pointer;
            }

            .select-items {
                position: absolute;
                top: 100%;              /* Juste en dessous du select affiché */
                left: 0;
                width: 100%;            /* Même largeur que le conteneur parent (select-visible) */
                z-index: 999;
            }

            .select-hide {
                display: none;
            }

            .same-as-selected {
                height: 0px !important;
            }

            .my-input {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                padding: 0 10px;
                font-size: 16px;
                height: 40px;
                border: 1px solid #ccc;
                border-radius: 7px;
                background-color: white;
                box-sizing: border-box;
                text-align: left;
                vertical-align: middle;
            }

            .my-select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                padding: 0 30px 0 10px;
                font-size: 16px;
                height: 40px;
                border: 1px solid #ccc;
                border-radius: 7px;
                background-color: white;
                background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
                background-repeat: no-repeat;
                background-position: right 10px center;
                background-size: 20px;
                box-sizing: border-box;
                text-align: left;
                vertical-align: middle;
            }

            .spinner {
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 2px solid #ccc;
                border-top: 2px solid #333;
                border-radius: 50%;
                animation: spin 0.6s linear infinite;
                margin-right: 6px;
                vertical-align: middle;
            }

            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            /* Styles pour les boutons croix */
            .clear-button {
                cursor: pointer;
                background: white;
                color: #a00000;
                border: 1px solid #ccc;
                border-left: none;
                border-radius: 0 7px 7px 0;
                font-size: 18px;
                padding: 0 12px;
                height: 38px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                margin: 0;
            }

            .clear-icon {
                display: inline-block;
                transition: color 0.2s ease, transform 0.2s ease;
            }

            .clear-button:hover .clear-icon {
                color: #ff0000;
            }

            .icon-button {
                background: none;
                border: none;
                padding: 0;
                margin: 0;
                cursor: pointer;
                outline: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
                line-height: 0;
                margin-right: 8px;
            }

            .icon-button img {
                display: block;
            }

            /* Styles pour le email modal div content */
            .modal {
                display: none;
                position: fixed;
                top: 5%;
                left: 50%;
                transform: translateX(-50%);
                background: white;
                padding: 20px;
                border: 1px solid #ccc;
                border-radius: 7px;
                z-index: 1000;
                width: 1000px;
                height: 1000px;
                overflow: auto;
            }
        </style>
        <style>

            /* bandeau a top of the screen to give informations return about save succes, errors, loading etc  */

            .export-toast {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                padding: 20px 30px;
                font-size: 16px;
                font-weight: bold;
                color: white;
                text-align: center;
                z-index: 9999;
                opacity: 0;
                transition: opacity 0.4s ease;
                pointer-events: none;
            }

            .export-toast.show {
                opacity: 1;
                pointer-events: auto;
            }

            .export-toast.success { background-color: #28a745; }
            .export-toast.error   { background-color: #dc3545; }
            .export-toast.loading { background-color: #6c757d; }

            .toast-close-btn {
                position: absolute;
                top: 10px;
                right: 20px;
                font-size: 20px;
                font-weight: normal;
                color: white;
                cursor: pointer;
                background: none;
                border: none;
            }

            .toast-close-btn:hover {
                color: #f1f1f1;
            }
        </style>
        <style>
            /* Documents Timeline */

            /* 🧱 Conteneur principal de la timeline horizontale */
            .timeline-container {
              position: relative;             /* Nécessaire pour positionner les lignes (absolues) à l'intérieur */
              display: flex;                  /* Organisation en ligne (flex row) */
              justify-content: space-between;/* Répartit équitablement les cercles sur toute la largeur */
              align-items: center;           /* Centre verticalement les cercles dans la hauteur du conteneur */
              width: 100%;                   /* Prend toute la largeur disponible */
              height: 30px;                  /* Hauteur fixe (modifiable si besoin) */
              margin-top: 2px;               /* Léger espace au-dessus */
              padding: 0 15px;               /* Espacement à gauche/droite pour ne pas coller aux bords */
              box-sizing: border-box;        /* Inclut le padding dans le calcul de la largeur */
            }

            /* 🔲 Bloc contenant chaque étape (cercle + label) */
            .timeline-step {
              position: relative;            /* Utile si on veut positionner des éléments relatifs à ce bloc */
              text-align: center;            /* Centre le label en dessous du cercle */
              z-index: 2;                    /* Passe au-dessus de la ligne de fond (grise) */
            }

            /* 🔁 Wrapper autour du cercle pour appliquer les effets de focus (zoom) */
            .timeline-circle-wrapper {
              display: block;                /* Évite les problèmes d’alignement (par défaut inline) */
              height: 20px;                  /* Hauteur fixée, identique au cercle */
              transition: transform 0.3s ease; /* Animation douce lors du scale (zoom) */
            }

            /* 🔍 État "focus" : cercle zoomé (échelle 1.5) */
            .timeline-circle-wrapper.focus {
              transform: scale(1.5);         /* Agrandit le cercle (et son contenu) */
            }

            /* 💫 Ombre verte lorsque le cercle est en focus */
            .timeline-circle-wrapper.focus .timeline-circle {
              box-shadow: 0 0 5px #4CAF50;   /* Halo vert autour du cercle */
            }

            /* ⚪ Cercle gris de base (non validé) */
            .timeline-circle {
              position: relative;            /* Nécessaire pour positionner les éléments internes */
              width: 20px;                   /* Diamètre horizontal du cercle */
              height: 20px;                  /* Diamètre vertical du cercle */
              background-color: #e0e0e0;     /* Gris clair */
              border-radius: 50%;           /* Forme ronde parfaite */
              overflow: hidden;             /* Cache le cercle vert intérieur lors de l’animation (scale) */
            }

            /* 🟢 Cercle vert intérieur (rempli dynamiquement par JS) */
            .timeline-circle-fill {
              position: absolute;           /* Positionné à l’intérieur du cercle parent */
              top: 0; left: 0;              /* Coin supérieur gauche */
              width: 100%; height: 100%;    /* Prend toute la place du parent */
              border-radius: 50%;           /* Arrondi parfait */
              background-color: #4CAF50;    /* Vert Tonal */
              opacity: 0;                   /* Invisible par défaut */
              transform: scale(0.5);        /* Commence plus petit pour effet pop */
            }

            /* 🚀 Classe ajoutée dynamiquement pour déclencher l’animation verte */
            .timeline-circle-fill.active-fill {
              animation: fill-pop-in 0.4s ease-out forwards; /* Anime l’apparition */
            }

            /* ⚪ Petit point blanc au centre du cercle (apparaît après le vert) */
            .timeline-circle-inner-dot {
              position: absolute;           /* Centré dans son parent */
              top: 50%; left: 50%;          /* Position milieu (à ajuster avec transform) */
              width: 8px; height: 8px;      /* Taille du dot blanc */
              background-color: white;      /* Couleur blanche (visible sur fond vert) */
              border-radius: 50%;           /* Cercle parfait */
              transform: translate(-50%, -50%); /* Centre précisément dans le parent */
              z-index: 2;                   /* Passe au-dessus du vert animé */
              opacity: 0;                   /* Commence invisible (animé par JS) */
            }

            /* 🏷️ Label sous chaque cercle (ex: "Devis", "Facture", etc.) */
            .timeline-label {
              margin-top: 8px;              /* Espace entre cercle et texte */
              font-size: 12px;              /* Taille du texte */
              white-space: nowrap;          /* Ne pas passer à la ligne */
              text-align: center;           /* Centrage horizontal */
            }

            /* ➖ Ligne grise de fond + ligne verte de progression */
            .timeline-line,
            .timeline-line-progress {
              position: absolute;           /* Positionnées par le JS */
              height: 4px;                  /* Épaisseur de la ligne */
              border-radius: 2px;           /* Coins arrondis */
              z-index: 1;                   /* En dessous des cercles */
            }

            /* ➖ Ligne grise de fond entre les cercles */
            .timeline-line {
              background-color: #e0e0e0;    /* Gris clair */
            }

            /* ➖ Ligne verte animée par-dessus la ligne grise */
            .timeline-line-progress {
              background-color: #4CAF50;    /* Vert Tonal */
              transition: width 0.3s ease;  /* Transition douce lors du changement de largeur */
            }

            /* 🎬 Animation du cercle vert (remplissage progressif) */
            @keyframes fill-pop-in {
              from {
                opacity: 0;                 /* Commence invisible */
                transform: scale(0.5);      /* Petit au départ */
              }
              to {
                opacity: 1;                 /* Devient visible */
                transform: scale(1);        /* À taille normale */
              }
            }







            /* MODAL to send Documents as PDF via email creation  */
            /* ✅ Overlay (fond gris semi-transparent) */
            .modal-overlay {
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              background: rgba(0, 0, 0, 0.3); /* fond gris semi-transparent */
              z-index: 9998; /* derrière le div modal */
              display: none; /* caché par défaut */
            }

            /* ✅ Le div en mode modal fullscreen (centré, blanc) */
            .fullscreen-mode {
              position: fixed !important;
              display: block; /* ou flex si tu as besoin de layout interne */
              top: 50%;
              left: 50%;
              width: 1290px;
              height: 90vh; /* ✅ force la hauteur */
              min-height: 90vh; /* ✅ force la hauteur minimum */
              background: white;
              z-index: 9999;
              overflow: auto;
              padding: 20px;
              box-sizing: border-box;
              transform: translate(-50%, -50%);
              box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
              border-radius: 4px;
                outline: 0px solid red; /* TEMPORAIRE pour voir la hauteur réelle */
            }
        </style>
        <style>
            /* TOGGLE button for sale or rent , private or company etc  */

            .toggle-container {
              display: inline-flex; /* met les boutons côte à côte, effet toggle */
              border-radius: 4px;
              overflow: hidden;
              border: 1px solid #ccc; /* bordure externe pour l’ensemble */
            }

            .toggle-container label {
              flex: 1 1 auto; /* chaque bouton prend 50% */
              text-align: center;
              cursor: pointer;
              background: #eee;
              padding: 10px 20px;
              margin: 0; /* supprime la marge à droite */
              transition: background 0.3s, color 0.3s;
            }

            .toggle-container input[type="radio"] {
              display: none; /* cache les boutons natifs */
            }

            .toggle-container input[type="radio"]:checked + label {
              background: #4CAF50;
              color: #fff;
            }
            @keyframes flash-red-border {
              0%, 100% {
                border-color: red;
              }
              50% {
                border-color: transparent;
              }
            }

            .toggle-error {
              border: 2px solid red;
            }

            .toggle-flash-error {
              animation: flash-red-border 0.5s ease-in-out 10;
            }
        </style>

        <!-- UPPER GLOBAL CONTAINER (CONTACT & COMPANY) -->
        <div id="div_update_record_upper_container" style="width:1210px; gap:14px; margin-bottom: 15px; height: auto; overflow: visible; display:flex; flex-direction:row; border:0px solid blue;">
            <!-- CONTACT -->
            <div id="div_update_record_contact" style=" display: flex;flex-direction: column;overflow:visible; height:100%; width:596px; border:0px solid red;">

                <!-- CONTACT_NUM SELECTBOX BLACK MENU-->
                <div id="contact_num_div_1" style=" position: relative; overflow: visible; background-color: black; border-top-left-radius: 7px;border-top-right-radius: 7px;"> <!-- word-spacing to force linebreak on select options when space between words-->
                    <div id="contact_num_div" class="custom-select , custom-select_1" >
                        <select name="contact_num" id="contact_num" onchange="update_selectbox_company('','');load_contacts('');" autocomplete="off"> <!-- onchange is handled by JS on the custom select box for prefilter script -->
                            {% for option in selectbox_members %}
                                <option value="{{ option.id_contact}}" {% if option.id_contact == default_selected_member_id  %}selected{% endif %}>{{option.contact_last_name}} {{ option.contact_first_name }} - (Fonction here)|{{ option.id_contact}}</option> <!-- | characters between first name and last name important for linebreak-->
                                <!-- id_contact on linebreak so its invisible on the selectbox, use to avoid non triggering function in case of homonymie so the event onchange always see a change with id instead of just name-->
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- BARRE DE MENU + options  et boutons en haut de chaque div CONTACT -->
                <!-- Bloc entier de la barre onglet -->
                <div id="div_tab_update_record_contact_labeltags_wrapper" style="border: yellow 0px solid">

                    <!-- ✅ 1. Ligne de boutons uniquement -->
                    <div id="div_tab_update_record_contact_labeltags" class="tab">
                            <button id="button_tab_update_record_contact_infos" class="tablinks_contact" onclick="create_tabs('button_tab_update_record_contact_infos', 'div_tab_update_record_contact_infos','_contact')">Infos Contact</button>
                            <button id="button_tab_update_record_contact_profil"class="tablinks_contact" onclick="create_tabs('button_tab_update_record_contact_profil', 'div_tab_update_record_contact_profil','_contact')">Profil</button>
                            <button id="button_tab_update_record_contact_alert"class="tablinks_contact" onclick="create_tabs('button_tab_update_record_contact_alert', 'div_tab_update_record_contact_alert','_contact')">Alert</button>
                            <button id="button_tab_update_record_contact_history"class="tablinks_contact" onclick="create_tabs('button_tab_update_record_contact_history', 'div_tab_update_record_contact_history','_contact')">Contact History</button>
                            <button id="button_tab_update_record_contact_new_interaction"class="tablinks_contact" onclick="create_tabs('button_tab_update_record_contact_new_interaction', 'div_tab_update_record_contact_new_interaction','_contact')">New Interaction</button>
                    </div>
                    <!-- vertical spacer-->
                    <div style="height: 10px"></div>
                    <!-- ✅ 2. Les .sub-tab-indicator juste en dessous, mais hors du fond gris -->
                    <div id="div_tab_update_record_contact_labeltags_indicators">
                        <div class="sub-tab-indicator" >
                            <button id="button_contact_infos_save"
                                        class="icon-button"
                                      style="margin-left: 2px; flex-shrink: 0;"
                                      title="Save"
                                      value="save" onclick="">
                                <img src="https://img.icons8.com/ios-filled/50/000000/save--v1.png" alt="Save" width="24" height="24">&nbspSauvegarder
                              </button>
                            <button id="button_remove_contact_from_current_company"
                                        class="icon-button"
                                      style="margin-left: 2px; flex-shrink: 0;"
                                      title="Save"
                                      value="save" onclick="add_or_remove_existing_contact_to_current_company('remove')">
                                <img src="https://img.icons8.com/?size=64&id=nTkpTS1GZpkb&format=png" alt="Save" width="24" height="24">&nbspRetirer contact
                              </button>
                        </div>
                        <div class="sub-tab-indicator" >dddd</div>
                        <div class="sub-tab-indicator" >dddd</div>
                        <div  class="sub-tab-indicator" >dddd</div>
                        <div class="sub-tab-indicator" >dddd</div>
                    </div>
                    <!-- spacer to seperate tab menu bar and sub tab containig the buttons of div (save etc) -->
                    <div id="div_sub_tab_contact_indicator_spacer" class="tab-indicator-spacer" ></div>

                </div>

                <!-- divs contact -->
                <div id="div_tab_update_record_contact_infos" class="tabcontent_contact tabcontent">
                    <div id="div_form_update_record_contact_container" style="display: inline"></div>
                </div>

                <div id="div_tab_update_record_contact_profil" class="tabcontent_contact tabcontent">
                    Profil
                </div>

                <div id="div_tab_update_record_contact_alert" class="tabcontent_contact tabcontent">
                    Alert
                </div>

                <div id="div_tab_update_record_contact_history" class="tabcontent_contact tabcontent">
                    History
                </div>

                <div id="div_tab_update_record_contact_new_interaction" class="tabcontent_contact tabcontent">
                        <div id="div_form_update_record_interaction_container" style=" overflow: hidden; width: 100% ; height:80%; border:5px solid orange;"></div>
                </div>
            </div>

            <!-- COMPANY -->
            <div id="div_update_record_company" style=" display: flex;flex-direction: column;overflow:visible; height:100%; width:596px; border:0px solid red;">
                <!-- COMPANY_NUM SELECTBOX BLACK MENU -->
                <div id="company_num_div_1" style=" position: relative; overflow: visible; background-color: black;border-top-left-radius: 7px;border-top-right-radius: 7px;">
                    <div id="company_num_div" class="custom-select , custom-select_2" >
                            <select name="company_num" id="company_num" onchange="update_selectbox_contact('','');update_selectbox_project();load_company('');" autocomplete="off"> <!-- onchange is handled by JS on the custom select box for prefilter script -->
                                {% for option in selectbox_all_companies %}
                                    <option value="{{ option.id_company}}" data-type="{{ option.company_type}}" {% if option.id_company == selectbox_most_recent_company_members_id  %}selected{% endif %}>{{ option.company_name}}</option>
                                {% endfor %}
                            </select>
                    </div>

                </div>

                <!-- BARRE DE MENU + options  et boutons en haut de chaque div COMPANY -->
                <!-- Bloc entier de la barre onglet -->
                <div id="div_tab_update_record_company_labeltags_wrapper" style="border: yellow 0px solid">
                    <!-- ✅ 1. Ligne de boutons uniquement -->
                    <div id="div_tab_update_record_company_labeltags" class="tab">
                        <button id="button_tab_update_record_company_infos" class="tablinks_company" onclick="create_tabs('button_tab_update_record_company_infos', 'div_tab_update_record_company_infos','_company')">Infos Client</button>
                        <button id="button_tab_update_record_company_addresses"class="tablinks_company" onclick="create_tabs('button_tab_update_record_company_addresses', 'div_tab_update_record_company_addresses','_company')">Adresse de contact</button>
                        <button id="button_tab_update_record_company_history"class="tablinks_company" onclick="create_tabs('button_tab_update_record_company_history', 'div_tab_update_record_company_history','_company')">History of all contacts</button>
                    </div>
                    <!-- vertical spacer-->
                    <div style="height: 10px"></div>
                     <!-- ✅ 2. Les .sub-tab-indicator juste en dessous, mais hors de la menu bar -->
                    <div id="div_tab_update_record_company_labeltags_indicators">
                        <div class="sub-tab-indicator" >
                            <button id="button_company_infos_save"
                                        class="icon-button"
                                      style="margin-left: 2px; flex-shrink: 0;"
                                      title="Save"
                                      value="save" onclick="">
                                <img src="https://img.icons8.com/ios-filled/50/000000/save--v1.png" alt="Save" width="24" height="24">&nbspSauvegarder
                              </button>
                        </div>
                        <div class="sub-tab-indicator" >
                            <button id="button_company_addresses_save"
                                        class="icon-button"
                                      style="margin-left: 2px; flex-shrink: 0;"
                                      title="Save"
                                      value="save" onclick="">
                                <img src="https://img.icons8.com/ios-filled/50/000000/save--v1.png" alt="Save" width="24" height="24">&nbspSauvegarder
                              </button>
                        </div>
                        <div class="sub-tab-indicator" >
                            <button id="button_company_history_save"
                                        class="icon-button"
                                      style="margin-left: 2px; flex-shrink: 0;"
                                      title="Save"
                                      value="save" onclick="">
                                <img src="https://img.icons8.com/ios-filled/50/000000/save--v1.png" alt="Save" width="24" height="24">&nbspSauvegarder
                              </button>
                        </div>

                    </div>
                    <!-- spacer to seperate tab menu bar and sub tab containig the buttons of div (save etc) -->
                    <div id="div_sub_tab_company_indicator_spacer"class="tab-indicator-spacer"></div>
                </div>

                <div id="div_tab_update_record_company_infos" class="tabcontent_company tabcontent">
                    <div id="div_form_update_record_company_container"></div>
                </div>

                <div id="div_tab_update_record_company_addresses" class="tabcontent_company tabcontent">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div id="div_selectbox_update_record_company_address_container" style="display: inline"></div>
                        <button id="button_update_record_edit_company_address" onclick="edit_addresses($('#selectbox_company_address').val(),this.id)">Edit</button>
                        <button id="button_update_record_new_company_address" onclick="edit_addresses('0',this.id)">New Address</button>
                    </div>
                    <div id="div_form_update_record_company_address_container" style="display: inline"></div>
                </div>

                <div id="div_tab_update_record_company_history" class="tabcontent_company tabcontent">
                    History
                </div>
            </div>
        </div>

        <!-- BOTTOM LOWER GLOBAL CONTAINER (PROJECT & DOCUMENTS)-->
        <div id="div_update_record_lower_container " style="width:1210px; border:0px solid red;" >
            <!-- PROJECT_NUM SELECTBOX BLACK MENU -->
            <div id="project_num_div_1" style=" position: relative; overflow: visible; background-color: black; border-top-left-radius: 7px;border-top-right-radius: 7px;">
                <div id="project_num_div" class="custom-select , custom-select_3">
                    <select name="project_num" id="project_num" onchange="load_project('')" autocomplete="off"> <!-- onchange is handled by JS on the custom select box for prefilter script -->
                        {% for option in selectbox_company_project %}
                            <option value="{{ option.id_project}}" data-maturity="{{ option.project_maturity}}" data-credibility="{{ option.project_credibility}}">{{ option.project_denomination}} </option> <!-- selectbox_company_project is already filtered by most recent in views.py -->
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- PROJECT GLOBAL CONTAINER , USEFULL TO HIDE PROJECTS DIV ON NEW COMPANY CREATION -->
            <div id="div_tab_update_record_project_global_container" style="border: #acdd4a 0px solid">
                <!-- BARRE DE MENU + options et boutons en haut de chaque div PROJECT -->
                <!-- Bloc entier de la barre onglet -->
                <div id="div_tab_update_record_project_labeltags_wrapper" style="border: yellow 0px solid">
                    <!-- ✅ 1. Ligne de boutons uniquement -->
                    <!-- PROJETS BOUTONS TAB  -->
                    <div id="div_tab_update_record_project_labeltags" class="tab">
                      <!-- Groupe 1 -->
                      <button id="button_tab_update_record_project_infos" class="tablinks_project tab-group-1"
                        onclick="create_tabs('button_tab_update_record_project_infos', 'div_tab_update_record_project_infos','_project')">
                        Infos Projet
                      </button>
                      <button id="button_tab_update_record_project_alert" class="tablinks_project tab-group-1"
                        onclick="create_tabs('button_tab_update_record_project_alert', 'div_tab_update_record_project_alert','_project')">
                        Alert
                      </button>
                      <button id="button_tab_update_record_project_history" class="tablinks_project tab-group-1"
                        onclick="create_tabs('button_tab_update_record_project_history', 'div_tab_update_record_project_history','_project')">
                        Project History
                      </button>
                      <button id="button_tab_update_record_project_documents" class="tablinks_project tab-group-1"
                        onclick="create_tabs('button_tab_update_record_project_documents', 'div_update_record_project_select_document','_project')">
                        Documents
                      </button><!-- Bouton vide pour étirer<button id="button_tab_update_record_project_filler" class="tablinks_project tab-group-2" style=" height:auto; flex-grow: 1;" disabled></button>-->
                    </div>
                    <!-- vertical spacer-->
                    <div style="height: 10px"></div>
                     <!-- ✅ 2. Les .sub-tab-indicator juste en dessous, mais hors du fond gris -->
                    <div id="div_tab_update_record_project_labeltags_indicators">
                        <div class="sub-tab-indicator" >
                            <button id="button_project_infos_save"
                                        class="icon-button"
                                      style="margin-left: 2px; flex-shrink: 0;"
                                      title="Save"
                                      value="save" onclick="">
                                <img src="https://img.icons8.com/ios-filled/50/000000/save--v1.png" alt="Save" width="24" height="24">&nbspSauvegarder
                              </button>
                        </div>
                        <div class="sub-tab-indicator" >
                            <button id="button_project_alert_save"
                                        class="icon-button"
                                      style="margin-left: 2px; flex-shrink: 0;"
                                      title="Save"
                                      value="save" onclick="">
                                <img src="https://img.icons8.com/ios-filled/50/000000/save--v1.png" alt="Save" width="24" height="24">&nbspSauvegarder
                              </button>
                        </div>
                        <div class="sub-tab-indicator" >
                            <button id="button_project_history_save"
                                        class="icon-button"
                                      style="margin-left: 2px; flex-shrink: 0;"
                                      title="Save"
                                      value="save" onclick="">
                                <img src="https://img.icons8.com/ios-filled/50/000000/save--v1.png" alt="Save" width="24" height="24">&nbspSauvegarder
                              </button>
                        </div>
                    </div>
                    <!-- spacer to seperate tab menu bar and sub tab containig the buttons of div (save etc) -->
                    <div id="div_sub_tab_project_indicator_spacer" class="tab-indicator-spacer" ></div>

                </div>

                <!-- PROJET INFOS -->
                <div id="div_tab_update_record_project_infos" class="tabcontent_project tabcontent-project">
                    <div id="div_form_update_record_project_container" style="display: inline; " ></div>
                </div>

                <!-- PROJECT ALERT -->
                <div id="div_tab_update_record_project_alert" class="tabcontent_project tabcontent-project">
                    Alert
                </div>

                <!-- PROJET HISTORY -->
                <div id="div_tab_update_record_project_history" class="tabcontent_project tabcontent-project">
                    History
                </div>

                <!-- PROJET DOCUMENTS  -->
                <!-- GLOBAL DOCUMENTS   -->
                <div id="div_update_record_project_select_document" style="display: none; border: orange solid 0px; margin-top:3px; align-items: flex-start; height:calc(100vh - 495px); background-color: white; gap: 8px; overflow-x: hidden; overflow-y: hidden; white-space: nowrap;">
                  <!-- GLOBAL DOCUMENTS DIV MENU + DIV -->
                    <div id="div_update_record_project_select_document_container" style="display: flex; flex-direction: column; height:100%; max-width: 1210px;width: 100%;box-sizing: border-box;background-color: white; border-width: 2px 2px 2px 2px;border-style: solid;border-color: darkgrey; border-radius: 7px 7px 7px 7px ; flex-shrink: 0; min-width: 200px; flex-grow: 1; padding: 10px 10px 10px 10px; overflow: visible;">
                         <!-- 📦 Regroupement des éléments inline -->
                        <div style="display: flex; z-index: 0;  position: relative; align-items: center; gap: 0px; flex-wrap: wrap; border-width: 2px 2px 0px 2px;border-style: solid;border-color: darkgrey; background:linear-gradient(to right,whitesmoke 50%, #e0e0e0 50%); border-radius:  7px 7px 0 0   ;">
                            <div style="display: flex; flex-direction: row; width: 700px; height: 60px; align-items: center; border-width: 0px 2px 0px 0px;border-style: solid;border-color: darkgrey; background-color: whitesmoke; border-radius:7px 0 0 0;">

                                <span id="span_selectbox_update_record_sales_documents_edit_id" style="padding: 0px 30px; width: 110px; flex-shrink: 0;">
                                  Version :
                                </span>

                                <div id="div_selectbox_update_record_sales_documents_edit_id" style="display: flex; align-items: center; gap: 5px; flex-grow: 1;">
                                    <!-- onchange event géré en JS dans update_selectbox_sales_documents_edit -->
                                    <select id="selectbox_update_record_sales_documents_edit_id" class="my-select" style="width: 300px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; flex-shrink: 0; margin-right: 2px;">
                                    </select>
                                    <button id="button_sales_documents_global_save"
                                          class="icon-button"
                                          style="margin-left: 2px; flex-shrink: 0;"
                                          title="Save"
                                          value="save" onclick="window.exportFormat = this.value; before_submit_sales_documents_edit(arguments[0])"><!-- arguments[0] repalce event which is deprecated -->
                                            <img src="https://img.icons8.com/ios-filled/50/000000/save--v1.png" alt="Save" width="24" height="24">&nbspSauvegarder
                                    </button>

                                    <button id="button_sales_documents_duplicate"
                                            class="icon-button"
                                            style="margin-left: 2px; flex-shrink: 0; margin-right: 50px;"
                                            title="Duplicate"
                                            onclick=copy_selected_sales_document()>
                                            <img src="https://img.icons8.com/?size=100&id=38991&format=png" alt="Duplicate" width="24" height="24">&nbspDupliquer
                                    </button>
                                </div>
                            </div>
                            <!-- SECTION EXPORT -->
                            <div style="display: flex; flex-direction: row; align-items: center; padding: 0px 15px; width: 482px; height: 60px; flex-shrink: 0; border: #acdd4a 0px solid; border-radius:  0 5px 0 0   ;">

                                <span id="span_selectbox_update_record_sales_documents_edit_type" style="padding: 0px 0px; width: 75px; flex-shrink: 0;">
                                    Type :
                                </span>

                                <select id="selectbox_update_record_sales_documents_edit_type" class="my-select" style="width: 360px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; flex-shrink: 0; margin-right: 2px;">
                                </select>


                            </div>
                        </div>
                        <div style="display: flex; z-index: 1; position: relative; top:-5px; flex-direction: row; border-width: 0px 2px 2px 2px;border-style: solid;border-color: darkgrey; background:linear-gradient(to right,whitesmoke 50%, #e0e0e0 50%); border-radius:0 0 7px 7px;">
                             <div style="display: flex; flex-direction: row; width: 700px; height: 60px; border-width: 0px 2px 0px 0px;border-style: solid;border-color: darkgrey; background-color: whitesmoke; border-radius:0 0 0 7px;">
                                <!-- ⬇️ Timeline  -->
                                <div id="div_update_record_project_sales_documents_timeline" style="width: 100%; height:60px; padding-top: 15px;"></div>
                             </div>

                             <div style=" padding: 10px 15px 0px; width: 475px; flex-shrink: 0;  border: #acdd4a 0px solid; border-radius:  0 0 7px 0   ;">

                                 <span id="span_selectbox_update_record_sales_documents_edit_format" style="padding: 0px 8px 0px 0px; width: 90px; flex-shrink: 0; ">
                                    Format :
                                </span>

                                 <button id="button_sales_documents_global_previewl"
                                          class="icon-button"
                                          style="margin-left: 5px; flex-shrink: 0;"
                                          title="Export to Excel"
                                          value="preview" onclick="window.exportFormat = this.value; before_submit_sales_documents_edit(arguments[0])"><!-- arguments[0] repalce event which is deprecated -->
                                    <img src="https://img.icons8.com/?size=100&id=10576&format=png" alt="Aperçu" width="24" height="24">&nbspAperçu
                                 </button>


                                 <button id="button_sales_documents_global_export_to_excel"
                                          class="icon-button"
                                          style="margin-left: 5px; flex-shrink: 0;"
                                          title="Export to Excel"
                                          value="xlsx" onclick="window.exportFormat = this.value; before_submit_sales_documents_edit(arguments[0])"><!-- arguments[0] repalce event which is deprecated -->
                                    <img src="https://img.icons8.com/ios-filled/50/000000/ms-excel.png" alt="Excel" width="24" height="24">&nbspExcel
                                 </button>

                                 <button id="button_sales_documents_global_export_to_pdf"
                                          class="icon-button"
                                          style="flex-shrink: 0;"
                                          title="Export to PDF"
                                          value="pdf" onclick="window.exportFormat = this.value; before_submit_sales_documents_edit(arguments[0])"><!-- arguments[0] repalce event which is deprecated -->
                                    <img src="https://img.icons8.com/ios-filled/50/000000/pdf.png" alt="PDF" width="24" height="24">&nbspPDF
                                 </button>

                                 <button id="button_sales_documents_global_send_pdf_via_mail"
                                          class="icon-button"
                                          style="flex-shrink: 0;"
                                          title="Send by Email"
                                          value="form_pdf_mail" onclick="window.exportFormat = this.value; before_submit_sales_documents_edit(arguments[0])"><!-- arguments[0] repalce event which is deprecated -->
                                    <img src="https://img.icons8.com/ios-filled/50/000000/new-post.png" alt="Email" width="24" height="24">&nbspMail&nbsp(PDF)
                                 </button>
                             </div>
                         </div>

                        <div style="margin-bottom: 15px;"></div>

                        <div id="div_tab_update_record_project_documents_labeltags" class="tab" style=" margin-bottom: 0px;border-width: 2px 2px 0px 2px;border-style: solid;border-color: darkgrey; border-radius:  7px 7px  0 0 ;">
                            <!-- Groupe 2 -->
                            <button id="button_tab_update_record_project_document_infos" class="tablinks_documents tab-group-documents"
                                onclick="create_tabs('button_tab_update_record_project_document_infos', 'div_tab_update_record_project_document_infos','_documents')">
                                Infos Devis
                            </button>
                            <button id="button_tab_update_record_project_documents_products" class="tablinks_documents tab-group-documents"
                                onclick="create_tabs('button_tab_update_record_project_documents_products', 'div_tab_update_record_project_documents_products','_documents')">
                                Produits & Services
                            </button>
                            <button id="button_tab_update_record_project_billing" class="tablinks_documents tab-group-documents"
                                onclick="create_tabs('button_tab_update_record_project_billing', 'div_tab_update_record_project_billing','_documents')">
                                Conditions de Facturation
                            </button>
                            <button id="button_tab_update_record_project_delivery" class="tablinks_documents tab-group-documents"
                                onclick="create_tabs('button_tab_update_record_project_delivery', 'div_tab_update_record_project_delivery','_documents')">
                                Conditions de Livraison
                            </button>

                            <button id="button_tab_update_record_project_payment_conditions" class="tablinks_documents tab-group-documents"
                                onclick="create_tabs('button_tab_update_record_project_payment_conditions', 'div_tab_update_record_project_payment_conditions','_documents')">
                                Conditions de Paiements
                            </button>
                            <button id="button_tab_update_record_project_payment_tracking" class="tablinks_documents tab-group-documents"
                                onclick="create_tabs('button_tab_update_record_project_payment_tracking', 'div_tab_update_record_project_payment_tracking','_documents')">
                                Suivi des Paiements
                            </button>
                        </div>

                        <!-- DOCUMENTS MAIN GLOBAL INFO-->
                        <div id="div_tab_update_record_project_document_infos" class="tabcontent_documents tabcontent-project">
                            <div id="div_master_sales_documents_infos"></div>
                        </div>

                        <!-- DOCUMENT PRODUCTS EDIT-->
                        <div id="div_tab_update_record_project_documents_products" class="tabcontent_documents tabcontent-project" >
                            <!-- modal full screen sales document-->
                            <div id="modal_overlay" class="modal-overlay"></div>
                            <div id="div_full_sales_documents_edit" style="display: inline-block; max-height: 300px; overflow: hidden;">

                                <!-- sales documents div to happend -->
                                <div id="div_master_sales_documents_edit" class="list-group" style="height:300px;border: 0px solid yellow; display: inline-flex; align-content: flex-start"></div>
                            </div>
                        </div>

                        <!-- FACTURATION -->
                        <div id="div_tab_update_record_project_billing" class="tabcontent_documents tabcontent-project">

                            <div id="div_master_sales_documents_billing"></div>

                        </div>

                        <!-- LIVRAISON-->
                        <div id="div_tab_update_record_project_delivery" class="tabcontent_documents tabcontent-project">
                            <div id="div_master_sales_documents_delivery"></div>
                        </div>



                        <!-- CONDITIONS DE PAIEMENT -->
                        <div id="div_tab_update_record_project_payment_conditions" class="tabcontent_documents tabcontent-project" style="padding:0">
                            <div id="div_master_sales_documents_payment_conditions"></div>

                        </div>

                        <!-- SUIVI DES PAIEMENTS -->
                        <div id="div_tab_update_record_project_payment_tracking" class="tabcontent_documents tabcontent-project" style="padding:0">
                            <div id="div_master_sales_documents_payment_tracking"></div>

                        </div>


                    </div>
                </div>

                <!-- EMAIL FORM -->
                <div id="modalOverlay" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0, 0, 0, 0.5);z-index:999;"></div>
                <div id="emailModal" style="display:none; position:fixed; top:5%; left:50%; transform:translateX(-50%); background:white; padding:20px; border:1px solid #ccc; border-radius:12px; z-index:1000; width:1000px; height:1000px; overflow:auto;">
                  <form id="emailForm">
                    <h3 id="title_emailForm">Envoyer PDF par Email</h3>

                    <!-- Champ À -->
                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
                      <label style="min-width: 60px;">À :</label>
                        <div style="display: flex; align-items: center; gap: 0px; width: 474px">
                          <div id="toChips" style="width: 500px; border-radius: 7px 0 0 7px; height: 38px; border: 1px solid #ccc; padding: 5px; display: flex; flex-wrap: wrap; overflow-y: auto; overflow-x: hidden;"></div>
                          <button type="button" class="clear-button" onclick="clearChips('toChips', 'emailTo')" title="Effacer">X</button>
                          <input type="hidden" id="emailTo" name="email">
                        </div>
                      <select id="selectEmailToCompany" class="my-select" onchange="addChipFromSelect(this, 'toChips', 'emailTo')" style="max-width: 200px;"></select>
                      <select id="selectEmailToUser"  class="my-select" onchange="addChipFromSelect(this, 'toChips', 'emailTo')" style="max-width: 200px;"></select>
                    </div>

                    <!-- Champ CC -->
                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
                      <label style="min-width: 60px;">CC :</label>
                        <div style="display: flex; align-items: center; gap: 0px; width: 474px">
                            <div id="ccChips" style="width: 500px; border-radius: 7px 0 0 7px; height: 38px; border: 1px solid #ccc; padding: 5px; display: flex; flex-wrap: wrap; overflow-y: auto; overflow-x: hidden;"></div>
                            <button type="button" class="clear-button" onclick="clearChips('ccChips', 'emailCc')" title="Effacer">X</button>
                            <input type="hidden" id="emailCc" name="cc">
                        </div>
                      <select id="selectEmailCcCompany" class="my-select" onchange="addChipFromSelect(this, 'ccChips', 'emailCc')" style="max-width: 200px;"></select>
                      <select id="selectEmailCcUser" class="my-select" onchange="addChipFromSelect(this, 'ccChips', 'emailCc')" style="max-width: 200px;"></select>
                    </div>

                    <!-- Champ CCI -->
                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
                      <label style="min-width: 60px;">CCI :</label>
                        <div style="display: flex; align-items: center; gap: 0px; width: 474px">
                            <div id="bccChips" style="width: 500px; border-radius: 7px 0 0 7px; height: 38px; border: 1px solid #ccc; padding: 5px; display: flex; flex-wrap: wrap; overflow-y: auto; overflow-x: hidden;"></div>
                            <button type="button" class="clear-button" onclick="clearChips('bccChips', 'emailBcc')" title="Effacer">X</button>
                            <input type="hidden" id="emailBcc" name="bcc">
                        </div>
                      <select id="selectEmailBccCompany" class="my-select" onchange="addChipFromSelect(this, 'bccChips', 'emailBcc')" style="max-width: 200px;"></select>
                      <select id="selectEmailBccUser" class="my-select" onchange="addChipFromSelect(this, 'bccChips', 'emailBcc')" style="max-width: 200px;"></select>
                    </div>

                     <!-- Objet -->
                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
                      <label for="emailSubject" style="min-width: 60px; margin-left: 0; padding-left: 0;">Objet :</label>
                      <input type="text" id="emailSubject" name="subject" autocomplete="off" style="width: 950px;">
                    </div>

                    <label>Contenu :</label><br>
                    <div id="emailContent" contenteditable="true" style="border:1px solid #ccc; height:250px; padding:10px; overflow:auto;"></div><br>

                    <!-- Outils de mise en forme -->
                    <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                      <button type="button" onclick="document.execCommand('bold')" title="Gras"><b>B</b></button>
                      <button type="button" onclick="document.execCommand('italic')" title="Italique"><i>I</i></button>
                      <button type="button" onclick="document.execCommand('underline')" title="Souligné"><u>U</u></button>

                      <label for="colorPicker" title="Couleur du texte">🎨</label>
                      <input type="color" id="colorPicker" value="#000000" onchange="changeTextColor(this.value)">

                      <label for="fontSizePicker" title="Taille du texte">🔠</label>
                      <select id="fontSizePicker" class="my-select" onchange="changeFontSize(this.value)">
                        <option value="1">Très petit</option>
                        <option value="2">Petit</option>
                        <option value="3" selected>Moyen</option>
                        <option value="4">Grand</option>
                        <option value="5">Très grand</option>
                        <option value="6">Énorme</option>
                        <option value="7">Gigantesque</option>
                      </select>

                      <label for="fontFamilyPicker" title="Police">🔤</label>
                      <select id="fontFamilyPicker" class="my-select" onchange="changeFontFamily(this.value)">
                        <option value="Arial" selected>Arial</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Courier New">Courier New</option>
                        <option value="Times New Roman">Times New Roman</option>
                        <option value="Verdana">Verdana</option>
                      </select>
                    </div><br>

                    <!-- Pièce jointe personnalisée -->
                    <!-- Input fichier -->
                    <label for="customAttachment">Ajouter une pièce jointe :</label><br>
                    <input type="file" id="customAttachment" name="custom_attachment" multiple onchange="handleFileSelection(this)"><br><br>

                    <!-- Zone d’aperçu -->
                    <ul id="attachmentList" style="list-style:none; padding:0; height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px;"></ul>
                    <button type="button" onclick="submitEmailModal()">Valider</button>
                    <button type="button" onclick="resetEmailEditor(); $('#emailModal').hide(); $('#modalOverlay').hide();">Annuler</button>
                  </form>
                </div>
            </div>
        </div>

        <!-- 🧾 Modale de gestion de conflit pour la sauvegarde des forms si modifications par un autre user entre temps-->
        <div id="conflictModal" style="display:none; position:fixed; z-index:9999; background:white; border:1px solid #ccc; padding:20px; max-width:700px; left:50%; top:50%; transform:translate(-50%, -50%); box-shadow:0 0 20px rgba(0,0,0,0.3); overflow-y:auto; max-height:90vh;">
          <h3 style="margin-bottom: 10px;">
            <span id="conflictUserName" style="font-weight: normal; font-size: 16px;"></span>
          </h3>
          <form id="conflictResolutionForm">
            <div id="conflictFieldsContainer"></div>
            <div style="margin-top:20px; text-align:right;">
              <button type="button" id="cancelConflictResolution">Annuler</button>
              <button type="submit" id="confirmConflictResolution" style="margin-left: 10px;">Sauvegarder</button>
            </div>
          </form>
        </div>

    {% endif %}
{% endblock %}