/* CSS pour bloquer le scroll du BODY */
body.modal-open {
    overflow: hidden; /* Empêche le défilement vertical */
    position: fixed; /* Fixe le body pour éviter les sauts de page au défilement */
    width: 100%; /* Important pour maintenir la largeur */
}
/* Cache l'arrière-plan de la modale par défaut */
.ispag-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none; /* Masqué par JavaScript lors du chargement */
}

/* Contenu de la modale */
.ispag-modal-content {
    background: #fff;
    width: 500px; 
    max-width: 90%;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    position: absolute; /* ESSENTIEL pour la fonctionnalité de déplacement */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage initial */
    overflow: hidden;
}

/* En-tête : Zone de saisie pour le glisser-déposer */
.ispag-modal-header {
    cursor: grab; /* Indique la capacité de glisser-déposer */
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7;
}

.ispag-modal-header h4 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
}

.ispag-close-modal {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    line-height: 1;
    color: #555;
}

/* Corps et pied de page */
.ispag-modal-body, .ispag-modal-footer {
    padding: 15px;
}

/* Style de la zone de saisie */
#note-text-area {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    resize: vertical;
    min-height: 150px;
    font-family: inherit;
}

/* Barre d'outils (style imité) */
.ispag-toolbar {
    display: flex;
    gap: 15px;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #666;
    user-select: none;
}
.ispag-toolbar span, .ispag-toolbar .dashicons {
    cursor: pointer;
}

/* Entités liées */
.ispag-linked-entities {
    margin-bottom: 20px;
    font-size: 0.9em;
}

.ispag-linked-entities label {
    font-weight: bold;
    margin-right: 10px;
    color: #333;
}

.linked-entity-tag {
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 12px;
    padding: 3px 10px;
    margin-right: 5px;
    margin-top: 5px;
    border: 1px solid #ddd;
}

/* Option de tâche */
.ispag-task-toggle-section {
    padding: 15px 0;
    border-top: 1px solid #eee;
    font-size: 0.95em;
}

#task-due-date {
    margin-left: 5px;
    padding: 5px;
}

/* CSS de base pour la modale ou le panneau latéral */
#ispag-activity-detail-panel {
    /* Cache l'élément par défaut, le JS s'occupe de l'afficher */
    display: none; 
    
    /* Positionne au-dessus de tout */
    position: fixed;
    top: 0;
    left: 0; /* Si c'est un overlay complet */
    /* ou right: 0; top: 0; bottom: 0; width: 400px; pour un panneau latéral */
    
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Couleur de fond semi-transparente */
    z-index: 99999; /* Très élevé pour être au-dessus de tout */
    overflow-y: auto;
}

/* Le contenu de la modale/panneau */
#ispag-activity-detail-panel .ispag-detail-content-wrapper {
    /* Si c'est une modale centrée */
    background: white; 
    margin: 50px auto;
    width: 80%;
    max-width: 800px;
}
.ispag-task-scheduling {
    display: flex; /* Active Flexbox */
    gap: 20px; /* Espace entre les deux groupes (Date et Rappel) */
    padding: 15px 0;
    border-top: 1px solid #eee;
}

.ispag-task-scheduling .scheduling-group {
    flex-grow: 1; /* Permet à chaque groupe (Date/Rappel) de prendre la moitié de l'espace */
    flex-basis: 0; /* Assure que la croissance est équilibrée */
}

/* Style spécifique pour la date et l'heure si vous avez les deux */
.ispag-task-scheduling .scheduling-inputs {
    display: flex;
    gap: 10px; /* Espace entre les champs date et heure */
}

.ispag-task-scheduling input.ispag-edit-input {
    /* Assure que chaque champ dans scheduling-inputs prend la moitié de l'espace disponible */
    flex-grow: 1; 
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* 1. Assurez-vous que le conteneur prend toute la largeur */
.ispag-activity-body {
    padding: 15px 0; /* Ajoute un peu d'espace vertical autour du textarea */
    width: 100%; /* S'assure qu'il utilise toute la largeur du panneau */
}

/* 2. Style du TEXTAREA lui-même */
textarea.ispag-edit-textarea {
    /* Largeur et affichage */
    width: 100%; /* TRÈS important : prend toute la largeur du conteneur parent */
    display: block; /* S'assure qu'il se comporte comme un bloc */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur/hauteur totale */
    
    /* Hauteur */
    min-height: 200px; /* HAUTEUR MINIMALE : par exemple, 200px, vous pouvez ajuster */
    height: auto; /* Permet à la hauteur de s'étendre si l'utilisateur redimensionne */

    /* Style visuel */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical; /* Permet uniquement le redimensionnement vertical (optionnel, mais recommandé) */
    font-size: 14px;
    line-height: 1.5;
}
/* CSS pour les tâches complétées */
.ispag-activity-item.is-completed .ispag-activity-card {
    background-color: #f7fcf7; /* Fond très légèrement vert */
    opacity: 0.8;
}

.ispag-activity-item.is-completed .ispag-activity-content {
    text-decoration: line-through; /* Barrer le texte */
    color: #a0a0a0; /* Rendre le texte gris */
}

/* On peut aussi masquer l'icône de complétion si elle est encore présente */
.ispag-activity-item.is-completed .complete-task-btn {
    display: none;
}


/* -------------------------------------------------------------------------- */
/* --- 9. Journal d'activité (Tâches, Réunions, Notes) --- */
/* -------------------------------------------------------------------------- */

.ispag-activity-log {
    margin-top: 10px;
}

/* Styles pour les séparateurs (À venir, Novembre 2025) */
.ispag-activity-log h5 {
    color: #555;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 10px; /* Laisse un peu d'espace avant la carte */
    padding-bottom: 5px;
    border-bottom: none; /* Pas de ligne sous les titres de regroupement */
}

/* ------------------------------------------------ */
/* --- LE NOUVEAU CONTENEUR "CARTE" (ISPAG-CARD) --- */
/* ------------------------------------------------ */

.ispag-activity-card {
    /* Style de la carte */
    background-color: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 8px; /* Bords arrondis */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Ombrage léger */
    margin-bottom: 15px; /* Espace entre les cartes */
    padding: 10px 15px; /* Espace intérieur de la carte */
    
    /* Le contenu à l'intérieur de la carte */
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ispag-activity-card:hover {
    border-color: #d1d9e2; /* Bordure légèrement plus foncée au survol */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------ */
/* --- Style de l'élément d'activité général (PAS DE BORDURE ICI) --- */
/* ------------------------------------------------ */

.ispag-activity-item {
    /* Ces styles sont déportés dans .ispag-activity-card */
    padding: 0; /* Important pour que la carte gère le padding */
    border-bottom: none; /* Supprime la ligne de séparation de liste */
    margin-bottom: 0;
}


/* ------------------------------------------------ */
/* --- Icônes et indicateurs --- */
/* ------------------------------------------------ */

.ispag-activity-card .activity-icon {
    font-size: 18px; 
    margin-right: 15px;
    flex-shrink: 0;
    width: 20px; 
    text-align: center;
}

/* Couleurs par défaut et par type d'activité */
.ispag-activity-card .activity-icon { color: #666; } /* Couleur par défaut */
.ispag-activity-item.type-task .activity-icon { color: var(--ispag-red); }
.ispag-activity-item.type-meeting .activity-icon { color: var(--ispag-blue); }
.ispag-activity-item.type-email .activity-icon { color: var(--ispag-blue); }
.ispag-activity-item.type-note .activity-icon { color: #0073aa; }


/* ------------------------------------------------ */
/* --- Contenu et Métadonnées (Les styles internes restent) --- */
/* ------------------------------------------------ */

.ispag-activity-content {
    flex-grow: 1; 
    padding-right: 15px;
}

.ispag-activity-content h6 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
}

.ispag-activity-content p {
    margin: 0;
    font-size: 13px;
    color: #6a6e71; 
    line-height: 1.4;
}

.ispag-activity-meta {
    flex-shrink: 0;
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ispag-activity-meta .ispag-activity-date {
    display: block;
    white-space: nowrap;
}


/* ------------------------------------------------ */
/* --- Métadonnées (Date, Utilisateur) --- */
/* ------------------------------------------------ */

.ispag-activity-meta {
    flex-shrink: 0;
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ispag-activity-meta .ispag-activity-date {
    display: block;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* --- 9.1 Styles des Actions d'activité (Modifier/Supprimer/Traité) --- */
/* -------------------------------------------------------------------------- */

/* Conteneur des boutons à droite */
.ispag-activity-actions {
    display: flex;
    align-items: center;
    margin-left: 15px; 
}

.ispag-activity-actions .ispag-action-btn {
    background: none;
    border: none;
    color: #999;
    padding: 5px 8px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    border-radius: 4px;
}

.ispag-activity-actions .ispag-action-btn:hover {
    color: #333;
    background-color: #f0f0f0;
}

/* Bouton "Marquer comme traité" (Checkmark) */
.ispag-activity-actions .complete-task-btn {
    color: var(--ispag-success-color); /* Vert pour l'action principale */
}

/* ------------------------------------------------ */
/* --- Dropdown d'actions (Menu 3 points) --- */
/* ------------------------------------------------ */

.ispag-dropdown-actions {
    position: relative;
    display: inline-block;
}

.ispag-dropdown-actions .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Sous le bouton */
    right: 0;
    z-index: 100;
    min-width: 150px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 5px 0;
    margin: 0;
}

/* Afficher le menu quand la classe est active (gérée par JS) */
.ispag-dropdown-actions.active .dropdown-menu {
    display: block;
}

.ispag-dropdown-actions .dropdown-menu li {
    padding: 0;
    margin: 0;
}

.ispag-dropdown-actions .dropdown-menu .ispag-action-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 15px;
    font-size: 13px;
    color: #333;
}

.ispag-dropdown-actions .dropdown-menu .ispag-action-btn:hover {
    background-color: #f7f7f7;
    color: #007bff;
}
/* -------------------------------------------------------------------------- */
/* --- 10. Panneau de Détail d'Activité (Modal/Tiroir) --- */
/* -------------------------------------------------------------------------- */

/* (Le style de la modale/du tiroir lui-même doit être défini ici) */

.ispag-detail-modal-content {
    padding: 20px;
    font-family: sans-serif;
    /* max-width: 600px; si c'est une modale centrée */
    /* width: 400px; float: right; si c'est un tiroir */
}

/* En-tête */
.ispag-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.ispag-detail-title {
    display: flex;
    align-items: center;
}

.ispag-detail-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Sections du formulaire de tâche */
.ispag-detail-section {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #f0f0f0;
}

.ispag-task-scheduling input,
.ispag-task-scheduling select {
    margin-right: 10px;
    /* Utiliser vos styles .ispag-edit-input */
}
.ispag-detail-panel {
    position: fixed; /* Reste fixe même si l'utilisateur scroll */
    left: 0;
    bottom: 0; /* Ancrer le panneau au bas de la fenêtre */
    width: 100%; /* S'étendre sur toute la largeur */
    height: 350px; /* Définir une hauteur fixe (ajustez selon vos besoins) */
    
    background-color: #fff;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1); /* Ombre portée vers le haut */
    z-index: 9999; 
    
    /* Optionnel : cacher initialement via CSS si vous avez besoin de le masquer par défaut */
    /* display: none; */ 
}

/* Style pour le contenu à l'intérieur */
#static-detail-placeholder {
    padding: 20px;
    height: 100%;
    overflow-y: auto; /* Permet de scroller le contenu si nécessaire */
}

/* Overlay et Modale */
.ispag-modal-overlay {
    display: none; /* Cache par défaut, montré par JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    overflow-y: auto;
}

.ispag-modal-content {
    background: #fff;
    width: 90%;
    max-width: 500px; /* Taille similaire à l'image */
    margin: 50px auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ispag-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.ispag-modal-close {
    cursor: pointer;
    font-size: 24px;
    color: #888;
}
/* --- 3. ENTITÉS LIÉES ET CHAMPS DE SAISIE --- */
.ispag-linked-entities {
    margin-bottom: 20px;
}

.ispag-linked-entities label {
    font-weight: 600;
    color: #555;
    margin-right: 10px;
}

.linked-entity-tag {
    display: inline-block;
    padding: 4px 8px;
    margin-right: 5px;
    background-color: #e6f3ff;
    color: #0073aa;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
}

/* Saisie de texte (Note/Description du meeting) */
#note-text-area {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 15px;
}

/* --- 4. CHAMPS SPÉCIFIQUES AUX MEETINGS --- */
.ispag-meeting-fields hr, .ispag-call-fields hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 15px 0;
}

.ispag-meeting-field-row {
    display: flex; /* Active le mode Flexbox */
    gap: 20px;     /* Espace entre chaque groupe (Attendee, Company, Deal) */
    flex-wrap: wrap; /* Permet le retour à la ligne si l'écran est trop petit */
    align-items: flex-start; /* Assure que les éléments s'alignent en haut si les hauteurs varient */
}
.ispag-field-group {
    /* Prend 1/3 de l'espace sur la ligne */
    flex: 1 1 30%; 
    
    /* Active le mode Flexbox pour ce groupe */
    display: flex; 
    /* Empile les enfants verticalement (Label puis Select) */
    flex-direction: column; 
    /* Assure que tous les éléments à l'intérieur s'étendent à 100% de la largeur du groupe */
    width: 100%;
}

.ispag-meeting-field-row label {
    display: block; /* S'assure qu'il prend toute la largeur disponible et force le Select à la ligne */
    font-weight: 600;
    margin-bottom: 5px; /* Ajoute un petit espace au-dessous du label */
    color: #333;
    /* ... et en Flexbox, il s'alignera automatiquement au-dessus de son select. */
}

/* Conteneur pour aligner Date, Heure et Outcome */
.ispag-date-time-outcome {
    display: flex;
    gap: 15px; /* Espace entre les groupes de champs */
    margin-bottom: 15px;
}

.ispag-field-group {
    flex: 1; /* Chaque groupe prend une part égale de l'espace */
    min-width: 0; /* Permet un rétrécissement adéquat */
}

/* Style des selects et inputs de date/heure */
.ispag-date-time-outcome input[type="date"],
.ispag-date-time-outcome input[type="time"],
.ispag-date-time-outcome select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* --- 5. BARRE D'OUTILS ET TÂCHE DE SUIVI --- */
.ispag-toolbar {
    padding: 8px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.ispag-toolbar span {
    margin-right: 10px;
    cursor: pointer;
    color: #555;
    font-size: 1.1em;
    transition: color 0.2s;
}

.ispag-toolbar span:hover {
    color: #0073aa;
}

.ispag-task-toggle-section {
    font-size: 0.95em;
    color: #444;
    padding-top: 10px;
}

.ispag-task-toggle-section select {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0 5px;
}