/* ==========================================================================
   Module : Votes & Badges
   ========================================================================== */

/* --- Dark Mode (défaut) --- */
/* Styles pour l'affichage des votes des sujets (liste) et effet de survol */
.msb-lol-thread-vote-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 45px; /* Ajustez selon la largeur désirée */
    text-align: center;
    color: var(--clr-text-primary);
    cursor: default; /* Indique que ce n'est pas cliquable en soi */
    position: relative; /* Contexte de positionnement pour .vote-score-details */
    height: auto; 
    min-height: 36px; /* Hauteur minimale pour un bon alignement */
    padding: 2px 0; 
}

.msb-lol-thread-vote-display .msb-lol-vote-count {
    font-size: var(--font-size-lg); /* ex: 16px */
    font-weight: bold;
    line-height: 1.2; 
    display: block; 
    position: relative; /* Contexte pour .vote-score-details */
    width: 100%; 
    min-height: calc(var(--font-size-lg) * 1.2); /* Hauteur minimale basée sur la taille et interligne */
}

/* Styles pour le score net et les détails des scores (positif/négatif) */
.msb-lol-thread-vote-display .vote-score-net,
.msb-lol-thread-vote-display .vote-score-details {
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 100%; 
    transition: opacity 0.2s ease-in-out, visibility 0s 0.2s; /* Transition pour opacité, visibilité instantanée après délai */
    backface-visibility: hidden; 
}

.msb-lol-thread-vote-display .vote-score-net {
    opacity: 1;
    visibility: visible;
    position: relative; /* Reste dans le flux normal par défaut */
    z-index: 2; 
}

.msb-lol-thread-vote-display .vote-score-details {
    opacity: 0;
    visibility: hidden; /* Caché par défaut */
    position: absolute; 
    top: 50%; /* Centre verticalement */
    left: 0; 
    transform: translateY(-50%); /* Ajustement fin pour le centrage vertical */
    pointer-events: none; /* Non interactif car superposé */
    font-size: 0.85em; /* Légèrement plus petit pour les détails */
    z-index: 1; 
    line-height: 1.1; /* Ajuster pour un bon rendu des chiffres et du séparateur */
}

/* Effet de survol */
.msb-lol-thread-vote-display:hover .vote-score-net {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s; /* Pas de délai pour cacher */
    z-index: 1; 
}

.msb-lol-thread-vote-display:hover .vote-score-details {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Affichage immédiat de la visibilité au survol */
    z-index: 2; 
    pointer-events: auto; /* Rendre interactif si jamais nécessaire, mais ici juste pour affichage */
}

.msb-lol-thread-vote-display .vote-score-details .vote-up-count {
    color: #4CAF50; /* Vert pour votes positifs */
    font-weight: bold;
}

.msb-lol-thread-vote-display .vote-score-details .vote-separator {
    color: var(--clr-text-secondary);
    margin: 0 3px; /* Espace autour du séparateur */
}

.msb-lol-thread-vote-display .vote-score-details .vote-down-count {
    color: #F44336; /* Rouge pour votes négatifs */
    font-weight: bold;
}

.msb-lol-thread-vote-display .msb-lol-vote-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--clr-text-secondary);
    line-height: 1; 
    margin-top: 2px; 
}

/* Styles pour les contrôles de vote cliquables (sujet unique et commentaires) */
.msb-lol-vote-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs); 
}

.msb-comment-vote { /* Pour les commentaires, en colonne */
    flex-direction: column;
    margin-right: var(--space-sm); 
}
.msb-lol-comment-vote-wrapper { /* Wrapper avatar + votes dans les commentaires */
    display: flex;
    align-items: flex-start; 
    gap: var(--space-sm);
    flex-shrink: 0; 
}

.msb-vote-btn {
    background: none;
    border: none;
    color: var(--clr-text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    font-size: 1.1em; 
    line-height: 1; 
}
.msb-vote-btn:hover {
    color: var(--clr-text-link);
}
.msb-vote-btn.active.msb-vote-up {
    color: #4CAF50; 
}
.msb-vote-btn.active.msb-vote-down {
    color: #F44336; 
}
.msb-vote-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.msb-vote-score { /* Score affiché entre les boutons cliquables */
    font-weight: bold;
    color: var(--clr-text-primary);
    padding: var(--space-xs) 0;
    min-width: 20px; 
    text-align: center;
    font-size: 0.95em; 
}

.msb-thread-vote { /* Pour le sujet principal, si contrôles cliquables en ligne */
    flex-direction: row; 
}
.msb-lol-thread-header .msb-thread-vote { /* Positionnement des votes cliquables pour le sujet */
    margin-right: var(--space-md); 
}

.msb-comment-vote-display { 
    margin-right: var(--space-sm); /* Conserve la marge qu'avaient les anciens boutons de vote */
    /* Vous pouvez ajouter ici d'autres ajustements spécifiques si nécessaire */
}

/* Styles pour les contrôles de vote cliquables (sujet unique et commentaires) */
.msb-lol-vote-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs); 
    position: relative; /* Contexte pour le positionnement absolu des détails */
}

/* Classe pour gérer le survol sur les conteneurs de vote */
.msb-vote-hover-container .msb-vote-score-wrapper {
    position: relative; /* Important pour positionner .vote-score-details */
    padding: var(--space-xs) 0; /* Un peu d'espace vertical si besoin */
    cursor: default;
    display: inline-block; /* Pour que le span prenne la largeur de son contenu */
    min-width: 20px; /* Pour que le score net soit visible */
    text-align: center;
}

.msb-vote-hover-container .msb-vote-score { /* C'est le .vote-score-net */
    font-weight: bold;
    color: var(--clr-text-primary);
    font-size: 0.95em; 
    display: inline-block; /* Reste inline-block */
    transition: opacity 0.2s ease-in-out;
    line-height: 1.2; /* Assurer une hauteur de ligne suffisante */
}

.msb-vote-hover-container .vote-score-details {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrer par rapport au parent .msb-vote-score-wrapper */
    width: auto; /* Ajuster à la largeur du contenu */
    min-width: 100%; /* Assurer qu'il couvre au moins la largeur du score net */
    padding: 0 2px; /* Petit padding horizontal */
    background-color: var(--clr-bg-element); /* Fond pour lisibilité si chevauchement */
    border-radius: var(--border-radius);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-size: 0.85em; /* Plus petit pour les détails */
    line-height: 1.1;
    z-index: 10; /* Au-dessus du score net lors du survol */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    white-space: nowrap; /* Empêcher le retour à la ligne des détails */
}

.msb-vote-hover-container:hover .msb-vote-score.vote-score-net {
    opacity: 0;
}

.msb-vote-hover-container:hover .vote-score-details {
    opacity: 1;
    visibility: visible;
}

.msb-vote-hover-container .vote-score-details .vote-up-count {
    color: #4CAF50; 
    font-weight: bold;
}

.msb-vote-hover-container .vote-score-details .vote-separator {
    color: var(--clr-text-secondary);
    margin: 0 3px; 
}

.msb-vote-hover-container .vote-score-details .vote-down-count {
    color: #F44336; 
    font-weight: bold;
}


/* Ajustements spécifiques pour les votes des commentaires si nécessaire */
.msb-comment-vote { /* Classe existante pour la disposition en colonne */
    flex-direction: column;
    /* margin-right: var(--space-sm);  Déjà géré par .msb-lol-comment-vote-wrapper ? Ou à remettre ici si .msb-lol-vote-controls est direct enfant */
}

/* Si .msb-comment-vote est le conteneur direct (.msb-lol-vote-controls.msb-comment-vote) */
.msb-lol-vote-controls.msb-comment-vote {
     margin-right: var(--space-sm);
}

/* Le msb-lol-vote-label (ex: "VOTE") qui était sous .msb-lol-thread-vote-display 
   n'est plus dans cette structure. Si vous voulez un libellé "vote" sous le score net,
   il faudrait l'ajouter dans la structure HTML et le styler.
   L'image que vous avez montrée semble avoir ce "VOTE" sous les chiffres.
   Cependant, la structure .msb-lol-vote-controls ne l'avait pas.
   La structure .msb-lol-thread-vote-display (celle de la liste des sujets) l'a.
*/

/* Pour éviter le chevauchement avec un libellé "VOTE" si vous l'ajoutez : */
.msb-lol-vote-controls .msb-vote-label { /* Si vous ajoutez un span.msb-vote-label */
    font-size: 10px;
    text-transform: uppercase;
    color: var(--clr-text-secondary);
    line-height: 1;
    margin-top: 2px; /* Espace entre le score et le libellé */
    display: block; /* Pour qu'il soit sous le score */
    text-align: center;
}

/* Styles pour les boutons eux-mêmes (probablement déjà existants et corrects) */
.msb-vote-btn {
    background: none;
    border: none;
    color: var(--clr-text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    font-size: 1.1em; 
    line-height: 1; 
}
.msb-vote-btn:hover {
    color: var(--clr-text-link);
}
.msb-vote-btn.active.msb-vote-up {
    color: #4CAF50; 
}
.msb-vote-btn.active.msb-vote-down {
    color: #F44336; 
}
.msb-vote-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- MODIFICATION PRINCIPALE ICI --- */
/* Assure que les votes du sujet principal ET des commentaires soient en colonne */
.msb-lol-vote-controls.msb-thread-vote,
.msb-lol-vote-controls.msb-comment-vote {
    flex-direction: column;
}

/* Couleurs pour les scores de vote nets */
.msb-score-positive {
    color: #4CAF50 !important; /* Vert - Utilisez !important si nécessaire pour surcharger d'autres styles */
}

.msb-score-negative {
    color: #F44336 !important; /* Rouge - Utilisez !important si nécessaire pour surcharger d'autres styles */
}

/* --- Light Mode --- */
/* Votes et Signalements en Light Mode */
html.light-mode .msb-lol-vote-btn {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-vote-btn:hover {
    color: var(--clr-text-link); /* Doré */
}
html.light-mode .msb-vote-score { /* Score net affiché */
    color: var(--color-text);
}
/* Les classes .msb-score-positive et .msb-score-negative pour le score net
   sont déjà définies avec des couleurs vertes/rouges qui devraient convenir.
   Si vous voulez des tons plus doux pour le light mode : */
html.light-mode .msb-score-positive {
    color: #4CAF50 !important; /* Vert standard, ou un vert plus pastel */
}
html.light-mode .msb-score-negative {
    color: #F44336 !important; /* Rouge standard, ou un rouge plus pastel */
}