/**
 * =============================================================================
 * Titre       : Styles unifiés du module Tickets
 * Fichier     : app/modules/Tickets/assets/css/tickets.css
 * Auteur      : Régis KREMER — Bassin de Pompey
 * Version     : 1.3.1
 * -----------------------------------------------------------------------------
 * Description : Feuille de styles principale pour le module Tickets :
 *               - Tableau de bord, KPIs et filtres
 *               - Liste des tickets (tableau + mode cartes responsive)
 *               - Modale de détail (3 colonnes, workflow, médias, relances)
 *               - Historique, watchers, overlays “nouveau message / interne”
 *               - Fiche d’intervention (print) + styles d’impression A4
 *
 * CHANGELOG
 * -----------------------------------------------------------------------------
 * v1.3.1
 * - Ajout de overflow-x: auto sur .tickets-list pour tous les écrans >= 1025px.
 * - Encadrement de la table (border + radius + min-width) pour éviter
 *   les débordements/superpositions sur PC et tablette paysage.
 *
 * v1.3.0
 * - Empilement de .filter-area à 1024px :
 *   • Filtres et boutons passent en pile verticale sur tablettes.
 *
 * v1.2.9
 * - Passage en mode "cartes" pour la liste des tickets dès 1024px :
 *   • <thead> masqué
 *   • <tr>/<td> en blocs avec data-label.
 *
 * v1.2.8
 * - Passage en table-layout: auto avec gestion:
 *   • width: 1% + white-space: nowrap sur les colonnes critiques
 *   • colonnes Description/Adresse autorisées à passer à la ligne.
 * =============================================================================
 */

/* ==========================================================================
   --- Styles Généraux et Tableau de Bord ---
   ========================================================================== */
.tickets-dashboard {
  max-width: 1800px;
  margin: 30px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tickets-dashboard h1 {
  text-align: center;
  font-size: 2.1rem;
  color: #212529;
  margin-top: 10px;
  margin-bottom: 28px;
}
.assigned-structure { color: #888; font-size: 0.96em; margin-left: 3px; }

/* ==========================================================================
   --- Indicateurs de performance (KPI) ---
   ========================================================================== */
.kpi-bar {
  display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 28px 0; justify-content: center;
}
.kpi-card {
  background: #fff; border-radius: 10px; box-shadow: 0 3px 12px rgba(60,100,180,0.07);
  padding: 15px 25px 12px 18px; min-width: 135px; display: flex; flex-direction: column; align-items: flex-start;
  transition: box-shadow 0.2s;
  flex: 1 1 135px;
}
.kpi-card:hover { box-shadow: 0 8px 18px rgba(60,100,180,0.15); }
.kpi-label { color: #6b778c; font-size: 0.99em; font-weight: 500; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.kpi-ico { font-size: 1.15em; margin-right: 4px; }
.kpi-value { font-size: 2.0em; font-weight: 700; color: #004080; letter-spacing: 0.01em; }

/* ==========================================================================
   --- Zone des Filtres ---
   ========================================================================== */
.filter-area {
  display: flex; flex-wrap: wrap; gap: 15px; padding: 20px;
  border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 25px;
  background-color: #f9f9f9; align-items: flex-end;
}
.filter-group { flex: 1; min-width: 150px; }
.filter-group label {
  display: block; margin-bottom: 5px; font-weight: bold; color: var(--text-color, #212529); font-size: 0.95rem;
}
.filter-group select,
.filter-group input[type="text"]{
  width: 100%; padding: 8px; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.9rem; box-sizing: border-box;
}
.filter-group.search-group { flex-grow: 2; }
.filter-area button { padding: 8px 15px; font-size: 0.9rem; height: 35px; }

/* ==========================================================================
   --- Tableau des Tickets (Listing) ---
   ========================================================================== */
.tickets-list { width: 100%; margin: 0 auto; }
.tickets-table {
  width: 100%;
  border-collapse: collapse; margin-bottom: 20px; font-size: 1.02rem; background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  table-layout: auto; /* v1.2.8: Forcer layout auto */
}

.tickets-table thead th {
  background-color: #003366; color: #fff !important; font-size: 1rem; font-weight: bold; letter-spacing: 0.02em;
  border-bottom: 2.5px solid #2469ad; cursor: pointer; position: relative;
}
.tickets-table th, .tickets-table td {
  padding: 14px 14px; border: 1px solid #e9ecef; vertical-align: middle; color: #212529;
}
.tickets-table thead th .sort-icon {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0.6; transition: opacity 0.2s;
}
.tickets-table thead th:hover .sort-icon,
.tickets-table thead th.sorted .sort-icon { opacity: 1; }
.tickets-table thead th.sorted.asc .sort-icon::after { content: ' ▲'; }
.tickets-table thead th.sorted.desc .sort-icon::after { content: ' ▼'; }

.tickets-table tbody tr:nth-child(even) td { background-color: #f3f6fa; }
.tickets-table tbody tr:hover td { background-color: #eaf2fa; }
.tickets-table .no-results { text-align: center; padding: 30px; color: #888; font-style: italic; grid-column: 1 / -1; }

/* --- Gestion des largeurs de colonnes --- */
/* Colonnes qui ne doivent PAS passer à la ligne */
.tickets-table th:nth-child(1), .tickets-table td:nth-child(1), /* Numéro */
.tickets-table th:nth-child(2), .tickets-table td:nth-child(2), /* Statut */
.tickets-table th:nth-child(3), .tickets-table td:nth-child(3), /* Date */
.tickets-table th:nth-child(4), .tickets-table td:nth-child(4), /* Demandeur */
.tickets-table th:nth-child(7), .tickets-table td:nth-child(7), /* Priorité */
.tickets-table th:nth-child(8), .tickets-table td:nth-child(8), /* Agent */
.tickets-table th:nth-child(9), .tickets-table td:nth-child(9), /* Date limite */
.tickets-table th:nth-child(10), .tickets-table td.action-cell { /* Actions */
  white-space: nowrap;
  width: 1%; /* Force la colonne à être aussi petite que son contenu */
}

/* Colonnes qui PEUVENT passer à la ligne */
.tickets-table td:nth-child(5), /* Description */
.tickets-table td:nth-child(6) { /* Adresse */
  white-space: normal !important;
  word-break: break-word;
  min-width: 150px; /* Donne une largeur minimale */
}

.tickets-table td .cat { color: #337ab7; font-weight: bold; font-size: 0.94em; }
.tickets-table td .demandeur { color: #000; font-weight: 500; }
.tickets-table td .adresse { color: #555; font-size: 0.92em; }

.tickets-table td.status-text,
.tickets-table td.priority-text { text-align: center; font-weight: bold; }
.tickets-table td.status-text img { width: 19px; vertical-align: middle; margin-right: 5px; }
.tickets-table td.status-text.status--2 { color: #dc3545; }
.tickets-table td.status-text.status--1 { color: #ffc107; }
.tickets-table td.status-text.status-0  { color: #17a2b8; }
.tickets-table td.status-text.status-1  { color: #28a745; }
.tickets-table td.status-text.status-2  { color: #6c757d; }

/* Codes couleurs priorités */
.tickets-table td.priorite-1 { background-color: #ffebee !important; color: #c62828 !important; font-weight: bold; }
.tickets-table td.priorite-2 { background-color: #fffde7 !important; color: #f57f17 !important; font-weight: bold; }
.tickets-table td.priorite-3 { background-color: #e8f5e9 !important; color: #2e7d32 !important; font-weight: bold; }
.tickets-table td.priorite-4 { background-color: #f5f5f5 !important; color: #616161 !important; }
.tickets-table td.priorite-5 { background-color: #e3f2fd !important; color: #1565c0 !important; font-style: italic !important; }

/* --- Cellule Action --- */
.tickets-table td.action-cell {
  text-align: center;
  overflow: visible; /* Boutons toujours visibles */
}
.tickets-table td.action-cell .button {
  margin: 0 2px;
  padding: 6px 13px;
  font-size: 0.93em;
}

/* ==========================================================================
   --- Détail ticket : colonnes
   ========================================================================== */
.detail-table td:first-child { font-weight: bold; color: #203858; padding-right: 16px; min-width: 135px; }
.detail-table td { padding: 7px 10px 7px 0; vertical-align: top; }

.ticket-detail-columns {
  display: flex; gap: 48px; margin: 0 0 22px 0; padding: 28px 12px 0 12px;
  background: #f9fafd; border-radius: 12px; box-shadow: 0 2px 14px #00336612;
}
.ticket-detail-col { flex: 1 1 0; min-width: 270px; display: flex; flex-direction: column; gap: 13px; }
.detail-row { display: flex; align-items: flex-start; margin-bottom: 2px; }
.detail-row .label { font-weight: bold; color: #203858; min-width: 110px; max-width: 170px; flex-shrink: 0; }
.detail-row .value { color: #27314c; padding-left: 10px; word-break: break-word; flex: 1 1 0; }
.description-row .value {
  background: #f2f6fb; border-radius: 6px; padding: 10px 14px; margin-left: 0; margin-top: 0; min-height: 40px;
  color: #233; box-shadow: 0 1px 6px #0073a80c; font-size: 1.11rem;
}

/* Responsive colonnes */
@media (max-width: 950px){
  .ticket-detail-columns { flex-direction: column; gap: 16px; padding: 15px 3vw 5px 3vw; }
  .ticket-detail-col { min-width: 0; }
}

/* ==========================================================================
  --- Contrôles de Pagination
  ========================================================================== */
.pagination-controls{
  width: 100%; max-width: 100%; box-sizing: border-box;
  display: flex; justify-content: center !important; align-items: center;
  flex-wrap: wrap; gap: 6px; margin: 18px 0 22px 0; padding: 10px 12px;
  background: #f8fafc; border: 1px solid #e3e6ef; border-radius: 14px;
  box-shadow: 0 2px 7px 0 rgba(0,0,30,0.03); justify-self: center; align-self: center;
}
.pagination-controls button.page-btn{
  padding: 6px 15px; margin: 0 2px;
  border: 1.5px solid var(--primary-action-color, #E57C0C);
  background: #fff; color: var(--primary-action-color, #E57C0C);
  border-radius: 24px; cursor: pointer; font-size: 1em; font-weight: 500;
  transition: background 0.16s, color 0.16s, border-color 0.16s; outline: none; min-width: 38px;
}
.pagination-controls button.page-btn.active,
.pagination-controls button.page-btn:focus-visible{
  background: var(--primary-action-color, #E57C0C); color: #fff; border-color: var(--primary-action-color, #E57C0C);
  font-weight: 700; z-index: 2; box-shadow: 0 1px 5px 0 rgba(229,124,12,0.10);
}
.pagination-controls button.page-btn:hover:not(:disabled):not(.active){
  background: #fbeee6; color: var(--primary-action-color, #E57C0C); border-color: var(--primary-action-color, #E57C0C);
}
.pagination-controls button.page-btn:disabled{
  opacity: 0.55; cursor: not-allowed; background: #f1f3f6; color: #b7bac2; border-color: #ececec;
}
.pagination-controls span{ display: inline-block; font-size: 1em; color: #999; padding: 0 2px; min-width: 20px; text-align: center; user-select: none; }

/* ==========================================================================
   --- MODALE DÉTAIL (3 colonnes)
   ========================================================================== */
#modalTicketDetail.modal-ticket{
  display: none; position: fixed; z-index: 9999; top: 30px; left: 0;
  width: 100vw; height: 100vh; background: rgba(0,0,0,0.32);
  align-items: center; justify-content: center; padding: 50px !important; box-sizing: border-box;
}
#modalTicketDetail.modal-ticket.open{ display: flex; }
@keyframes modal-bounce-in{ from{ transform: scale(.96) translateY(30px); opacity: 0; } to{ transform: scale(1) translateY(0); opacity: 1; } }
#modalTicketDetail .modal-content{
  width: 100%; min-width: 320px; height: 100%;
  background: #fff; border-radius: 18px; box-shadow: 0 12px 36px #00164033;
  display: flex; flex-direction: column; position: relative; padding: 0; overflow: hidden;
}
#modalTicketDetail .modal-close{
  position: absolute; top: 15px; right: 22px; font-size: 2.3em; color: #678;
  background: none; border: none; cursor: pointer; z-index: 1001; transition: color .2s;
}
#modalTicketDetail .modal-close:hover{ color: #e74c3c; }

/* Header */
.ticket-modal-header{ text-align: center; align-items: center; justify-content: center; margin: 18px 0 12px 0; padding-bottom: 6px; flex-shrink: 0; }
.ticket-modal-title{ font-size: 2.18rem; font-weight: bold; color: #153875; margin-bottom: 4px; }
.ticket-affectation-label{ font-size: 1.18rem; font-weight: 600; color: #08559c; margin-bottom: 3px; }

/* Grille */
.modal-main-3col{
  display: flex; flex-direction: row; gap: 30px; padding: 0 36px 36px 36px;
  background: #fff; border-radius: 0 0 18px 18px; overflow-y: auto; flex-grow: 1; min-height: 360px;
}
.modal-col{
  background: #fafbfc; border-radius: 10px; padding: 19px 14px; min-width: 230px; flex: 1 1 0;
  box-shadow: 0 1px 6px #00336609; display: flex; flex-direction: column; gap: 11px; overflow-y: auto;
}
.modal-col-gauche, .modal-col-droite{ min-width: 220px; max-width: 380px; }
.modal-col-center{
  flex: 2.3 1 0; min-width: 350px; background: #fff; box-shadow: 0 2px 12px #0033661a;
  padding: 18px 30px 22px 30px; gap: 14px;
}
#ticketGlobalReadMode {
    flex-grow: 1; /* Prend toute la place restante */
    height: 100%; /* S'assure que la hauteur est transmise */
    display: flex; /* Active la flexbox pour les 3 colonnes horizontales */
    flex-direction: row; /* Organise les 3 colonnes horizontalement (gauche, centre, droite) */
    min-height: 0; /* Empêche l'élément de s'étendre au-delà de la hauteur du conteneur parent (critical) */
}

/* Le contenu principal des colonnes doit aussi s'étendre */
#ticketGlobalReadMode .modal-main-3col {
    display: flex; /* pour la disposition des 3 colonnes */
    flex-grow: 1;
    height: 100%;
}
/* Responsive modale */
@media (max-width: 1280px){
  .modal-main-3col{ gap: 14px; padding: 0 10px 20px 10px; }
  .modal-col-gauche, .modal-col-droite{ min-width: 220px; max-width: 99vw; padding: 12px 8px; }
  .modal-col-center{ min-width: 200px; max-width: 99vw; padding: 12px 10px 18px 10px; }
}
@media (max-width: 800px){
  .modal-main-3col{ flex-direction: column; gap: 14px; padding: 0 2vw 2vw 2vw; min-height: unset; }
  .modal-col, .modal-col-center, .modal-col-gauche, .modal-col-droite{ max-width: 100vw; min-width: 0; padding: 9px 4px; }
  #modalTicketDetail .modal-content{ border-radius: 8px; max-width: 99vw; }
}

/* --- Contenu colonne centrale --- */
.ticket-actions-bar{
  margin: 10px 0 22px 0; padding: 10px 0; display: flex; gap: 12px; justify-content: flex-start; align-items: center; flex-wrap: wrap;
  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
}
.ticket-actions-bar .action-btn{
  padding: 10px 18px; font-size: 1.05rem; border-radius: 7px; border: none; background: #08559c; color: #fff; font-weight: 600; cursor: pointer; transition: background .14s;
}
.ticket-actions-bar .action-btn:hover{ background: #2469ad; }
.ticket-actions-bar select{ min-width: 170px; padding: 7px 10px; font-size: 1em; }

.ticket-infos{ font-size: 1.14rem; display: flex; flex-direction: column; gap: 8px; margin-top: 3px; }
.ticket-infos div{ margin-bottom: 2px; }
.ticket-infos strong{ color: #003366; min-width: 135px; display: inline-block; font-weight: 600; }

.ticket-description{
  font-size: 1.15rem; background: #f7fafd; border-radius: 8px; padding: 15px 16px; margin: 13px 0 9px 0;
  color: #20273d; box-shadow: 0 1px 4px #00408009; border-left: 4px solid #dae9f8;
}

/* =========================================================
   GALERIE PHOTOS & CARTE (Mise en page stabilisée)
   ========================================================= */

/* Conteneur global : Grille 2 colonnes */
.ticket-media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  align-items: start; /* Aligne le haut des blocs */
  margin-top: 18px;
  width: 100%;
}

/* --- Colonne Gauche : Photos --- */
.ticket-photos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
}

/* 1. PHOTO PRINCIPALE (Hero) */
img.ticket-photo-main {
  display: block;
  width: 100%;
  height: 400px !important; /* Hauteur Force : Grand format */
  object-fit: cover;        /* Remplit tout le cadre sans déformation */
  border-radius: 8px;
  border: 1px solid #ccc;
  cursor: zoom-in;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background-color: #f0f0f0;
}
img.ticket-photo-main:hover {
  filter: brightness(1.03);
}

/* 2. MINIATURES (En dessous) */
.ticket-thumbs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}

/* Style des miniatures */
img.ticket-photo-thumb-small {
  height: 70px;
  width: 70px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s;
}
img.ticket-photo-thumb-small:hover {
  opacity: 1;
  transform: scale(1.05);
  border-color: #aaa;
}

/* --- Colonne Droite : Carte --- */
.ticket-map-container {
  width: 100%;
  /* Suppression des marges parasites pour l'alignement */
  margin: 0 !important; 
  padding: 0 !important;
  /* On retire l'ancien aspect-ratio */
  aspect-ratio: auto !important; 
  height: auto !important;
}

/* LA CARTE : Doit matcher exactement la hauteur de la photo principale */
#ticketMap {
  width: 100%;
  height: 400px !important; /* IDENTIQUE À LA PHOTO */
  min-height: 400px !important;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* S'assure que le calcul de la hauteur inclut la bordure */
  box-sizing: border-box; 
}

/* --- BARRE DE CHAT MODERNE --- */
.chat-input-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    padding: 5px 10px;
    margin-top: auto; /* Pousse vers le bas */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.chat-input {
    flex-grow: 1;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    padding: 8px !important;
    font-size: 0.95rem;
}
.chat-input:focus {
    box-shadow: none !important;
}

.chat-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
.chat-btn:hover {
    background-color: #f0f0f0;
    color: #08559c;
}
.chat-btn.btn-send {
    color: #08559c; /* Avion bleu */
}
.chat-btn.btn-send:hover {
    background-color: #e3f2fd;
}

/* Prévisualisation image */
.chat-preview {
    position: absolute;
    bottom: 100%;
    left: 10px;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px 6px 6px 0;
    font-size: 0.85rem;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    max-width: 90%;
}
.chat-preview .preview-close {
    background: none; border: none; color: #fff; cursor: pointer; font-weight: bold; font-size: 1.1em;
}

/* =========================================================
   GALERIE PHOTOS DANS LES COMMENTAIRES (GRID)
   ========================================================= */

/* Le conteneur de la grille d'images */
.comment-gallery-grid {
  display: grid;
  /* Magie CSS : Crée autant de colonnes que possible avec une largeur min de 90px */
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0; /* Petite séparation avec le texte */
}

/* Style des images dans la grille */
.comment-gallery-grid img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Force un format carré parfait */
  object-fit: cover;   /* Remplit le carré sans déformer l'image */
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #fff;
}

/* Effet au survol */
.comment-gallery-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1; /* Passe au-dessus des autres */
  border-color: #b0b0b0;
}

/* Ajustement : Si une seule image, on la laisse un peu plus grande mais pas immense */
.comment-gallery-grid:has(img:only-child) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    max-width: 250px;
}

/* --- Images dans les commentaires (Chat) --- */
.comment-img-thumb {
  display: block;
  max-width: 100%;
  max-height: 200px; /* Hauteur max pour ne pas polluer le chat */
  width: auto;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: transform 0.2s;
}
.comment-img-thumb:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Ajustement des images dans les boutons */
.chat-btn img {
    width: 48px;
    height: 48px;
    vertical-align: middle;
}

/* Responsive Mobile : On empile tout */
@media (max-width: 900px){
  .ticket-media-row { grid-template-columns: 1fr; row-gap: 20px; }
  img.ticket-photo-main, #ticketMap { height: 300px !important; min-height: 300px !important; }
}

.ticket-map-container{ margin: 10px 0 18px 0; }
#ticketMap{ border-radius: 10px; box-shadow: 0 2px 9px #00336613; width: 100%; min-height: 170px; }

/* --- Col. latérales --- */
.echanges-list{
  background: #fff; border-radius: 7px; padding: 11px 9px; max-height: 100%;
  overflow-y: auto; margin-bottom: 9px; border: 1px solid #e5eaf1;
}
.echange-message{
  background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px;
  margin-bottom: 12px; padding: 10px 15px; font-size: 0.99em;
}
.echange-message .author{ color: #08559c; font-weight: bold; }
.echange-message .date{ font-size: 0.87em; color: #999; margin-left: 6px; }

#modalAddCommentForm, #modalAddInternalCommentForm{ display: flex; gap: 6px; margin-top: auto; }
#modalAddCommentForm input, #modalAddInternalCommentForm input{ flex: 1; padding: 8px; border-radius: 5px; border: 1px solid #ddd; }
#modalAddCommentForm button, #modalAddInternalCommentForm button{
  padding: 8px 15px; border-radius: 5px; border: none; color: #fff; font-weight: 600; cursor: pointer;
}

/* Viewer au-dessus de la modale */
.viewer-container { z-index: 120000 !important; }
.viewer-backdrop  { z-index: 119990 !important; }
body.viewer-open { overflow: hidden; }

/* Demandeur enregistré */
.demandeur-enregistre { font-style: italic; color: #334155; vertical-align: middle; }

/* ==========================================================================
   --- Responsives généraux ---
   ========================================================================== */
@media (max-width: 1250px){
  #modalTicketDetail .modal-content{ overflow-y: auto; }
  .modal-main-3col{ flex-direction: column; height: auto; max-height: none; padding: 0 12px 24px 12px; overflow-y: visible; }
  .modal-col{ overflow-y: visible; }
  .modal-col-centre, .modal-col-gauche, .modal-col-droite{ min-width: 0; max-width: none; }
}

/* * --- Étape 1 : PC / Tablettes larges (> 1024px) ---
 * - Conteneur de la table en 'overflow-x: auto' pour gérer le débordement.
 */
@media (min-width: 1025px) {
  .tickets-list{
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
  }
  .tickets-table {
    /* Laisser le navigateur gérer la largeur, mais forcer une largeur min */
    /* pour que les colonnes 'nowrap' ne soient pas écrasées TROP tôt */
    min-width: 1100px;
  }
}

/* * --- Étape 2 : Tablettes & Mobiles (<= 1024px) ---
 * On passe en mode "cartes".
 */
@media (max-width: 1024px){
  /* --- v1.3.0: Empiler les filtres sur tablette --- */
  .filter-area{
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group, .filter-area button{
    width: 100%;
    min-width: unset;
  }
  .filter-area button{
    margin-top: 10px;
  }
  /* --- Fin v1.3.0 --- */

  .tickets-list{
    overflow-x: hidden; /* Plus de scroll horizontal, on passe en cartes */
    border: none;
  }
  .tickets-table{
    min-width: unset;
    width: 100%;
    table-layout: auto;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }
  .tickets-table thead{ display: none; }
  .tickets-table tbody, .tickets-table tr, .tickets-table td{
    display: block;
    width: 100% !important; /* important pour override les largeurs % */
    box-sizing: border-box;
    /* Annuler les réglages 'width: 1%' et 'white-space: nowrap' */
    width: auto !important;
    white-space: normal !important;
  }
  .tickets-table tr{
    margin-bottom: 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    /* overflow: hidden; -- CORRECTION v1.2.6 : Supprimé pour que les boutons ne soient pas coupés */
    background: #fff;
  }
  .tickets-table td{
    overflow: visible;
    text-overflow: clip;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 120px; /* Espace pour le data-label */
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 42px;
  }
  .tickets-table tr td:last-child{ border-bottom: none; }
  .tickets-table td::before{
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 100px;
    text-align: left;
    font-weight: bold;
    color: #333;
  }

  /* --- NOUVELLE RÈGLE (v1.2.9) : Grille 2x2 pour les boutons en mode carte --- */
  .tickets-table td.action-cell{
    display: grid; /* Utiliser Grid */
    grid-template-columns: 1fr 1fr; /* Créer 2 colonnes égales */
    justify-items: center; /* Centrer horizontalement dans la grille */
    align-items: center; /* Centrer verticalement */
    padding: 10px;
    background-color: #f8f9fa;
    gap: 6px; /* Espace entre les boutons */
    /* Annuler les styles de 'td' */
    justify-content: initial; 
    align-items: initial;
    padding-left: 10px; /* Rétablir un padding normal */
  }
  .tickets-table td.action-cell .button {
    width: 100%; /* Le bouton prend 100% de sa case de grille */
    margin: 0;
    padding: 6px 8px;
    font-size: 0.93em;
    box-sizing: border-box; /* S'assurer que le padding est inclus */
  }
  .tickets-table td.action-cell::before{
    display:none !important;
  }
}

/* * --- Étape 3 : Mobiles (<= 768px) ---
 * Gestion des détails de la modale.
 */
@media (max-width: 768px){
  /* Styles modale pour mobile */
  #modalTicketDetail{ padding: 10px; }
  #modalTicketDetail .modal-content{ padding: 4px; max-height: 95vh; }
  .modal-main-3col{ padding: 0 4px 12px 4px; gap: 12px; }
  .modal-col-centre{ padding: 12px 2vw 10px 2vw; }
}

/* Workflow actions */
.workflow-actions{
  display: flex; justify-content: center; align-items: center; gap: 16px; margin: 22px 0 14px 0; flex-wrap: wrap; background: none; border: none;
}
.workflow-actions .action-btn,
.workflow-actions select{
  padding: 10px 18px; border-radius: 7px; border: none; background: #08559c; color: #fff; font-weight: 600; font-size: 1rem;
  cursor: pointer; transition: background .14s, color .14s; margin-right: 6px; margin-bottom: 4px; min-width: 120px;
}
.workflow-actions .action-btn:hover{ background: #2469ad; color: #fff; }
.workflow-actions select{ background: #f6f9ff; color: #08559c; border: 1px solid #b6d0fa; font-weight: 500; min-width: 150px; padding: 9px 12px; }

/* === Médias : deux colonnes strictes (grille) === */
.ticket-media-row{
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; margin-top: 18px; width: auto; background: none;
}
.ticket-photos, .ticket-map-container{
  display: block; width: 100%; min-width: 0; min-height: 1px; padding: 0; background: none; box-shadow: none;
}
.ticket-photos img.ticket-photo-thumb{
  display: block; width: 100%; height: 280px; object-fit: cover; border-radius: 10px; box-shadow: 0 2px 8px rgba(60,60,80,.09); margin: 0;
}
.ticket-map-container{ position: relative; aspect-ratio: 4 / 3; height: auto; }
#ticketMap{ width: 100%; height: 100%; min-height: 280px; border-radius: 10px; overflow: hidden; }

/* Empilement en mobile */
@media (max-width: 900px){
  .ticket-media-row{ grid-template-columns: 1fr; row-gap: 18px; }
  #ticketMap{ min-height: 210px; }
  .ticket-photos img.ticket-photo-thumb{ height: 210px; }
}

/* Marker */
.custom-map-marker{ width: 36px; height: 46px; background-size: contain; background-repeat: no-repeat; background-position: bottom center; cursor: pointer; }

/* ==========================================================================
   --- Boutons de filtre rapide par priorité
   ========================================================================== */
.priority-filter-row{ margin: 10px 0 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } /* Ajout de flex-wrap */
.priority-filter-row .filter-label{ font-weight: bold; margin-right: 8px; color: #333; }
.priority-filter-btn{
  padding: 3px 17px; background: #fafafa; border: 1.5px solid #e3e3e3; color: #666; border-radius: 14px;
  font-size: 0.98em; font-weight: 500; cursor: pointer; transition: background 0.17s, color 0.17s, border-color 0.17s; outline: none; min-width: 50px;
}
.priority-filter-btn.active,
.priority-filter-btn:focus{
  background: var(--primary-action-color, #E57C0C); color: #fff; border-color: var(--primary-action-color, #E57C0C); font-weight: 700;
}
.priority-filter-btn:hover:not(.active){
  background: #fbeee6; color: var(--primary-action-color, #E57C0C); border-color: var(--primary-action-color, #E57C0C);
}

/* ==========================================================================
   --- Historique (Modale)
   ========================================================================== */
.historique-container{ background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; }
.historique-container h4{ margin-top: 0; margin-bottom: 10px; color: #495057; font-size: 1.1rem; }
.historique-list{ display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.historique-item{
  display: flex; flex-direction: column; align-items: center; font-size: 0.95rem; padding: 0 1.5rem; text-align: center; min-width: 120px; position: relative;
}
.historique-item:not(:first-child){ border-left: 1px solid #d0d5db; }
.historique-item .historique-label{ color: #6c757d; font-size: 0.85rem; margin-bottom: 4px; }
.historique-item strong{ color: #212529; }

/* ==========================================================================
   --- Header & Actions Modale
   ========================================================================== */
.modal-header{ display: flex; justify-content: center; align-items: center; position: relative; padding: 18px 50px; }
.ticket-title-container{ text-align: center; }
h2.ticket-modal-title{ font-size: 1.8rem; color: #153875; margin: 0; }
.ticket-affectation-header{ font-size: 1.1rem; color: #08559c; margin-top: 5px; }

.modal-actions-wrapper{ padding: 0 20px; margin-bottom: 20px; }
.action-banner{
  background-color: #e7f5fe; border: 1px solid #b3e5fc; border-radius: 8px; padding: 15px; margin-top: 15px; text-align: center; display: block; transition: all 0.3s ease;
}
.action-banner-label{ margin: 0 0 12px 0; font-weight: 500; color: #01579b; font-size: 1rem; }
.action-banner-controls{ display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }

.action-banner-controls .action-btn,
.action-banner-controls select{
  margin: 0; padding: 8px 14px; font-size: 0.9rem; border-radius: 6px; border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer; font-weight: bold; transition: all 0.2s ease;
}
.action-banner-controls select{ background: white; min-width: 150px; }

.action-btn.priority-btn{ background-color: #f0f0f0; color: #333; }
.action-btn.priority-btn.p1{ background-color: #ffcdd2; color: #c62828; }
.action-btn.priority-btn.p2{ background-color: #fff9c4; color: #f57f17; }
.action-btn.priority-btn.p3{ background-color: #c8e6c9; color: #2e7d32; }
.action-btn.priority-btn.active{ box-shadow: 0 0 0 3px #007bff; z-index: 2; }

#validateTicketBtn{ background-color: #4caf50; color: white; border-color: #388e3c; }
#refuseTicketBtn{ background-color: #ff9800; color: white; border-color: #f57c00; }
#transferTicketBtn{ background-color: #3f51b5; color: white; border-color: #303f9f; }

.workflow-actions-final{ display: flex; justify-content: center; gap: 10px; margin: 20px 0 10px 0; }
#closeTicketBtn, #printTicketBtn, #deleteTicketBtn{
  padding: 8px 16px; font-size: 0.95rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-weight: bold; color: white;
}
#closeTicketBtn{ background-color: #607d8b; border-color: #455a64; }
#printTicketBtn{ background-color: #009688; border-color: #00796b; }
#deleteTicketBtn{ background-color: #f44336; border-color: #d32f2f; }

.modal-content.is-assigned #banner-assign,
.modal-content.is-assigned #banner-transfer{ display: none; }

.ticket-title-container .follow-actions{
  margin-top: 10px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.ticket-title-container .follow-actions #btnWatchToggle{
  padding: 7px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; font-weight: 600; line-height: 1;
}
.ticket-title-container .follow-actions #btnWatchToggle:hover{ background:#f8fafc; }

/* ==========================================================================
   --- Deadline dépassée
   ========================================================================== */
.detail-row .value.deadline-passed{
  color: #c70c0c !important; background-color: #f71616; font-weight: bold; padding: 2px 6px; border-radius: 4px; display: inline-block;
}

/* ==========================================================================
   --- Utilitaires
   ========================================================================== */
body.modal-open{ overflow: hidden; }
.ticket-desc-link{
  display: inline-block; color: #204a88; cursor: pointer; text-decoration: underline dotted;
  transition: background 0.13s, color 0.13s; outline: none;
}
.ticket-desc-link:hover, .ticket-desc-link:focus{ background: #eaf2ff; color: #1751ac; text-decoration: underline solid; }
.ticket-desc-link:active{ color: #0e315e; }

.desc-link.open-ticket-modal:focus{ outline: 2px solid var(--primary-color, #2176ff); background: #e7f3ff; }
.desc-link.open-ticket-modal{
  color: #1a418c; text-decoration: underline; cursor: pointer; transition: color 0.18s; word-break: break-word; background: transparent; border: none; font-size: inherit; padding: 0;
}
.desc-link.open-ticket-modal:hover, .desc-link.open-ticket-modal:focus{ color: #1765ad; text-decoration: underline dotted; background: #f5fafd; }

.historique-jalons{
  display: flex; align-items: center; justify-content: flex-start; gap: 0; padding: 14px 20px;
  background: #fafbfc; border-radius: 8px; min-height: 46px; font-size: 1.09em; flex-wrap: wrap;
}
.historique-jalon{ display: flex; align-items: center; gap: 6px; padding: 0 12px; font-weight: 400; white-space: nowrap; }
.historique-jalon .label{ color: #27364B; font-weight: 600; }
.historique-jalon .value{ color: #1e2956; font-weight: 500; letter-spacing: 0.5px; }
.historique-jalon .user{ color: #355fcf; font-weight: 500; margin-left: 8px; }
.historique-jalon .user-name{ font-weight: 700; color: #1864ab; letter-spacing: 0.3px; }
.jalon-sep{ width: 2px; height: 32px; background: linear-gradient(to bottom, #e4e6ea 55%, #f6f7f9 100%); margin: 0 2px; border-radius: 2px; }

@media (max-width: 700px){
  .historique-jalons{ flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 6px; }
  .jalon-sep{ width: 80%; height: 2px; margin: 5px 0; background: linear-gradient(to right, #e4e6ea 70%, #f6f7f9 100%); }
  .historique-jalon{ padding: 3px 0; }
}

.deadline-warning{ display: inline-block; vertical-align: middle; margin-left: 6px; animation: deadlineBlink 1.1s steps(2, jump-none) infinite; }
.deadline-warning-ico{ vertical-align: middle; }
@keyframes deadlineBlink{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.2; } }

/* ==========================================================================
   --- Bloc d'actions unifié (Modale)
   ========================================================================== */
.modal-unified-actions{ background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 15px 20px; margin: 0 0 20px 0; }
.modal-unified-actions .action-label{ font-weight: bold; color: #495057; margin: 0 0 12px 0; font-size: 1rem; }
.modal-unified-actions .action-controls{ display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.modal-unified-actions .control-group{ display: flex; align-items: center; gap: 8px; }
.modal-unified-actions .control-group label{ font-weight: 500; }
.modal-unified-actions select{ min-width: 180px; }

/* ====== RELANCES ====== */
.relances-section, .relances-container{
  background:#fff; border:1px solid #e5eaf1; border-radius:10px;
  padding:14px; margin-top:18px; box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
.relance-block{ margin:10px 0 16px; background:#f8fafc; border:1px solid #e6eef8; border-radius:8px; padding:12px; }
.relance-form{ display:flex; flex-direction:column; gap:8px; }
.relance-form textarea{ width:100%; min-height:70px; resize:vertical; padding:10px; border:1px solid #ced4da; border-radius:6px; font-size:.98rem; }
.relance-row{ display:flex; align-items:center; gap:8px; }
.relances-history{ margin-top:12px; }
.relance-item{ border:1px solid #e9ecef; background:#fbfdff; border-radius:8px; padding:10px 12px; margin:8px 0; }
.relance-meta{ font-size:.9rem; color:#4a5a73; margin-bottom:6px; }
.relance-msg{ white-space:pre-wrap; color:#1f2937; }

/* ====== WATCHERS ====== */
.watchers-section, .watchers-widget{
  background:#fff; border:1px solid #e5eaf1; border-radius:10px;
  padding:14px; margin-top:18px; box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
#watchersList, #modalWatchersList{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.watcher{
  display:inline-flex; align-items:center; padding:4px 10px; background:#eef6ff; color:#0b3c78; border:1px solid #cfe2ff; border-radius:999px; font-size:.92rem;
}
#watchToggleBtn, #modalWatchToggleBtn{
  padding:7px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; cursor:pointer;
}
#watchToggleBtn:hover, #modalWatchToggleBtn:hover{ background:#f8fafc; }

/* ====== TOASTS ====== */
.toast{
  position:fixed; right:18px; bottom:18px; background:#0ea5e9; color:#fff;
  padding:10px 14px; border-radius:8px; box-shadow:0 6px 24px rgba(2,6,23,.18); z-index:120000;
}
.toast-success{ background:#16a34a; }
.toast-error  { background:#e11d48; }
.toast-info   { background:#0ea5e9; }

/* ====== UTILITAIRES BOUTONS ====== */
.button-light{ background:#fff; border:1px solid #e2e8f0; color:#0f172a; }
.button-light:hover{ background:#f8fafc; }
.button-small{ padding:6px 10px !important; font-size:.9rem !important; }
.ticket-detail-container .map-detail-placeholder:empty{ display:none; }

/* =========================================================
   PRIORITÉS  — boutons “pills” (P1 / P2 / P3 très lisibles)
   ========================================================= */
.priority-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Conteneur du bouton */
.button.button-prio,
.priority-buttons .button-prio{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:.4rem;
  padding:.4rem .7rem;
  border-radius:999px;
  border:1.5px solid #d1d5db;
  font-weight:700;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  user-select:none;
  min-width:82px;
  background:#ffffff;
  color:#111827;
  background-image:none !important;
  box-shadow:0 1px 3px rgba(15,23,42,.12) !important;
  filter:none !important;
}

.button.button-prio:hover{
  background:#f9fafb;
  box-shadow:0 2px 6px rgba(15,23,42,.18);
  transform:translateY(-1px);
}
.button.button-prio:focus-visible{
  outline:3px solid #94c6ff;
  outline-offset:2px;
}
.button.button-prio[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* Pastille "P1 / P2 / P3 / P4" */
.button.button-prio .prio-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.1rem;
  padding:.15rem .6rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.03em;
}

/* Date / deadline */
.button.button-prio .prio-date,
.button.button-prio .deadline{
  display:inline-block;
  padding:.14rem .55rem;
  border-radius:6px;
  background:#ffffff;
  border:1px solid #e3e7ee;
  font-size:.78rem;
  color:#243647;
  line-height:1;
}

/* Couleurs par priorité (bordure + pastille) */
.button.button-prio[data-prio="1"]{
  border-color:#fecaca;
}
.button.button-prio[data-prio="1"] .prio-chip{
  background:#dc2626;
  color:#ffffff;
}

.button.button-prio[data-prio="2"]{
  border-color:#fed7aa;
}
.button.button-prio[data-prio="2"] .prio-chip{
  background:#f97316;
  color:#ffffff;
}

.button.button-prio[data-prio="3"]{
  border-color:#bbf7d0;
}
.button.button-prio[data-prio="3"] .prio-chip{
  background:#16a34a;
  color:#ffffff;
}

.button.button-prio[data-prio="4"]{
  border-color:#e5e7eb;
}
.button.button-prio[data-prio="4"] .prio-chip{
  background:#6b7280;
  color:#ffffff;
}

/* Compat chips historiques (tableau liste) */
.priority-buttons .prio-1{ background:#e74c3c; }
.priority-buttons .prio-2{ background:#f39c12; }
.priority-buttons .prio-3{ background:#27ae60; }
.priority-buttons .prio-4{ background:#95a5a6; }

/* Mobile : on garde la pastille P*, on simplifie la date */
@media (max-width:900px){
  .priority-buttons{ gap:8px; }
  .button.button-prio{
    font-size:.9rem;
    padding:.38rem .6rem;
  }
  .button.button-prio .prio-date,
  .button.button-prio .deadline{
    display:none;
  }
}

/* =========================================================
   TRANSFERTS / SERVICES
   ========================================================= */
.services-buttons{ display:flex; flex-wrap:wrap; gap:10px; margin:.5rem 0 0; }
.services-buttons .svc-btn{
  background:#0077b6; border:1px solid #006398; color:#fff;
  padding:.48rem .8rem; border-radius:12px; font-weight:600; line-height:1; cursor:pointer; box-shadow:none; text-shadow:none;
}
.services-buttons .svc-btn:hover{ background:#006398; border-color:#005480; transform:translateY(-1px); }
.services-buttons .svc-btn:focus-visible{ outline:2px solid #7dd3fc; outline-offset:2px; }
.services-buttons .button-light{
  background:#fff; border:1px solid #dbe3ee; color:#2a3b4d; border-radius:10px; padding:.4rem .7rem;
}
.services-buttons .button-light:hover{ background:#f6f9fe; }

/* =========================================================
   BANNIÈRES D’ACTION
   ========================================================= */
.banner-action{ display:none; border-left:4px solid #1976d2; background:#e3f2fd; padding:.75rem 1rem; margin:.75rem 0; border-radius:.375rem; }
.banner-action.assign{   border-color:#43a047; background:#e8f5e9; }
.banner-action.transfer{ border-color:#1e88e5; background:#e3f2fd; }

/* Amélioration lisibilité assignation/priorités */
.assign-by-priority .assign-row,
.action-banner .action-banner-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.action-banner {
  background: #f5f7ff;
  border: 1px solid #d3d9e8;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 12px;
}

.assign-by-priority label {
  font-weight: 600;
  color: #1f2937;
  margin-right: 8px;
}

.assign-by-priority select,
.action-banner select {
  height: 40px;
  min-width: 210px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
}

.assign-by-priority input[type="date"],
.action-banner input[type="date"] {
  height: 36px;
  padding: 0 .6rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
}

/* Bouton Refus : contour rouge, plus lisible */
.action-banner .btn-refus,
.assign-by-priority .btn-refus {
  height: 36px;
  padding: 0 .9rem;
  border-radius: 999px;
  font-weight: 600;
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.action-banner .btn-refus:hover,
.assign-by-priority .btn-refus:hover {
  background: #fef2f2;
}

.action-banner .btn-refus[aria-pressed="true"],
.assign-by-priority .btn-refus[aria-pressed="true"] {
  background: #b91c1c;
  color: #fff;
  border-color: #991b1b;
}

/* =========================================================
   BOUTONS DANGEREUX (Clôturer / Supprimer)
   ========================================================= */
#closeTicketBtn,
.button-danger,
#deleteTicketBtn{ background:#e74c3c; border:1px solid #e74c3c; color:#fff !important; }
#closeTicketBtn:hover,
.button-danger:hover,
#deleteTicketBtn:hover{ filter:brightness(.95); }

/* =========================================================
   DIVERS
   ========================================================= */
.no-content-notice{ opacity:.7; font-style:italic; }
.status-icon{ width:18px; height:18px; vertical-align:-3px; margin-right:4px; }

.modal-header .modal-header-actions{
  display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:6px;
}
#btnWatchToggle{
  padding:7px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; font-weight:600; line-height:1;
}
#btnWatchToggle:hover{ background:#f8fafc; }
#btnWatchToggle.active,
#btnWatchToggle[aria-pressed="true"]{
  background:#0ea5e9; color:#fff; border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.18);
}
#btnRelanceDemandeur, #btnRelanceAgent{
  padding:8px 14px; border-radius:8px; border:1px solid #dbe3ee; background:#fff; color:#0f172a;
  cursor:pointer; font-weight:600; line-height:1;
}
#btnRelanceDemandeur:hover, #btnRelanceAgent:hover{ background:#f8fafc; }
#btnRelanceDemandeur::before{ content:"📨"; margin-right:.4em; }
#btnRelanceAgent::before{ content:"👤"; margin-right:.4em; }

/* =========================================================
   STYLES D'IMPRESSION
   ========================================================= */
@page{ size: A4; margin: 10mm; }

@media print{
  html, body{ background:#fff !important; font-size:10pt !important; line-height:1.4 !important; }
  body *{ visibility:hidden !important; }

  .ticket-detail-container, .ticket-detail-container *{ visibility:visible !important; }
  #modalTicketDetail.open .modal-col-center, #modalTicketDetail.open .modal-col-center *{ visibility:visible !important; }
  body.print-standalone .page, body.print-standalone .page *{ visibility:visible !important; }

  .ticket-media-row, .ticket-media-row * , .ticket-map-container, #ticketMap, #ticketMapImg{
    display:block !important; width:100% !important; height:230px !important; object-fit:cover !important; border-radius:6px !important;
  }

  .ticket-detail-container, #modalTicketDetail.open .modal-col-center, body.print-standalone .page{
    position:static !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border:none !important;
    box-shadow:none !important; overflow:visible !important;
  }
  body.print-standalone .card{ box-shadow:none !important; }
  body.print-standalone #ticketMapImg{
    display:block !important; width:100% !important; height:230px !important; object-fit:cover !important; border-radius:6px !important;
  }

  .ticket-actions, .comments-section, #addCommentForm, .modal-header, .modal-close, .modal-actions-wrapper,
  .workflow-actions-final, .kpi-bar, .filter-area, .pagination-controls, .open-gallery-button, .relances-section,
  .watchers-section, .viewer-container, .viewer-backdrop, .viewer-player,
  .modal-col.modal-col-gauche, .modal-col.modal-col-droite,
  body.print-standalone .modal-header, body.print-standalone .modal-actions-wrapper,
  body.print-standalone .workflow-actions-final, body.print-standalone .open-gallery-button{
    display:none !important;
  }

  .ticket-detail-columns{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; align-items:start !important;
  }
  .ticket-media-row{
    display:grid !important; grid-template-columns:1fr 1fr !important; column-gap:16px !important; align-items:start !important;
  }
  .ticket-media-row .ticket-photos,
  .ticket-media-row .ticket-map-container{
    display:block !important; width:auto !important; min-width:0 !important; flex:none !important; justify-content:initial !important; align-items:stretch !important;
  }
  .ticket-media-row .ticket-photos img{
    display:block !important; width:100% !important; height:230px !important; object-fit:cover !important; break-inside:avoid !important; page-break-inside:avoid !important;
  }

  #ticketMap{ display: none !important; } /* masque canvas interactif */
  #ticketMapImg{
    display: block !important; visibility: visible !important; width: 100% !important; height: 230px !important;
    object-fit: cover !important; border-radius: 6px !important; break-inside: avoid !important; page-break-inside: avoid !important;
  }

  .maplibregl-ctrl, .maplibregl-ctrl-group, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right{ display:none !important; }

  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* =========================================================
   FICHE D'INTERVENTION (print.php)
   ========================================================= */
.fi-header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid #e5e7eb;
}
.fi-logo{ height:44px; width:auto; display:block; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-text small{ color:#6b7280; }
.fi-meta{ display:grid; grid-template-columns:repeat(3, auto); gap:10px 20px; font-size:0.9rem; }
.fi-meta .lab{ display:block; font-size:11px; color:#6b7280; text-transform:uppercase; }
.fi-meta .val{ display:block; font-weight:600; }
.fi-screen{ display:block; }
.fi-print{ display:none; }

.echanges-list .msg-left{ text-align:left; }
.echanges-list .msg-right{ text-align:right; }
.read-badge{ font-size:12px; opacity:.85; margin-left:.5rem; }
.read-badge.unread{ color:#c0392b; font-weight:600; }

/* LIGNES CLOTUREES */
#ticketsTable tbody tr.ticket-closed > td,
#ticketsTable tbody tr.ticket-closed > th{
  background-color:#d1d5db !important; color:#f5f5f5 !important;
}
#ticketsTable tbody tr.ticket-closed a{ color:#ffffff !important; text-decoration: underline; }
#ticketsTable tbody tr.ticket-closed .badge,
#ticketsTable tbody tr.ticket-closed .pill,
#ticketsTable tbody tr.ticket-closed .status-badge{
  background:#444 !important; color:#fff !important; border-color:#555 !important;
}
#ticketsTable tbody tr.ticket-closed .actions .btn{
  background:#555 !important; border-color:#666 !important; color:#fff !important;
}
#ticketsTable tbody tr.ticket-closed:hover > td{ filter: brightness(1.06); }

/* Overlays “commentaire interne” */
#ticketsTable tr.ticket-has-internal,
.tickets-table tr.ticket-has-internal{ position: relative; }
#ticketsTable tr.ticket-has-internal td:not(.action-cell),
.tickets-table tr.ticket-has-internal td:not(.action-cell){
  filter: blur(2px); transition: filter .25s ease; pointer-events: none;
}
#ticketsTable tr.ticket-has-internal .action-cell,
.tickets-table tr.ticket-has-internal .action-cell{ position: relative; z-index: 3; }
#ticketsTable tr.ticket-has-internal .internal-overlay,
.tickets-table tr.ticket-has-internal .internal-overlay{
  position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 1; transition: opacity .25s ease;
}
#ticketsTable tr.ticket-has-internal.read .internal-overlay,
.tickets-table tr.ticket-has-internal.read .internal-overlay{ opacity: 0; }

/* Overlays “nouveau message public” */
#ticketsTable tr.ticket-has-newmsg,
.tickets-table tr.ticket-has-newmsg{ position: relative; }
#ticketsTable tr.ticket-has-newmsg td:not(.action-cell),
.tickets-table tr.ticket-has-newmsg td:not(.action-cell){
  filter: blur(2px); transition: filter .25s ease; pointer-events: none;
}
#ticketsTable tr.ticket-has-newmsg .action-cell,
.tickets-table tr.ticket-has-newmsg .action-cell{ position: relative; z-index: 3; }
#ticketsTable tr.ticket-has-newmsg .newmsg-overlay,
.tickets-table tr.ticket-has-newmsg .newmsg-overlay{
  position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 1; transition: opacity .25s ease;
}
#ticketsTable tr.ticket-has-newmsg.read .newmsg-overlay,
.tickets-table tr.ticket-has-newmsg.read .newmsg-overlay{ opacity: 0; }

/* Modale relance */
.modal-relance{
  display: none; position: fixed; z-index: 100001; left: 0; top: 0; width: 100%; height: 100%;
  overflow: auto; background-color: rgba(0,0,0,0.6); align-items: center; justify-content: center;
}
.modal-relance.open{ display: flex; }
.modal-relance-content{
  background-color: #ffffff; margin: auto; padding: 24px; border: 1px solid #888; width: 90%; max-width: 550px;
  border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; color: #333;
}
.modal-relance-header{
  display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px;
}
.modal-relance-header h3{ margin: 0; font-size: 1.25rem; }
.modal-relance-header .modal-close{ font-size: 2rem; font-weight: bold; line-height: 1; color: #888; background: none; border: none; cursor: pointer; }
.modal-relance-body textarea{
  width: 100%; box-sizing: border-box; padding: 10px; font-family: Arial, sans-serif; font-size: 1rem;
  border: 1px solid #ccc; border-radius: 4px; min-height: 120px; margin-bottom: 15px;
}
.modal-relance-footer{ display: flex; justify-content: flex-end; gap: 10px; }

/* ==========================================================================
   --- Modale de refus du ticket
   ========================================================================== */
.modal-refus .modal-relance-content{
  max-width: 1000px;
  width: 95%;
}

.modal-refus-title{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.modal-refus-icon{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.modal-refus-subtitle{
  margin: 2px 0 0 0;
  font-size: 0.9rem;
  color: #4b5563;
}

.modal-refus-body{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  margin-top: 10px;
}

.modal-refus-summary{
  flex: 0 0 260px;
  background: #f8fafc;
  border: 1px solid #e5eaf1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #1f2933;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.modal-refus-summary h4{
  margin: 0 0 6px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
}

.modal-refus-summary-list{
  margin: 0;
  padding: 0;
}

.modal-refus-summary-list .summary-row{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.modal-refus-summary-list dt{
  font-weight: 600;
  color: #4b5563;
}

.modal-refus-summary-list dd{
  margin: 0;
  text-align: right;
  color: #111827;
  white-space: nowrap;
}

.modal-refus-placeholders{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #d1d5db;
}

.placeholders-label{
  margin: 0 0 4px 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
}

.placeholders-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.placeholder-chip{
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
  font-weight: 600;
  padding: 3px 9px;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.placeholder-chip:hover {
    background: #e0e7ff;
    border-color: #818cf8;
}

.placeholders-help{
  margin-top: 4px;
  font-size: 0.78rem;
  color: #6b7280;
}

.modal-refus-message{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-refus-label{
  font-weight: 600;
  color: #111827;
  font-size: 0.95rem;
}

.modal-refus-textarea{
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 0.96rem;
  line-height: 1.45;
  font-family: inherit;
  box-sizing: border-box;
}

.modal-refus-textarea:focus{
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}

.modal-refus-templates{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.9rem;
}

.modal-refus-templates label{
  font-weight: 500;
}

.modal-refus-templates select{
  min-width: 220px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 0.9rem;
}

.modal-refus-template-hint{
  font-size: 0.82rem;
  color: #6b7280;
}

.modal-refus-hint{
  margin-top: 4px;
  font-size: 0.82rem;
  color: #64748b;
}

.modal-refus-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.modal-refus-footer .button.button-danger{
  min-width: 230px;
  font-weight: 700;
}

@media (max-width: 880px){
  .modal-refus-body{
    flex-direction: column;
  }
  .modal-refus-summary{
    flex: 1 1 auto;
    width: 100%;
  }
}

/* --- INFO-BULLES (?) --- */
.help-tip {
    display: inline-block;
    position: relative;
    cursor: help;
    margin-left: 5px;
    vertical-align: middle;
}

.help-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #94a3b8;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
}

.help-tip:hover .help-content {
    display: block;
    opacity: 1;
    visibility: visible;
}

.help-content {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 125%; /* Au-dessus */
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    padding: 10px;
    background: #1e293b;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.4;
    border-radius: 6px;
    text-align: center;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: opacity 0.2s;
    font-weight: normal;
}

/* Flèche du tooltip */
.help-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* --- ÉDITEUR WYSIWYG LÉGER --- */
.editor-container {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 300px; /* Hauteur minimale augmentée */
}

.editor-toolbar {
    background: #f1f5f9;
    border-bottom: 1px solid #cbd5e1;
    padding: 8px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.editor-btn {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    color: #334155;
    min-width: 30px;
    transition: all 0.2s;
}

.editor-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.editor-btn.active {
    background: #cbd5e1;
    font-weight: bold;
}

.editor-content {
    flex: 1;
    padding: 15px;
    outline: none;
    overflow-y: auto;
    font-family: inherit;
    font-size: 0.96rem;
    line-height: 1.5;
    color: #1e293b;
}

.editor-content p { margin: 0 0 10px 0; }
.editor-content ul { margin: 0 0 10px 20px; }

/* --- MODE EDITION --- */
.mode-editing .value {
    display: block; /* Pour que les inputs prennent la largeur */
}

.edit-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95rem;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.edit-input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}

/* Highlight des champs modifiés */
.field-changed .edit-input {
    border-color: #e67e22;
    background-color: #fffbf5;
}

/* Masquer certains éléments en mode édition si nécessaire */
.mode-editing .historique-container,
.mode-editing .workflow-actions-final {
    opacity: 0.5;
    pointer-events: none; /* Désactiver les actions workflow classiques pendant l'édition */
}

.ticket-edit-actions button {
    min-width: 100px;
}

@media print{
  .fi-screen{ display: none !important; }
  .fi-print { display: block !important; }
  .fi-print input, .fi-print textarea, .fi-print button, .fi-print canvas{ display: none !important; }
}
.fi-history-icon{border:0;background:#fff;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer}
.fi-history-icon .fas{font-size:16px;color:#0b5cab}
.fi-history-icon.blink{animation:fi-blink 1s linear infinite}
@keyframes fi-blink{0%,49%{filter:brightness(1)}50%,100%{filter:brightness(1.8)}}
.historique-container { position: relative; }
.historique-header { display:flex; align-items:center; justify-content:space-between; }
.fi-history-icon{
  border:0;
  background:#f3f5f7;
  width:36px; height:36px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.06) inset;
}
.fi-history-icon i{ font-size:16px; }
.fi-history-icon:hover{ background:#e9edf1; }
/* =============================================================================
 * FICHE — État modal
 * Force l’ouverture même si un CSS externe pose display:none
 * ============================================================================= */
#fi-modal { display: none; }
#fi-modal.is-open { display: flex !important; } /* priorité maximale */