body { font-family: 'Segoe UI', sans-serif; background: #f4f4f4; margin: 0; padding: 0; }
.navbar { background: #343a40; padding: 0 1rem; height: 50px; display:flex; align-items:center;}
.navbar a { color: #f8f9fa; padding: 0 15px; text-decoration: none; line-height: 50px; }
.navbar a:hover { background: #495057; }
.navbar a.right { margin-left: auto; }
.container { padding: 20px; background: white; max-width: 1100px; margin: 20px auto; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius:5px;}
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border-bottom: 1px solid #ddd; text-align: left; }
th { background: #e9ecef; }
.btn { padding: 8px 12px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; border:none; cursor:pointer; font-size:14px;}
.btn-danger { background: #dc3545; }
.btn-success { background: #28a745; }
.msg-box { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 5px; }
.msg-me { background: #e9f7ef; text-align: right; margin-left:20%; }
.msg-other { background: #f8f9fa; margin-right:20%; }

/* STATUTS */
.status-ouvert { color: #28a745; font-weight: bold; }
.status-en_cours { color: #fd7e14; font-weight: bold; }
.status-ferme { color: #dc3545; font-weight: bold; text-decoration: line-through; }

/* PRIORITES (Badges) */
.badge { padding: 4px 8px; border-radius: 4px; color: white; font-size: 0.8em; font-weight: bold; text-transform: uppercase; }
.prio-basse { background-color: #6c757d; }     /* Gris */
.prio-normale { background-color: #17a2b8; }   /* Bleu Cyan */
.prio-haute { background-color: #ffc107; color: black; } /* Jaune */
.prio-critique { background-color: #dc3545; }  /* Rouge */

/* Note interne (Jaune pâle) */
.msg-internal { 
    background: #fff3cd; 
    border: 1px solid #ffeeba; 
    color: #856404;
    margin-right: 20%; /* Alignement comme un message reçu */
}
.badge-internal {
    background: #ffc107;
    color: #000;
    font-size: 0.7em;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
    float: right;
}
/* --- INFOBULLES (Tooltips) --- */
.tooltip {
    border-bottom: 1px dotted #666; /* Soulignement pointillé */
    cursor: help;                   /* Curseur point d'interrogation */
    position: relative;
}

/* Le texte de l'infobulle (caché par défaut) */
.tooltip:hover::after {
    content: attr(data-tip);        /* Récupère le texte de l'attribut data-tip */
    position: absolute;
    bottom: 125%;                   /* Position au-dessus */
    left: 50%;
    transform: translateX(-50%);    /* Centrage */
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;            /* Pas de retour à la ligne */
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    font-weight: normal;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

/* La petite flèche en bas de la bulle */
.tooltip:hover::before {
    content: "";
    position: absolute;
    bottom: 75%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

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

/* --- AUDIT LOGS (Messages Système) --- */
.msg-log {
    text-align: center;
    margin: 15px 0;
    color: #888;
    font-size: 0.85em;
    font-style: italic;
    position: relative;
    z-index: 1;
}
.msg-log:before {
    border-top: 1px solid #eee;
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 50%; left: 0; right: 0;
    bottom: 0;
    width: 95%;
    z-index: -1;
}
.msg-log span {
    background: #fff; /* Pour masquer la ligne derrière le texte */
    padding: 0 15px;
}
/* --- TICKET CONTROLS (Barre du technicien) --- */
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.ticket-title {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}
.ticket-controls-form {
    background: #f8f9fa;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: flex;
    align-items: flex-end; /* Aligne le bouton avec les champs */
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.control-group {
    display: flex;
    flex-direction: column;
}
.control-group label {
    font-size: 0.75em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 3px;
    font-weight: bold;
}
.control-group select {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 120px;
}
.btn-update {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 7px 15px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9em;
    height: 32px; /* Pour matcher la hauteur des inputs */
}
.btn-update:hover { background-color: #0056b3; }

/* --- ACCORDEON HISTORIQUE --- */
.toggle-btn {
    cursor: pointer;
    font-size: 1.2em;
    color: #007bff;
    background: none;
    border: none;
    transition: transform 0.2s;
}
.toggle-btn.active {
    transform: rotate(180deg); /* La flèche tourne quand c'est ouvert */
}
.history-row {
    background-color: #f8f9fa;
}
.history-container {
    padding: 10px 20px;
    border-left: 4px solid #007bff;
    margin: 5px 20px;
    background: white;
    border-radius: 0 4px 4px 0;
}
.history-item {
    font-size: 0.9em;
    padding: 4px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
}
.history-item:last-child { border-bottom: none; }
.history-date { font-weight: bold; color: #333; margin-right: 10px; }
.history-user { color: #007bff; font-weight: bold; margin-right: 5px; }

/* --- NON LU / NOUVEAU --- */
.row-unread {
    background-color: #fff8e1; /* Fond légèrement jaune */
    font-weight: bold;
}
.row-unread td {
    color: #000;
}
.dot-unread {
    height: 10px;
    width: 10px;
    background-color: #dc3545;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}