/* Cacher uniquement "Tous les produits" */
span[data-id="all_product"] {
    display: none !important;
}

/*Cacher uniquement le titre "Related Product" */
span[data-id="related_product"] {
    display: none !important;
}

/*Cacher la pagination des produits */
/*div.SearchProduct__pagination {
    display: none !important;
}*/

/*Cacher loupe recherche */
.SearchProduct__productSearch {
    display: none !important;
}

/*Cacher departement */
#field_departmentId {
    display: none !important;
}

/* Cacher les éléments du menu des canaux */
div[data-id="Twitter_channel_filter_item"],
div[data-id="Facebook_channel_filter_item"],
div[data-id="Forums_channel_filter_item"],
div[data-id="MPITmitra_channel_filter_item"],
div[data-id="Chat_channel_filter_item"],
div[data-id="Instagram_channel_filter_item"]
{
    display: none !important;
}


/* Réduire la taille de la fenêtre modale selon le nombre d'éléments */
.OverlayPopup__openPopup {
    width: auto !important;  /* Largeur ajustable */
    max-width: 500px !important;  /* Largeur maximale */
    min-width: 300px !important;  /* Largeur minimale */
    height: auto !important;  /* Hauteur s'adapte au contenu */
    max-height: 80vh !important;  /* Empêche une hauteur excessive */
    overflow: hidden !important;
}

/* Ajuster la hauteur du contenu de la liste */
.SearchProduct__productContent {
    max-height: 400px !important;  /* Hauteur maximale pour éviter un affichage trop grand */
    min-height: 50px !important;  /* Hauteur minimale pour éviter une fenêtre trop petite */
    overflow-y: auto !important;  /* Ajoute une barre de défilement si nécessaire */
    padding: 10px; /* Ajoute un peu d'espace pour éviter que les éléments soient collés */
}

/* Masquer le nom de l'agent dans les tickets et les réponses */
.zd-agent-name, 
.zd-ticket-author, 
.ticket-agent-info, 
.zd-comment-agent-name, 
.zd-ticket-details .agent-name {
    display: none !important;
}

/* Masquer l'avatar de l'agent */
.zd-agent-avatar, 
.ticket-agent-avatar, 
.zd-comment-avatar, 
.agent-profile-pic {
    display: none !important;
}

/*Cacher titre recherche */
.Header__description {
    display: none !important;
}

/* Cacher barre de recherche */
#searchContainer1 {
    display: none !important;
}

/* Conteneur global des deux colonnes */
.Layout__twoColumn {
    display: flex !important;
    gap: 20px !important; /* Ajoute un espace entre les cadres */
    align-items: flex-start !important; /* Aligne les éléments en haut */
}

/* Encadrer la liste des tickets */
.Layout__layout1 {
    border: 3px solid #f5a623 !important;  /* Couleur orange-jaune */
    border-radius: 12px !important;  /* Arrondi sur tous les coins */
    padding: 15px !important;
    background-color: #fff !important;
    box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.3) !important; /* Ombre marquée */
    flex-grow: 1 !important; /* Permet de s'ajuster à la hauteur du contenu */
    display: flex !important;
    flex-direction: column !important;
}

/* Encadrer la colonne latérale "Vues" */
.Layout__layout2 {
    position: sticky !important;
    top: 20px !important; /* Distance depuis le haut de la fenêtre */
    height: fit-content !important; /* Ajuste la hauteur au contenu */
    align-self: flex-start !important; /* Empêche l'étirement */
}

/* Ajuster la hauteur pour qu'elle suive le contenu */
.Layout__layout1, .Layout__layout2 {
    height: auto !important;
    min-height: fit-content !important; /* Ajuste au contenu */
    max-height: 90vh !important; /* Empêche une fenêtre trop grande */
    overflow: hidden !important;
}

/* Masquer le filtre de département */
.TicketList__filter_department {
    display: none !important;
}

.agent_avatar {
    color: transparent; /* Cache le texte existant */
    position: relative;
}

.agent_avatar::after {
    content: "TM"; 
    color: orange; /* Remet la couleur du texte */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: inherit;
}

.agent_name {
    color: transparent; /* Cache le texte original */
    position: relative;
}

.agent_name::after {
    content: "Team Mitra"; /* Remplace par "Mitra Support" */
    color: orange; /* Remet la couleur du texte */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    line-height: inherit;
}

/* Appliquer un fond légèrement gris clair sur un message sur deux */
.ThreadContainer__articleContent:nth-child(odd) {
    background-color: rgba(240, 240, 240, 0.3); /* Gris clair légèrement transparent */
}

/* Appliquer un fond légèrement orange clair (teinte IT-Mitra) sur les autres messages */
.ThreadContainer__articleContent:nth-child(even) {
    background-color: rgba(255, 165, 0, 0.1); /* Orange léger, très transparent */
}

/* Ajouter un peu d'espacement et des bordures arrondies */
.ThreadContainer__articleContent {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid rgba(200, 200, 200, 0.2); /* Ajout d'une bordure très subtile */
}

/*------------- Status des tickets------------ */
/* Bouton Status - In Progress (Technical Team) avec effet lumineux */
.TicketListItem__ticketStatus.in_progress___technical_team {
    background-color: yellow !important; /* Fond jaune */
    color: black !important; /* Texte noir pour meilleure lisibilité */
    font-weight: normal !important;
    padding: 8px 10px;
    border-radius: 5px;
    width: 100px; /* Réduit la largeur pour forcer le retour à la ligne */
    text-align: center;
    word-wrap: break-word; /* Coupe les mots si nécessaire */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.7); /* Effet lumineux jaune */
}

/* Bouton Status Acknowledged avec effet lumineux */
.TicketListItem__ticketStatus.acknowledged {
    background-color: yellow !important; /* Fond jaune */
    color: black !important; /* Texte noir */
    font-weight: normal !important;
    padding: 8px 10px;
    border-radius: 5px;
    min-width: 100px; /* Largeur minimale pour éviter le texte tronqué */
    max-width: 200px; /* Largeur maximale pour éviter un bouton trop large */
    text-align: center;
    word-wrap: break-word; /* Coupe les mots si nécessaire */
    display: inline-block; /* Permet au texte de s'ajuster */
    white-space: normal; /* Autorise le retour à la ligne */
    margin-right: 10px; /* Ajoute un espace à droite pour éviter qu'il soit trop collé */
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.7); /* Effet lumineux jaune */
}

/* Animation de clignotement - Customer Return */
@keyframes fast-blink-orange {
    0% { background-color: #FFA500; box-shadow: 0 0 10px rgba(255, 165, 0, 0.7); } /* Orange avec effet lumineux */
    50% { background-color: transparent; box-shadow: none; } /* Fond disparaît, effet lumineux supprimé */
    100% { background-color: #FFA500; box-shadow: 0 0 10px rgba(255, 165, 0, 0.7); }
}

/* Bouton Status - Awaiting Customer Return avec effet lumineux et clignotement */
.TicketListItem__ticketStatus.awaiting___customer_return {
    color: black !important; /* Texte noir toujours fixe */
    font-weight: normal !important;
    padding: 8px 10px;
    border-radius: 5px;
    animation: fast-blink-orange 1.5s infinite ease-in-out; /* Clignotement rapide avec effet lumineux */
    width: 100px; /* Ajuste la largeur */
    text-align: center;
    word-wrap: break-word; /* Coupe les mots si nécessaire */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Bouton Status - Awaiting Provider Return avec effet lumineux */
.TicketListItem__ticketStatus.awaiting___provider_return {
    background-color: #FFA500 !important; /* Fond orange */
    color: black !important; /* Texte noir pour meilleure lisibilité */
    font-weight: normal !important;
    padding: 8px 10px;
    border-radius: 5px;
    width: 80px; /* Ajuste la largeur */
    text-align: center;
    word-wrap: break-word; /* Coupe les mots si nécessaire */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.7); /* Effet lumineux orange */
}

/* Bouton Status - Awaiting Approval avec effet lumineux */
.TicketListItem__ticketStatus.awaiting___approval {
    background-color: #FFA500 !important; /* Fond orange */
    color: black !important; /* Texte noir pour meilleure lisibilité */
    font-weight: normal !important;
    padding: 8px 10px;
    border-radius: 5px;
    width: 80px; /* Ajuste la largeur */
    text-align: center;
    word-wrap: break-word; /* Coupe les mots si nécessaire */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.7); /* Effet lumineux orange */
}

/* Bouton Status - Awaiting Approval avec effet lumineux */
.TicketListItem__ticketStatus.awaiting___deployment {
    background-color: #FFA500 !important; /* Fond orange */
    color: black !important; /* Texte noir pour meilleure lisibilité */
    font-weight: normal !important;
    padding: 8px 10px;
    border-radius: 5px;
    width: 90px; /* Ajuste la largeur */
    text-align: center;
    word-wrap: break-word; /* Coupe les mots si nécessaire */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.7); /* Effet lumineux orange */
}

/* Bouton Status Solved */
.TicketListItem__ticketStatus.solved {
    background-color: #007BFF !important; /* Bleu*/
    color: white !important;
    font-weight: normal !important;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7); /* Effet lumineux en bleu */
}

/* Bouton status Open avec effet lumineux */
.TicketListItem__ticketStatus.open {
    background-color: #FF0000 !important; /* Fond rouge fixe */
    color: white !important; /* Texte blanc */
    font-weight: normal !important;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none; /* Désactive les clics */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); /* Effet lumineux rouge */
}

/* Bouton Status clos */
.TicketListItem__ticketStatus.closed {
    background-color: #28A745 !important; /* Vert */
    color: white !important;
    font-weight: normal !important;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.7); /* Effet lumineux en vert */
}

/* Élargir la colonne contenant le statut */
.TicketListItem__avatarStatus {
    min-width: 150px; /* Augmente la largeur de la colonne */
    max-width: 200px; /* Évite qu'elle soit trop large */
    display: flex; /* Permet une meilleure gestion de l'espace */
    justify-content: center; /* Centre le contenu */
}

/* ---------------Liste des tickets---------*/
/* Style général des popups */
.TicketFilterPopup__content {
    position: absolute !important;
    z-index: 9999 !important;
    top: calc(100% + 5px) !important;
    width: max-content !important;
    min-width: 180px !important;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: visible !important;
    text-align: left !important;
}

/* Alignement de la popup "Tous les canaux" sous son bouton */
.TicketList__filter_channel .TicketFilterPopup__content {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Alignement spécifique de la popup "Priorité" (garde le bon affichage) */
.TicketList__filter_priority .TicketFilterPopup__content {
    left: 0 !important;
    transform: none !important;
}

/* Ajustement de la pointe (flèche) pour "Tous les canaux" */
.TicketList__filter_channel .Popup__arrow {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* La flèche de "Priorité" reste inchangée */
.TicketList__filter_priority .Popup__arrow {
    left: 15px !important; /* Ajustement si nécessaire */
    transform: none !important;
}

/* Dépalcement du panel ouvrir un ticket marge à gauche et panel droite caché*/
.ticketForm .Layout__layout1 {
    width: 100%; /* Ajuste la largeur en fonction de l'écran */
    margin-left: 5.5%; /* Centre le layout en laissant 10% de chaque côté */
}

.ticketForm .Layout__layout2 {
    visibility: hidden;
    width: 0px; /* Réduit la largeur */
    min-width: 0px; /* Empêche l'élément de s'étendre */
    max-width: 0px;
    overflow: hidden; /* Cache le contenu qui dépasse */
}

.ticketForm .TicketFormRightContainer__rightPanelDetail {
    display: none; /* Cache le contenu du panel */
}

/* Cacher icones facebook et twitter pour share*/
#articleReview {
    display: none !important;
}