/* public/css/support.css */

/* Header commun pour les sections du dashboard */
.dashboard-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #3a3a3a;
}
.dashboard-content-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

/* --- Style pour la Table des Tickets --- */
/* On réutilise le style de l'admin car il est parfait pour ça */
.admin-table-container {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    overflow: hidden;
}
.admin-table-container table {
    width: 100%;
    border-collapse: collapse;
    color: #ccc;
}
.admin-table-container th, 
.admin-table-container td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #3a3a3a;
}
.admin-table-container thead th {
    background-color: #1f1f1f;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
}
.admin-table-container tbody tr:last-child td {
    border-bottom: none;
}
.admin-table-container tbody tr:hover {
    background-color: #313131;
}
.admin-table-container .text-center {
    text-align: center;
}
.admin-table-container .actions-cell {
    text-align: right;
}

/* --- Style pour les Badges de Statut --- */
/* (Probablement déjà dans admin_layout.css, mais on s'assure qu'il est ici) */
.status-badge {
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-badge.status-open,
.status-badge.status-user_reply {
    background-color: #3498db; /* Bleu */
    color: #fff;
}
.status-badge.status-staff_reply {
    background-color: #f39c12; /* Orange */
    color: #fff;
}
.status-badge.status-closed {
    background-color: #555; /* Gris */
    color: #ccc;
}status-badge.status-closed { background-color: #555; color: #ccc; } /* Gris */


/* Conteneur principal de la vue ticket */
.ticket-view-container {
    /* (styles de base si nécessaire) */
}

/* Styles pour la vue détaillée du ticket */
.ticket-view-container .dashboard-content-header a {
    align-self: flex-start; /* Aligner le bouton "retour" en haut */
}

/* En-tête du ticket */
.ticket-header {
    background-color: #2a2a2a;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #3a3a3a;
}
.ticket-header h2 {
	font-size: 1.8rem;
    margin: 0 0 10px 0;
    color: #fff;
}
.ticket-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #b0b0b0;
}
.ticket-meta strong {
    color: #fff;
}

/* Zone de conversation */
.ticket-replies-container {
    max-height: 500px; /* Limite la hauteur et ajoute un scroll */
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
}
.ticket-replies-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.reply-item {
    display: flex;
    margin-bottom: 15px;
}
.reply-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #555;
    margin-right: 15px;
    flex-shrink: 0;
    /* On pourrait mettre une image ici plus tard */
}
.reply-content {
    background-color: #2a2a2a;
	border: 1px solid #3a3a3a;
    padding: 15px;
    border-radius: 12px;
    max-width: 80%;
}
.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.reply-author {
    font-weight: 600;
    color: #fff;
}
.reply-date {
    font-size: 0.75rem;
    color: #8899a6;
}
.reply-message {

	display: flex; /* Le conteneur devient flexible */
    justify-content: space-between; /* Pousse les éléments aux extrémités */
    align-items: flex-start; /* Aligne les éléments en haut */
    gap: 20px; /
}

.message-text {    
	color: #ccc;
    line-height: 1.6;
    white-space: pre-wrap; /* Respecte les sauts de ligne */
    flex-grow: 1; /* Permet au texte de prendre tout l'espace disponible */
}
/* Style distinct pour les messages du staff */
.reply-item.staff-reply .reply-content {
    background-color: #2a3b31; /* Un vert très sombre */
    border: 1px solid #2ECC71;
}
.reply-item.staff-reply .reply-author {
    color: #2ECC71;
}

/* Formulaire de réponse */
.ticket-reply-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #3a3a3a;
}

/* --- Style pour les Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
	font-size: 1em;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-primary {
    background-color: #2ECC71;
    color: #fff;
}
.btn-primary:hover {
    background-color: #27ae60;
}
.btn-secondary {
    background-color: #555;
    color: #fff;
}
.btn-secondary:hover {
    background-color: #666;
	text-decoration: none;
}
.btn-sm {
    padding: 5px 10px;
    font-size: 0.8rem;
}
.btn-outline {
    background-color: transparent;
    border: 1px solid #555;
    color: #ccc;
}
.btn-outline:hover {
    background-color: #555;
    color: #fff;
}

.btn-danger { /* Pour le bouton "Fermer le ticket" */
    background-color: #c0392b;
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background-color: #e74c3c;
}

/* === Style pour le champ d'upload dans les formulaires === */
.form-group input[type="file"] {
    display: none;
}

/* Le "faux bouton" stylisé */
.custom-file-upload-label {
    display: inline-block;
    padding: 8px 15px;
    cursor: pointer;
    background-color: #444;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
	vertical-align: middle; 
}
.custom-file-upload-label:hover {
    background-color: #555;
    color: #fff;
    border-color: #666;
}
.custom-file-upload-label .material-symbols-outlined {
    vertical-align: middle;
    margin-right: 8px;
    font-size: 18px;
}

/* Le texte d'aide qui se trouve JUSTE APRÈS notre faux bouton */
.custom-file-upload-label + small {
    display: inline-block; /* Affiche sur la même ligne */
    margin-left: 15px;
    font-size: 0.8rem;
    color: #8899a6;
    vertical-align: middle;
}

/* L'affichage du nom du fichier sélectionné */
.file-name-display {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.85rem;
    color: #b0b0b0;
    font-style: italic;
    vertical-align: middle;
}

/* Règle générale pour les textes d'aide, MAIS qui EXCLUT celui de l'upload */
.form-group small:not(.custom-file-upload-label + small) {
    display: block; /* S'applique aux autres <small> (ex: sous les textareas) */
    margin-top: 5px;
    font-size: 0.8rem;
    color: #8899a6;
}

/* === Style pour l'affichage des pièces jointes dans une réponse === */
.reply-attachments {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #444; /* Séparateur visuel */
}
.attachment-item {
    display: inline-flex; /* Pour aligner l'icône et le texte */
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    padding: 5px 10px;
    border-radius: 15px; /* Look "pilule" */
    text-decoration: none;
    color: #b0b0b0;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}
.attachment-item:hover {
    background-color: #3a3a3a;
    color: #fff;
    border-color: #555;
}
.attachment-item .material-symbols-outlined {
    font-size: 18px;
    margin-right: 8px;
}
/* Style pour la "bulle" de l'avatar */
.reply-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Rend le carré un cercle parfait */
    background-color: #6c757d; /* Couleur de fond par défaut (gris) */
    color: #ffffff; /* Couleur du texte (la lettre) */
    font-size: 20px;
    font-weight: bold;
    display: flex; /* Utilise Flexbox pour un centrage facile */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    flex-shrink: 0; /* Empêche l'avatar de rétrécir */
    margin-right: 15px;
	border: 1px dashed #DCEDC8;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

/* On peut même s'amuser à changer la couleur pour le staff */
.staff-reply .reply-avatar {
	border: 2px dashed #DCEDC8;
    background-color: #2ecc71; /* Un vert pour le staff */
}
/* Style de base pour une bulle de réponse */
.reply-item {
    display: flex;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 12px;
    background-color: rgba(227,242,253,0.5); /* Bleu pastel très clair pour l'utilisateur */
    border: 1px solid #BBDEFB;
}

/* Style spécifique pour une réponse du staff */
.reply-item.staff-reply {
    background-color: rgba(241,248,233,0.5); /* Vert pastel très clair pour le staff */
    border: 1px solid #DCEDC8;
}

/* Petit ajustement pour que le texte ne soit pas collé au bord */
.reply-content {
    flex-grow: 1;
}

.attachment-container {
    margin-top: 0; /* CORRECTION : On supprime la marge du haut qui n'est plus nécessaire */
    flex-shrink: 0; /* Empêche l'image de rétrécir si le texte est long */
}

/* Style pour la miniature de la pièce jointe */
.ticket-attachment-thumb {
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s;
}

.ticket-attachment-thumb:hover {
    transform: scale(1.05);
}

/* Styles pour la modal (vue agrandie) */
.attachment-modal-image {
    display: block;
    width: 100%; /* L'image prend toute la largeur du conteneur de message */
    max-width: 100%;
    height: auto;
    max-height: 70vh; /* Hauteur max pour ne pas être trop grande sur de grands écrans */
    object-fit: contain; /* Assure que l'image est entièrement visible, sans être déformée */
    margin: 10px 0;
}
/* === Style Personnalisé des Barres de Défilement === */

/* Pour les navigateurs basés sur Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px; /* Largeur de la barre */
}

::-webkit-scrollbar-track {
    background: #1f1f1f; /* Couleur de fond de la piste */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #4a4a4a; /* Couleur de la barre elle-même */
    border-radius: 5px;
    border: 2px solid #1f1f1f; /* Crée un petit espace autour de la barre */
}

::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a; /* Couleur au survol */
}

/* Pour Firefox */
/* Note : Firefox a moins d'options de personnalisation */
* {
    scrollbar-width: thin; /* 'auto', 'thin', ou 'none' */
    scrollbar-color: #4a4a4a #1f1f1f; /* Couleur de la barre et de la piste */
}

/* === Masquer les flèches sur les inputs de type "number" === */

/* Pour Chrome, Safari, Edge, Opera */
.form-group input[type=number]::-webkit-outer-spin-button,
.form-group input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Pour Firefox */
.form-group input[type=number] {
    -moz-appearance: textfield;
}