/**
 * Modern Table CSS for Zendesk Theme
 *
 */

/* --- 1. Variables et Styles Globaux --- */
:root {
  /* Couleurs principales du thème */
  --bs-primary: #055966;
  --bs-primary-rgb: 5, 89, 102; /* Important pour les transparences */
  --bs-secondary: #6c757d;
  --bs-success: #007a5a;
  --bs-danger: #e11d48;
  --bs-warning: #ffb648;
  --bs-info: #167381;

  /* Couleurs de fond et de texte */
  --bs-body-bg: #f4f7f9;
  --bs-body-color: #212529;
  --bs-secondary-bg: #e9ecef; /* Fond pour les éléments secondaires */
  --bs-tertiary-bg: #f8f9fa; /* Fond encore plus clair */
  
  /* Couleurs des bordures */
  --bs-border-color: #e5e9f2;
  --bs-border-radius: 6px; /* 0.375rem par défaut, ajustez si besoin */

  /* Styles spécifiques aux composants qui posent problème */
  --bs-modal-bg: #ffffff;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-footer-border-color: var(--bs-border-color);

  --bs-offcanvas-bg: #ffffff;
  --bs-offcanvas-border-color: var(--bs-border-color);
  --bs-offcanvas-header-padding-y: 1rem;
  --bs-offcanvas-header-padding-x: 1rem;
  
  /* Police (optionnel) */
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* FIX: Thème clair pour un meilleur contraste et une sensation de modernité */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--body-bg);
    color: var(--text-color);
    font-size: 14px; /* Légèrement plus grand pour la lisibilité */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* FIX: Conteneur principal pour résoudre le problème de largeur */
/* Ce conteneur doit envelopper votre table et sa barre d'outils */
.page-container {
    width: 100%;
    max-width: 1600px; /* Limite la largeur sur les écrans très larges */
    margin: 0 auto; /* Centre le conteneur */
    padding: 10 10 0 30; /* Ajoute de l'espace sur les côtés */
}

/* --- 2. Styles du Tableau --- */
.table-container {
    background-color: transparent; /* Le fond est géré par le body */
    padding: 0;
    border: none;
    box-shadow: none;
    max-height:1600px;
}


.bootstrap-table .table {
    border-collapse: separate; /* Essentiel pour espacer les lignes */
    border-spacing: 0 8px;   /* Espace vertical entre chaque ligne "carte" */
    background-color: transparent;
}

.table {
    font-size: 12px !important;
    max-width: 1700px !important;
}

/* En-tête du tableau : propre et minimaliste */
.table thead th {
    background-color: transparent !important;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none !important;
    padding: 10px 20px !important;
    vertical-align: middle;
}

/* Lignes du tableau : effet "carte" */
.table tbody tr {
    background-color: var(--card-bg);
    box-shadow: 0 2px 8px rgba(99, 115, 129, 0.08);
    border-radius: var(--bs-border-radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table tbody tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(99, 115, 129, 0.15);
}

/* Cellules du tableau */
.table td {
    padding: 12px 14px; /* Padding généreux pour l'aération */
    border: none; /* On supprime toutes les bordures par défaut */
    vertical-align: middle;
    white-space: wrap;
    overflow: hidden;
    max-width: 400px;
}

/* Coins arrondis pour la première et dernière cellule de chaque ligne */
.table td:first-child { border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); }
.table td:last-child { border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }

.table a {
    text-decoration: none !important;
    color: var(--bs-primary) !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

.table a:hover {
    color: #033e4a;
}

/* --- 3. Styles des Composants Simplifiés --- */

/* Badges de Statut (status-label) */
.status-label {
    border-radius: 15px; /* Forme de pilule */
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    white-space: nowrap;
}

.status-label-danger { background-color: var(--bs-danger); }
.status-label-warning { background-color: var(--bs-warning); color: var(--bs-warning-text); }
.status-label-hold { background-color: #343a40; }
.status-label-secondary { background-color: #6c757d; }
.status-label-info { background-color: var(--bs-info); }
.status-label-success, .status-label[style*="#038153"] { background-color: var(--bs-success); }


/* Barre d'outils et champ de recherche */
#toolbar, .bootstrap-table .fixed-table-toolbar .search {
    margin-bottom: 20px;
}

#active-filters-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 38px; /* Hauteur similaire à un bouton pour éviter le décalage de la page */
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 13px; /* Légèrement plus grand */
    font-weight: 500;
    line-height: 1;
    border-radius: 15px; /* Forme de pilule */
    transition: all 0.2s ease;
}

/* Style pour les tags de statut */
.filter-tag.tag-status {
    background-color: rgba(var(--bs-primary-rgb), 0.1); /* Fond léger */
    color: var(--bs-primary); /* Texte de couleur primaire */
}

/* Style pour les tags de station */
.filter-tag.tag-station {
    background-color: rgba(108, 117, 125, 0.1); /* Fond gris léger */
    color: #343a40; /* Texte gris foncé */
}

.remove-tag {
    margin-left: 8px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Cercle parfait */
    font-size: 0.78rem;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

/* Le "x" est remplacé par un simple ×, mais on pourrait utiliser une icône SVG */
.tag-status .remove-tag { color: var(--bs-primary); }
.tag-station .remove-tag { color: #343a40; }

.remove-tag:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Bouton "Tout effacer" amélioré */
#active-filters-container .btn-clear-all {
    font-weight: 600;
    font-size: 13px;
    border: none;
    color: var(--bs-danger);
    background-color: transparent;
}
#active-filters-container .btn-clear-all:hover {
    background-color: rgba(var(--bs-danger-rgb, 225, 29, 72), 0.1);
}

.offcanvas-lg {
    width: 600px; /* Ajustez la largeur si nécessaire */
}

.offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.ticket-comments-timeline {
    padding: 10px;
}

.comment-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;
}

/* Ligne de la timeline */
.comment-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 19px; /* Centré sur l'avatar */
    top: 45px;
    bottom: -25px; /* Pour relier au prochain item */
    width: 2px;
    background-color: var(--bs-border-color);
}

.comment-avatar {
    flex-shrink: 0;
}

.comment-content {
    flex-grow: 1;
    background-color: var(--body-bg); /* Fond gris clair pour les bulles */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 10px 15px;
}

/* Style spécial pour la description initiale */
.comment-item.initial-description .comment-content {
    background-color: #fff;
    border-left: 3px solid var(--bs-primary);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.78rem;
}

.comment-author {
    font-weight: 600;
}

.comment-body {
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Assure que les images/éléments dans les commentaires s'affichent correctement */
.comment-body * {
    max-width: 100%;
    height: auto;
}

.offcanvas-xl#ticketOffcanvas {
    background-color: #fff !important;
}

.offcanvas-xl {
    width: 90vw !important; /* L'offcanvas prend 90% de la largeur de la vue */
    max-width: 1400px !important;
}

/* Colonnes principales */
.offcanvas-main-content {
    padding-right: 20px;
    border-right: 1px solid var(--bs-border-color);
}
.offcanvas-sidebar {
    padding-left: 20px;
}

/* Sidebar de détails (inspiré de votre image) */
.request-details {
    background-color: var(--body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 15px;
    margin-bottom: 20px;
}
.request-details dt {
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.request-details dd {
    margin-left: 0;
    margin-bottom: 15px;
    color: var(--text-color);
    word-wrap: break-word;
}
.request-details dd:last-child {
    margin-bottom: 0;
}

/* Liste des pièces jointes dans la sidebar */
.attachments {
    list-style: none;
    padding-left: 0;
    margin-top: 5px;
}
.attachment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.attachment-item:last-child {
    border-bottom: none;
}

.attachment-name {
    display: inline-block;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.attachment-name i {
    margin-right: 8px;
    color: var(--text-muted);
}
.attachment-icon-link {
    color: var(--text-muted);
    margin-left: 10px;
    font-size: 14px;
}
.attachment-icon-link:hover {
    color: var(--bs-primary);
}
.attachments.in-comment {
    margin-top: 15px;
    background-color: #fff;
    border-radius: var(--bs-border-radius);
    padding: 5px 10px;
}


/* --- STYLES POUR LE FORMULAIRE DE RÉPONSE DANS L'OFFCANVAS --- */
/* Conteneur global du formulaire */
#offcanvas-reply-container {
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(99, 115, 129, 0.08);
}

/* On retire le titre "Ajouter une réponse" de la balise <label> pour le styliser séparément */
#ticket-reply-form .form-label.fw-bold {
    font-size: 0.78rem;
    color: var(--bs-body-color);
    margin-bottom: 1rem;
}

/* Style général pour les champs de formulaire */
#ticket-reply-form .form-control {
    background-color: var(--bs-tertiary-bg); /* Fond gris très clair */
    border: 1px solid var(--bs-border-color);
    font-size: 0.78rem;
    padding: 0.75rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#ticket-reply-form .form-control::placeholder {
    color: #99a5b5;
}

#ticket-reply-form .form-control:focus {
    background-color: #ffffff;
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* Style spécifique pour le champ d'upload de fichier */
#ticket-reply-form input[type="file"].form-control {
    color: #6c757d;
}

/* Style du bouton d'envoi principal */
#ticket-reply-form .btn-submit-reply,
#archive-search-form .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #044a56; /* Une version légèrement plus foncée de votre couleur primaire */
    --bs-btn-hover-border-color: #044a56;
    --bs-btn-disabled-bg: #044a56;
    --bs-btn-active-bg: #033842;
    --bs-btn-active-border-color: #033842;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    font-weight: 600;
    padding: 0.6rem 1.2rem;
}

#btn-close-ticket {
    /* Style de base : transparent avec une bordure grise */
    --bs-btn-color: #52647E !important; /* Un gris-bleu sobre pour le texte et la bordure */
    --bs-btn-border-color: #D1D9E4; /* Une bordure grise claire */
    --bs-btn-bg: #f4f7f9;
    --bs-btn-disabled-bg: #52647E;
    /* Au survol (hover) : le fond se colore */
    --bs-btn-hover-color: #fff; /* Texte blanc */
    --bs-btn-hover-bg: #52647E; /* Le fond prend la couleur du texte initial */
    --bs-btn-hover-border-color: #52647E;

    /* Au clic (active) */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3E4C60; /* Une version plus foncée */
    --bs-btn-active-border-color: #3E4C60;
    
    /* Ombre au focus */
    --bs-btn-focus-shadow-rgb: 82, 100, 126;

    /* --- Harmonisation de la taille et police --- */
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    box-shadow: none; /* On retire toute ombre par défaut pour un look plus plat */
}
#offcanvas-reply-container {
    padding: 15px;
    margin-top: 20px;
    border-top: 1px solid var(--bs-border-color);
}

#ticket-reply-form textarea {
    width: 100%;
    min-height: 100px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 10px;
    font-size: 0.78rem;
    margin-bottom: 10px;
}

#ticket-reply-form textarea:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

#ticket-reply-form .btn-submit-reply .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .2em;
    margin-right: 5px;
}

.attachment-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background-color: var(--body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: 0.78rem;
}

.attachment-remove-btn {
    cursor: pointer;
    color: var(--bs-danger);
    font-weight: bold;
    margin-left: 10px;
}

.offcanvas#ticketOffcanvas {
    /* On utilise les variables pour le fond et les bordures */
    --bs-offcanvas-bg: var(--bs-body-bg); /* Fond gris clair, plus doux que le blanc pur */
    --bs-offcanvas-border-color: var(--bs-border-color);
    max-width: 1600px !important;
}

/* 2. On utilise Flexbox pour structurer le corps de l'offcanvas */
.offcanvas-body#offcanvasTicketBody {
    display: flex;
    flex-direction: column; /* Les enfants s'empilent verticalement */
    padding: 0; /* On retire le padding de base pour un contrôle total */
    overflow: hidden;
    flex-grow: 1;
}

/* 3. La grille principale (Bootstrap .row) */
/* On lui dit de prendre toute la hauteur disponible */
#offcanvasTicketBody > .row {
    flex-grow: 1; /* Permet à la ligne de s'étirer pour remplir l'espace */
    margin: 0;
    min-height: 0;
    flex-wrap: nowrap;
} 

#offcanvasTicketBody .offcanvas-main-content {
    flex-grow: 3; /* Donne 3 parts de l'espace disponible */
    flex-basis: 0; /* Important pour que le grow fonctionne bien */
    min-width: 0; /* Empêche le contenu de déborder */
}

/* On force la sidebar à prendre moins de place */
#offcanvasTicketBody .offcanvas-sidebar {
    flex-grow: 1; /* Donne 1 part de l'espace disponible */
    flex-basis: 0;
    min-width: 400px; /* On peut définir une largeur minimale pour la lisibilité */
}

/* 4. La colonne principale (commentaires et formulaire) */
.offcanvas-main-content {
    display: flex;
    flex-direction: column; /* Les enfants (timeline, formulaire) s'empilent */
    padding: 0;
    border-right: 1px solid var(--bs-border-color);
}

/* 5. La timeline des commentaires (la partie qui doit scroller) */
.ticket-comments-timeline {
    flex-grow: 1;         /* S'étire pour prendre tout l'espace vertical disponible */
    overflow-y: auto;     /* AFFICHE LA BARRE DE SCROLL si le contenu dépasse */
    padding: 1.5rem;      /* Ajoute de l'aération */
}

/* 6. Le conteneur du formulaire de réponse (fixe en bas) */
#offcanvas-reply-container {
    flex-shrink: 0; /* Empêche le formulaire de se rétrécir */
    padding: 1rem 1.5rem;
    background-color: #ffffff; /* Fond blanc pour le distinguer */
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); /* Ombre subtile vers le haut */
}

/* 7. La sidebar des détails (scrollable indépendamment) */
.offcanvas-sidebar {
    overflow-y: auto;
    padding: 0; /* On retire le padding pour un contrôle total */
    background-color: #ffffff;
    display: flex; /* On utilise flex pour positionner les actions en bas */
    flex-direction: column;
}
/* --- Améliorations visuelles pour un look moderne --- */

/* En-tête de l'offcanvas */
.offcanvas-header {
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 10;
    display: flex !important;
}

.offcanvas-title {
    display: flex;
    align-items: center;
    width: 100%;
}

.ticket-subject {
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute "..." si le sujet est trop long */
    flex-grow: 0;
    margin: 0;
}

/* Amélioration des cartes de détails dans la sidebar */
.request-details {
    background-color: var(--bs-body-bg);
    border: none; /* On retire la bordure, le fond suffit */
    padding: 1rem;
}

/* Amélioration du fil de discussion (timeline) */
.comment-item {
    gap: 1rem;
}

.comment-content {
    background-color: #ffffff; /* Fond blanc pour les commentaires */
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
}

.comment-item.initial-description .comment-content {
    background-color: var(--bs-tertiary-bg); /* Fond légèrement différent pour la description */
    border-left: 3px solid var(--bs-primary);
}

/* La section des actions, toujours en bas */
.sidebar-actions-container {
    flex-shrink: 0; /* Empêche cette zone de se rétrécir */
    padding: 1rem;
    background-color: #ffffff;
    border-top: 1px solid var(--bs-border-color);
}

#attachmentModalBody {
    background-color: var(--bs-tertiary-bg); /* Fond gris clair */
    text-align: center; /* Centre les images */
    padding: 1rem;
}

/* Empêche le modal de déborder horizontalement */
#attachmentModalBody {
    display: block !important; /* On casse le flex si présent pour éviter l'étirement */
    padding: 15px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Image responsive */
#pdf-canvas, #attachmentModalBody img {
    display: block;
    margin: 0 auto;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}


@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    #attachmentModalBody {
        padding: 5px;
    }
}

/* Canvas (PDF) responsive */
#pdf-canvas {
    max-width: 100% !important;
    height: auto !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* S'assure que l'image ne dépasse pas la hauteur de l'écran */
#attachmentModalBody .img-fluid {
    max-height: 80vh;
    object-fit: contain;
}

.pdf-viewer-container {
    overflow: auto; /* Ajoute des barres de scroll si le PDF est plus grand que la modale */
    max-height: 80vh;
}

.request-details-grid dd ul.attachments-sidebar {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* S'assure que la liste prend toute la largeur de la cellule <dd> */
}

.attachments-sidebar .attachment-item {
    padding: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.attachments-sidebar li:first-child.attachment-item {
    border-top: none;
    padding-top: 0;
}

.archive-controls {
  display: none;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

.archive-instruction {
  display: none;
  text-align: center;
  padding: 4rem 2rem;
  border: 2px dashed #e9ecef;
  border-radius: 8px;
  margin-top: 1rem;
}

/* 1. Style de base UNIFIÉ pour TOUS les badges */
.status-label {
    /* --- Couleurs et fond neutres --- */
    background-color: #F7FAFC; /* Fond gris très clair, presque blanc */
    border: 1px solid #E2E8F0; /* Bordure subtile gris clair */
    color: #2D3748; /* Texte gris foncé / anthracite pour le contraste */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 13px; /* Légèrement plus grand pour un meilleur impact */
    font-weight: 500; /* Medium, plus doux que le gras (bold) */
    text-transform: none; /* ANNULE le forçage en majuscules */
    letter-spacing: normal; /* Espacement standard */

    /* --- Forme et espacement "aéré" --- */
    display: inline-flex;
    align-items: center;
    padding: 6px 14px; /* Plus d'espacement pour un look premium */
    border-radius: 10px; /* Complètement arrondi ("Pill shape") */
}

/* 2. Style du point de couleur */
.status-label::before {
    content: '';
    width: 12px; /* Point légèrement plus grand */
    height: 12px;
    border-radius: 25%;
    margin-right: 10px; /* Plus d'espace entre le point et le texte */
}

/* =================================================================== */
/* 3. La seule chose qui change : LA COULEUR DU POINT                  */
/* =================================================================== */

/* --- ACTION REQUISE CLIENT (ROUGE) --- */
.status-label-pending::before {background-color: #EF533A;}
.status-label-answered { background-color: #EF533A; }

/* --- EN COURS (BLEU) --- */
.status-label-onit::before { background-color: #ffc039; }
.status-label-crs::before { background-color: #45abc4; }
.status-label-apl::before { background-color: #2b8499; }

/* --- CONFIRMATION (ORANGE / JAUNE) --- */
.status-label-open::before {background-color: #ff9b45;}
.status-label-new::before {background-color: #f7ca9c;}

/* --- TERMINÉ (VERT) --- */
.status-label-clo::before,
.status-label-closed,
.status-label-solved::before { background-color: #00c96f; }


/* --- EN PAUSE / BLOQUÉ (GRIS FONCÉ) --- */
.status-label-hold::before { background-color: #7c7c7c ; }
.status-label-sus::before { background-color: #313131; }

/* --- À PLANIFIER (ROSE / VIOLET) --- */
.status-label-app::before { background-color: #b5dce7; }

.popover {
    background-color: #ffffff; /* Fond blanc pur pour un contraste net */
    border: 1px solid var(--bs-border-color); /* Utilise votre bordure subtile */
    border-radius: 8px; /* Bords légèrement plus arrondis que le reste pour un effet "doux" */
    box-shadow: 0 4px 16px rgba(99, 115, 129, 0.12); /* Ombre douce et diffuse */
    font-family: var(--bs-body-font-family);
    padding: 0; /* On retire le padding de base pour un contrôle total */
    max-width: 320px; /* Un peu plus large pour le confort de lecture */
}

/* 2. En-tête du Popover */
.popover-header {
    background-color: var(--bs-tertiary-bg); /* Fond gris très clair, comme vos accordéons */
    color: var(--bs-body-color);
    font-size: 0.9rem; /* 14.4px, une bonne taille pour un titre */
    font-weight: 600; /* Semi-gras, comme les autres titres */
    padding: 0.8rem 1rem; /* Espacement généreux */
    border-bottom: 1px solid var(--bs-border-color);
    border-top-left-radius: 8px; /* Assure la continuité de l'arrondi */
    border-top-right-radius: 8px;
}

/* 3. Corps du Popover */
.popover-body {
    padding: 1rem; /* Espacement aéré */
    font-size: 14px;
    color: var(--bs-body-color);
}

/* 4. Style du contenu DANS le corps (icônes, liens) */
.popover-body .d-flex {
    font-size: 14px; /* On s'assure que la taille de police est cohérente */
}

.popover-body i {
    color: var(--bs-primary); /* L'icône prend votre couleur primaire */
    font-size: 1.1em; /* Légèrement plus grande pour un meilleur impact visuel */
    width: 20px; /* On fixe une largeur pour un alignement parfait */
    text-align: center;
}

.popover-body a {
    color: var(--bs-body-color) !important; /* Texte normal, pas en bleu par défaut */
    font-weight: 500 !important; /* Poids medium, pas trop gras */
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.popover-body a:hover {
    color: var(--bs-primary) !important; /* Devient bleu au survol */
    text-decoration: underline !important;
}

/* 5. Style de la flèche du Popover */
/* Pour une popover qui apparaît au-dessus (top) */
.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--bs-border-color);
}
.bs-popover-top > .popover-arrow::after {
    border-top-color: #ffffff;
}

/* Pour une popover qui apparaît en dessous (bottom) */
.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--bs-border-color);
}
.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--bs-tertiary-bg); /* La flèche pointe vers l'en-tête */
}

#archive-search-form .form-select option:hover {
    background-color: #044a56a8 !important;
    color: white;
}

#archive-search-form .form-select option:checked {
    background-color: #044a56;
    color: white;
    font-weight: 600;
}

/* ==========================================================================
   FIX TABLEAU & FILTRES MOBILE (Bootstrap Table)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* -----------------------------------------------------------
       1. ZONE DES FILTRES (Scroll Horizontal)
    ----------------------------------------------------------- */
    #toolbar-left {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 5px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #toolbar-left::-webkit-scrollbar { display: none; }

    /* Boutons de filtres */
    #toolbar-left .btn, 
    #toolbar-left .btn-group {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 13px !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
    }

    /* -----------------------------------------------------------
       3. BARRE D'OUTILS (Recherche propre)
    ----------------------------------------------------------- */
    .bootstrap-table .fixed-table-toolbar {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

    /* Cacher le bouton poubelle */
    .bootstrap-table .fixed-table-toolbar .search button[name="clearSearch"] {
        display: none !important;
    }

    .bootstrap-table .fixed-table-toolbar .search {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    .bootstrap-table .fixed-table-toolbar .search input {
        width: 100% !important;
        height: 45px !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        padding-left: 15px;
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
    }

    /* -----------------------------------------------------------
       4. TABLEAU COMPACT (Version "Cartes" pour mobile)
    ----------------------------------------------------------- */

    /* Cacher les en-têtes */
    .bootstrap-table .fixed-table-header,
    .bootstrap-table .table thead {
        display: none !important;
    }

    /* Ligne = Carte compacte */
    .bootstrap-table .table tbody tr {
        display: block;
        background-color: #ffffff !important;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        margin: 12px;
        padding: 16px;
        position: relative;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    /* Reset des cellules */
    .bootstrap-table .table tbody td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        width: auto !important;
        min-height: auto !important;
        background-color: transparent !important;
    }

    /* Pas de pseudo-éléments (labels) */
    .bootstrap-table .table tbody td::before,
    .bootstrap-table .table tbody td::after {
        display: none !important;
        content: none !important;
    }

    /* --- CONTENU DE LA CARTE --- */

    /* 1. STATUT (Badge en haut à droite) */
    .bootstrap-table .table tbody td:nth-of-type(7) {
        position: absolute;
        top: 12px;
        right: 15px;
    }
    .bootstrap-table .table tbody td:nth-of-type(7) .status-label {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 6px;
    }

    /* 2. NUMÉRO TICKET (Petit gris en haut à gauche) */
    .bootstrap-table .table tbody td:nth-of-type(1) {
        font-size: 12px !important;
        color: #8898aa;
        font-weight: 700;
        margin-bottom: 6px !important;
    }
    .bootstrap-table .table tbody td:nth-of-type(1)::before {
        content: '#' !important;
        display: inline !important;
    }

    /* 3. SUJET (Titre principal) */
    .bootstrap-table .table tbody td:nth-of-type(3) {
        margin-bottom: 4px !important;
        padding-right: 90px !important; /* Place pour le statut */
    }
    .bootstrap-table .table tbody td:nth-of-type(3) a {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #212529 !important;
        text-decoration: none;
        line-height: 1.4;
        display: block;
    }

    /* 4. STATION (Sous-titre simple, SANS ICÔNE) */
    .bootstrap-table .table tbody td:nth-of-type(2) {
        font-size: 13px !important;
        color: #495057;
        font-weight: 500;
        margin-bottom: 12px !important;
    }

    .bootstrap-table .table tbody td:nth-of-type(4) {
        margin-left: 10px !important;
    }

    /* 5. INFOS SECONDAIRES (Tags gris en bas) */
    .bootstrap-table .table tbody td:nth-of-type(4), /* Origine */
    .bootstrap-table .table tbody td:nth-of-type(9)  /* Activité */
    {
        display: inline-block !important;
        font-size: 11px !important;
        color: #495057;
        background-color: #f1f3f5 !important;
        border: none !important;
        padding: 4px 10px !important;
        border-radius: 6px;
        margin-right: 8px !important;
        margin-top: 4px !important;
    }

    .table-hover > tbody > tr:hover > * {
        --bs-table-accent-bg: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .bootstrap-table .table tbody tr {
        /* Transition douce pour l'effet */
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .bootstrap-table .table tbody tr:hover,
    .bootstrap-table .table tbody tr:active { /* :active est important pour le "toucher" sur mobile */
        border-color: #ced4da !important;      /* La bordure fonce un peu */
    }

    .bootstrap-table .table tbody tr:hover td:nth-of-type(4),
    .bootstrap-table .table tbody tr:hover td:nth-of-type(9) {
        background-color: #fff !important; /* Les tags deviennent blancs pour le contraste */
        border-color: transparent !important;
    }

    /* Cacher les colonnes inutiles sur mobile */
    .bootstrap-table .table tbody td:nth-of-type(5), /* Catégorie (souvent vide) */
    .bootstrap-table .table tbody td:nth-of-type(6), /* N° Equip */
    .bootstrap-table .table tbody td:nth-of-type(8)  /* Créé le */
    {
        display: none !important;
    }

    /* --- 1. CONFIGURATION GÉNÉRALE DES OFFCANVAS --- */

    /* On cible TOUS les offcanvas (ticket et formulaire) */
    #formOffcanvas, 
    #ticketOffcanvas {
        width: 100% !important;
        max-width: 100vw !important;
        border: none !important;
        height: 100% !important;
        top: 0 !important;
        bottom: 0 !important;
        background-color: #f8f9fa !important; /* Fond légèrement gris pour le contraste */
    }

    /* Corps principal */
    #formOffcanvasBody,
    #offcanvasTicketBody {
        display: block !important; /* Casse le flexbox */
        padding: 0 !important;     /* On gère le padding dans les enfants */
        overflow-y: auto !important;
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 80px !important; /* Espace pour le bas */
    }

    /* --- 2. STRUCTURE INTERNE (GRID) --- */
    
    /* On force les colonnes à s'empiler */
    #offcanvasTicketBody > .row {
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important; /* Sidebar passe EN DESSOUS du contenu */
    }

    /* La zone principale (Timeline / Formulaire) */
    .offcanvas-main-content,
    .col-lg-9 {
        width: 100% !important;
        padding: 15px !important;
        order: 1; /* S'affiche en premier */
        border-right: none !important;
    }

    /* La sidebar (Infos ticket) */
    #ticketOffcanvas .offcanvas-sidebar,
    .col-lg-3 {
        width: 100% !important;
        padding: 0 !important;
        order: 2; /* S'affiche en dessous */
        border-left: none !important;
        background-color: #fff;
        margin-top: 20px;
        border-top: 10px solid #f1f3f5; /* Séparateur visuel épais */
    }

    /* --- 4. TIMELINE DES COMMENTAIRES --- */
    
    .ticket-comments-timeline {
        padding: 0 !important;
    }

    .comment-item {
        margin-bottom: 20px;
        gap: 10px;
    }

    /* Avatar plus petit */
    .comment-avatar .user-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Bulle de commentaire */
    .comment-content {
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    /* --- 5. ZONE DE RÉPONSE (Fixe en bas ?) --- */
    
    /* Si vous voulez que la zone de réponse soit toujours visible en bas */
    #offcanvas-reply-container {
        padding: 15px !important;
        background-color: #fff;
        border-top: 1px solid #e9ecef;
        margin-top: 20px;
    }
    
    /* Ajustement des boutons */
    #ticket-reply-form .btn {
        width: 100%; /* Boutons pleine largeur pour le tactile */
        margin-bottom: 10px;
        justify-content: center;
        padding: 12px;
    }
    
    /* Cache le bouton Clôturer secondaire pour gagner de la place si besoin */
    /* ou le met en style "outline" */
    #btn-close-ticket {
        background-color: transparent !important;
        border: 1px solid #dee2e6 !important;
        color: #6c757d !important;
    }

    /* --- 6. HEADER DE L'OFFCANVAS (Barre blanche avec titre) --- */
    .offcanvas-header {
        padding: 10px 15px !important;
        min-height: 50px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
    
    /* Le titre du ticket */
    .offcanvas-title {
        font-size: 16px !important;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70%; /* Laisse de la place pour la croix */
    }

    /* Le badge ID #12345 */
    .offcanvas-title .badge {
        font-size: 12px !important;
        margin-left: 8px !important;
        vertical-align: middle;
    }

    /* Barre d'onglets en haut */
    .mobile-ticket-tabs {
        background-color: #fff;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 0 !important;
        position: sticky;
        top: 0;
        z-index: 1010; /* Juste sous le header principal */
    }

    .mobile-ticket-tabs .nav-link {
        border: none;
        border-bottom: 3px solid transparent;
        color: #6c757d;
        padding: 12px 0;
        font-weight: 600;
        border-radius: 0;
    }

    .mobile-ticket-tabs .nav-link.active {
        color: var(--bs-primary);
        border-bottom-color: var(--bs-primary);
        background-color: transparent;
    }

    /* Ajustement du conteneur de contenu */
    .mobile-tab-content {
        height: auto !important;
        display: block !important; /* Reset du display flex */
    }

    /* --- RESET DES COLONNES POUR LE MODE ONGLETS --- */
    
    /* On annule le display:block !important qui forçait l'affichage permanent */
    #offcanvasTicketBody > .row {
        display: block !important; /* Le row devient un bloc simple */
        margin: 0 !important;
        height: 100%;
    }

    /* Zone Conversation (Onglet 1) */
    .offcanvas-main-content.tab-pane {
        width: 100% !important;
        padding: 15px !important;
        border: none !important;
        display: none; /* Caché par défaut (géré par bootstrap .active) */
    }
    
    /* Zone Infos (Onglet 2) */
    .offcanvas-sidebar.tab-pane {
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        display: none; /* Caché par défaut */
        background-color: #fff;
        margin-top: 0 !important; /* Plus de marge car c'est un onglet */
    }

    /* RÈGLE CRUCIALE : Afficher l'élément quand il a la classe .active */
    .offcanvas-main-content.active,
    .offcanvas-sidebar.active {
        display: block !important;
        animation: fadeIn 0.2s ease-in;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

@media screen and (min-width: 769px) {

    /* 1. ON FORCE L'AFFICHAGE DES DEUX COLONNES */
    /* On annule le comportement "Caché" des onglets Bootstrap */
    .mobile-tab-content .tab-pane {
        display: block !important;      /* Affiche l'élément */
        opacity: 1 !important;          /* Annule l'effet de fondu (fade) */
        visibility: visible !important; /* Force la visibilité */
        transition: none !important;    /* Annule les animations de transition */
    }

    /* 2. RÉTABLISSEMENT DE LA GRILLE (GRID) */
    /* On s'assure que le row prend toute la hauteur */
    .mobile-tab-content.row {
        display: flex !important;
        flex-direction: row !important; /* Côte à côte */
    }

    /* 3. STYLE DE LA COLONNE CONVERSATION (GAUCHE) */
    .offcanvas-main-content {
        height: 100%;
        overflow-y: auto; /* Scroll indépendant */
        border-right: 1px solid #dee2e6; /* Remet la bordure de séparation */
    }

    /* 4. STYLE DE LA COLONNE INFOS (DROITE) */
    .offcanvas-sidebar {
        height: 100%;
        overflow-y: auto; /* Scroll indépendant */
        background-color: #fff; /* Fond blanc propre */
        margin-top: 0 !important; /* Annule la marge mobile */
        border-top: none !important;
    }

    /* On cache la navigation des onglets (normalement déjà géré par d-lg-none, mais sécurité) */
    .mobile-ticket-tabs {
        display: none !important;
    }

    .badge-time {
        font-size: 0.8rem !important;
    }
}