/* Ajouts à guild.css ou dans manage_guild_members.css */

/* ============================================= */
/* Page de Gestion des Membres de Guilde        */
/* ============================================= */
.manage-guild-members-page-container {
	
    max-width: 1800px; /* Cohérent avec les autres pages de guilde */
    /* margin: 20px auto;*/
    /* padding: 20px; */
}

.manage-guild-members-page-container h1 {
    text-align: center;
    color: #4CAF50;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}

/* Section de la liste des membres */
.guild-members-list-section {
    background-color: #2e2e2e;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px; /* Espace après le lien de retour et le titre H1 */
}

.guild-members-list-section h3 {
    margin-top: 0;
    color: #e0e0e0;
    border-bottom: 1px solid #4a4a4a;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

/* Tableau des membres */
.guild-members-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px; /* Espace avant la pagination */
}

.guild-members-table th{
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #444;
    vertical-align: middle; /* Pour bien aligner les boutons et le texte */
}

.guild-members-table td {
    text-align: left;
    border-bottom: 1px solid #444;
    vertical-align: middle; /* Pour bien aligner les boutons et le texte */
}

.guild-members-table thead th {
    background-color: #383838;
    color: #4CAF50;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    white-space: nowrap; /* Empêcher le passage à la ligne des titres de colonnes */
}

.guild-members-table tbody tr:hover {
    background-color: #373737;
}

/* Styles spécifiques pour certaines colonnes/cellules */
.guild-members-table .leader-tag,
.guild-members-table .submaster-tag {
    font-size: 0.8em;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
    font-weight: normal;
}
.leader-tag { background-color: gold; color: #333; }
.submaster-tag { background-color: silver; color: #333; }

.member-message-cell {
    max-width: 250px; /* Limiter la largeur pour les longs messages */
    white-space: pre-wrap; /* Conserver les retours à la ligne */
    word-wrap: break-word;
    font-size: 0.9em;
    color: #bbb;
}
.member-message-cell img.game-emoticon { /* Ajuster la taille des emots dans les messages */
    height: 1.1em; 
}


.member-actions-cell {
    text-align: right; /* Aligner les boutons à droite */
    white-space: nowrap; /* Empêcher les boutons de passer à la ligne */
}

/* Styles pour les boutons d'action dans le tableau */
.guild-action-button.small { /* Réutiliser la classe guild-action-button si elle existe déjà */
    padding: 5px 8px;
    font-size: 0.85em;
    margin-left: 5px;
    background-color: #4a4a4a; /* Couleur de base pour les actions */
    border: 1px solid #555;
}
.guild-action-button.small:hover {
    background-color: #5a5a5a;
}
.guild-action-button.small .material-symbols-outlined {
    font-size: 1.2em; /* Ajuster la taille de l'icône dans le bouton */
    vertical-align: middle;
    margin-right: 0; /* Si seulement icône */
}
/* Si vous voulez du texte à côté de l'icône dans ces petits boutons : */
/* .guild-action-button.small span + .material-symbols-outlined { margin-left: 3px; } */
/* .guild-action-button.small .material-symbols-outlined + span { margin-left: 3px; } */


/* Styles pour le message "C'est vous" */
.member-actions-cell .its-you-label { /* Si vous ajoutez une classe autour du _t('ITS_YOU_LABEL') */
    font-style: italic;
    color: #888;
}


/* Pagination (Si vous utilisez les mêmes classes que pour guild_list_page.php, ces styles s'appliqueront) */
/* .pagination-nav { ... } */
/* .pagination { ... } */
/* etc. */

/* Message si aucun membre */
.guild-members-list-section > p { /* Cible le <p> direct enfant si la table n'est pas affichée */
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #888;
}

/* Lien de retour au Hub (copié de la proposition précédente) */
.page-header-actions {
    margin-bottom: 20px;
    text-align: left; 
}
.back-to-hub-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    background-color: #4a4a4a;
    color: #ccc;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.95em;
    transition: background-color 0.2s;
}
.back-to-hub-link:hover {
    background-color: #5a5a5a;
    color: #fff;
}
.back-to-hub-link .material-symbols-outlined {
    margin-right: 8px;
    font-size: 1.2em;
}

.member-role-display .role-icon {
    font-size: 1.8em;
    vertical-align: middle;
}
.member-role-display .master-icon { color: gold; }
.member-role-display .officer-icon { color: silver; }
.member-role-display .member-icon { color: #cd7f32; /* Bronze-ish */ }

.member-message-cell div { /* Si le message est dans un div */
    max-width: 200px; /* Ajustez */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help; /* Pour indiquer qu'il y a plus à voir (si title est utilisé) */
}
.member-message-cell div {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Nombre de lignes à afficher */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2em; /* Ajuster en fonction de line-height * nombre de lignes (ex: 2 * 1.6em) */
    line-height: 1.6em; /* Doit être défini */
    cursor: help; /* Pour le title */
}
.member-message-cell div {
    max-height: 60px; /* Hauteur max pour le message */
    overflow-y: auto; /* Ajoute une scrollbar si besoin */
    padding-right: 5px; /* Espace pour la scrollbar */
}

.manage-members-header-actions {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444; /* Optionnel : séparateur visuel */
    text-align: right; /* Ou left, ou flex pour plus de contrôle */
}
.manage-members-header-actions .papel-pass-button { /* Ou une classe dédiée */
    margin-left: 10px; /* Espace entre les boutons si plusieurs */
}
.manage-members-header-actions .papel-pass-button .material-symbols-outlined {
    margin-right: 5px; /* Espace entre icône et texte */
    vertical-align: text-bottom; /* Meilleur alignement vertical */
}

/* Dans manage_guild_members.php, la cellule des actions */
.member-actions-cell .guild-action-button.small {
    padding: 5px 8px; /* Un peu plus de padding pour agrandir le bouton */
    margin: 0 3px; /* Espace entre les boutons */
}

.member-actions-cell .guild-action-button.small .material-symbols-outlined {
    font-size: 2.0em;  /* AUGMENTER LA TAILLE DE L'ICÔNE */
    vertical-align: middle; /* Meilleur alignement vertical */
    /* Pas de margin-right si l'icône est seule */
}

/* Couleurs spécifiques par action */
.member-actions-cell .change-role-btn .material-symbols-outlined {
    color: #2196F3; /* Bleu pour gérer les comptes/rôles */
}
.member-actions-cell .kick-member-btn .material-symbols-outlined {
    color: #f44336; /* Rouge pour kicker */
}
.member-actions-cell .promote-master-btn .material-symbols-outlined {
    color: #FFC107; /* Or/Jaune pour promouvoir Maître */
}

/* Effet de survol pour les boutons d'action dans le tableau */
.member-actions-cell .guild-action-button.small:hover .material-symbols-outlined {
    opacity: 0.8;
}


/* Styles pour la transformation en cartes */
@media screen and (max-width: 1023px) { /* Modifié de 768px à 1023px */
    .styled-table thead { /* Ou .guild-members-table thead, .guild-list-table thead */
        display: none;
    }
    .styled-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #444;
        border-radius: 6px;
        padding: 10px; /* Ajouter un peu de padding interne aux "cartes" */
        background-color: #2e2e2e; /* Fond pour chaque carte */
    }
    .styled-table td {
        display: block;
        text-align: right;
        padding-left: 50%; 
        position: relative;
        border-bottom: 1px dotted #383838;
        padding-top: 5px;  /* Exemple: réduit de 8px à 5px */
        padding-bottom: 5px; /* Exemple: réduit de 8px à 5px */
    }
    .styled-table td:last-child {
        border-bottom: none;
        padding-bottom: 5px; /* Garder un peu plus d'espace pour le dernier item de la carte */
    }
    .styled-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%; /* Ajuster si besoin */
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #888;
    }
    /* Ajustements spécifiques pour certaines cellules en mode carte */
    .member-actions-cell, .application-actions-cell {
        text-align: center; /* Centrer les boutons d'action */
        padding-left: 0; /* Enlever le padding pour le label */
    }
    .member-actions-cell::before, .application-actions-cell::before {
        display: none; /* Pas besoin du label "Actions" en mode carte */
    }
    .guild-emblem-cell {
        text-align: center; /* Centrer l'emblème */
        padding-left: 0;
    }
    .guild-emblem-cell::before {
        display: none;
    }
	
	
}

/* Exemple de base pour la transformation en cartes (à affiner) */
@media screen and (max-width: 768px) { /* Ou votre breakpoint mobile */
    .styled-table thead {
        display: none; /* Cacher les en-têtes de tableau */
    }
    .styled-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #444;
        border-radius: 6px;
    }
    .styled-table td {
        display: block;
        text-align: right; /* Aligner la valeur à droite */
        padding-left: 50%; /* Espace pour le label */
        position: relative;
        border-bottom: 1px dotted #333;
    }
    .styled-table td:last-child {
        border-bottom: none;
    }
    .styled-table td::before {
        content: attr(data-label); /* Récupère le contenu de data-label */
        position: absolute;
        left: 10px;
        width: 45%; /* Largeur du label */
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #888; /* Couleur du label */
    }
    .member-actions-cell { /* Pour que les boutons s'alignent mieux en mode carte */
        text-align: center;
        padding-left: 0;
    }
     .member-actions-cell::before {
        display: none; /* Pas besoin de label pour la colonne actions en mode carte */
     }
}

/* Style de base pour la section de la checkbox */
.promote-master-toggle-section {
    background-color: #4e4323; /* Fond d'avertissement (ambre foncé) */
    border: 1px solid #c19300; /* Bordure ambre */
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.promote-master-toggle-section label.checkbox-label {
    color: #f0ad4e; /* Texte ambre */
    font-weight: bold;
    margin-left: 5px;
}
.promote-master-toggle-section small {
    color: #d4b777; /* Texte d'avertissement plus clair */
    font-size: 0.9em;
}

.promote-master-btn.hidden-by-toggle { /* Classe à ajouter/retirer par JS au lieu du style inline */
    display: none !important; 
}
/* NOUVELLE CLASSE et ANIMATION pour l'effet lorsque la checkbox est active */
.promote-master-toggle-section.warning-active {
    animation: pulseOrangeShadow 1.5s infinite;
}

@keyframes pulseOrangeShadow {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 173, 78, 0.5); /* #f0ad4e avec opacité */
    }
    50% {
        box-shadow: 0 0 10px 5px rgba(240, 173, 78, 0.8); /* Ombre plus intense */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(240, 173, 78, 0.5);
    }
}