/* assets/style.css */

/* Styles génériques pour tous les tableaux (moins spécifiques) */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: sans-serif;
    border: none;
}

table thead {
    background-color: #f0f0f0;
}

table th, table td {
    padding: 10px;
    border: 1px solid #ccc; /* Bordure des cellules */
    text-align: center;
}

/* Styles pour les lignes de résultat (victoire/défaite) */
.vcm-win {
    background-color: #dff0d8;
}

.vcm-loss {
    background-color: #f2dede;
}

table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

table tbody tr:hover {
    background-color: #f5f5f5;
}

/* ----------------------------------------------------------- */
/* NOUVEAUX STYLES POUR LE CLASSEMENT VCM */
/* ----------------------------------------------------------- */

.vcm-classement-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.vcm-classement-table th,
.vcm-classement-table td {
    border: 1px solid #ddd;
    padding: 8px; /* Ajusté légèrement pour le classement */
    text-align: center; /* Centré le texte par défaut pour les cellules du classement */
}

/* Exception pour le nom de l'équipe qui est aligné à gauche */
.vcm-classement-table td:nth-child(2) {
    text-align: left;
}

.vcm-classement-table th {
    background-color: #f2f2f2;
    cursor: pointer; /* Indique que l'en-tête est cliquable */
    position: relative;
    padding-right: 20px; /* Espace pour l'icône de tri */
}

/* Style pour l'icône de tri (petite flèche) */
.vcm-classement-table th.sortable::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
}

.vcm-classement-table th.sortable.asc::after {
    border-bottom-color: #333; /* Flèche vers le haut */
}

.vcm-classement-table th.sortable.desc::after {
    border-top-color: #333; /* Flèche vers le bas */
}

/* Mise en évidence des équipes du club */
.vcm-classement-table .vcm-club-team {
    background-color: #5bfff6 !important; /* Utilisez !important si nécessaire pour outrepasser d'autres styles */
    font-weight: bold;
}

/* Styles pour les rangs (la première colonne) */
.vcm-classement-table tbody tr td:first-child {
    text-align: center; /* Assurez-vous que le rang est centré */
}

/* ----------------------------------------------------------- */
/* FIN DES NOUVEAUX STYLES POUR LE CLASSEMENT VCM */
/* ----------------------------------------------------------- */


/* Styles spécifiques pour les conteneurs des shortcodes du plugin */
.vcm-calendar-container,
.vcm-team-stats-container,
.vcm-matches-container,
.vcm-classement-container {
    background-color: #ffffff; /* Réactivé le fond blanc */
    border: 1px solid #e0e0e0; /* Réactivé les bordures */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 5px;
    overflow-x: auto; /* Permet le défilement horizontal si le contenu dépasse */

    /* Centrage horizontal du bloc avec largeur maximale */
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px; /* Augmenté la largeur maximale pour les grands écrans */
    box-sizing: border-box; /* S'assure que padding ne s'ajoute pas à la largeur */
}

/* Styles pour les titres des shortcodes */
.vcm-calendar-title,
.vcm-team-stats-title,
.vcm-matches-title,
.vcm-classement-title {
    color: #333;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Styles pour les en-têtes de tableau (ciblant les classes spécifiques pour une plus grande spécificité) */
/* Remarquez que les styles de th pour .vcm-classement-table sont plus spécifiques et prendront le dessus sur ces règles */
.vcm-calendar-table thead th,
.vcm-stats-table thead th,
.vcm-recent-matches-table thead th,
.vcm-matches-table thead th,
.vcm-classement-table thead th { /* Cette règle sera souvent écrasée par la plus spécifique ci-dessus pour .vcm-classement-table th */
    background-color: #336699;
    color: #FFF;
    font-weight: bold;
}

/* Styles pour les cellules de tableau (ciblant les classes spécifiques) */
.vcm-calendar-table td,
.vcm-stats-table td,
.vcm-recent-matches-table td,
.vcm-matches-table td,
.vcm-classement-table td {
    color: #333333;
}

/* Styles pour les boutons de navigation */
.vcm-calendar-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.vcm-nav-button {
    background-color: #5cb85c;
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: 5px;
}

.vcm-nav-button:hover {
    background-color: #4cae4c;
}

/* Styles pour les tableaux spécifiques du plugin (généraux) */
.vcm-calendar-table,
.vcm-stats-table,
.vcm-recent-matches-table,
.vcm-matches-table,
.vcm-classement-table {
    margin-top: 15px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
}

.vcm-upcoming-match {
    background-color: #f9f9f9;
}


.vcm-no-matches {
    text-align: center;
    font-style: italic;
    color: #777;
    padding: 20px;
    border: 1px dashed #ddd;
    background-color: #fdfdfd;
}

/* --- Conteneur global de la compétition --- */
.vcm-cup-competition-container {
    font-family: Arial, sans-serif;
    max-width: 1200px; /* Largeur maximale de l'arbre */
    margin: 20px auto; /* Centrer le conteneur */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.vcm-cup-competition-title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 2em;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* --- Conteneur des tours (pour empiler les tours verticalement) --- */
.vcm-competition-rounds {
    display: flex;
    flex-direction: column; /* Les tours s'affichent les uns au-dessus des autres */
    align-items: stretch; /* Les tours s'étirent sur toute la largeur disponible */
    gap: 20px; /* Espace entre chaque tour empilé */
}

/* --- Style de chaque tour (bloc vertical) --- */
.vcm-competition-round {
    width: 100%; /* Chaque tour prend toute la largeur du conteneur parent */
    min-width: unset; /* Supprime la largeur minimale définie précédemment */
    padding: 15px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.vcm-competition-round h4 {
    text-align: center;
    color: #555;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    padding-bottom: 5px;
    border-bottom: 1px dashed #eee;
}

/* --- Conteneur des matchs dans un tour --- */
.vcm-round-matches {
    display: flex;
    flex-direction: column; /* Les matchs s'empilent verticalement dans leur tour */
    gap: 15px; /* Espace entre les matchs */
}

/* --- Style de chaque match --- */
.vcm-bracket-match {
    background-color: #fdfdfd;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column; /* Équipe domicile, équipe extérieur, puis détails */
    font-size: 0.9em;
    position: relative;
}

/* Indicateur de match joué ou à venir */
.vcm-match-played {
    border-color: #4CAF50; /* Vert pour les matchs joués */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.vcm-match-upcoming {
    border-color: #FFC107; /* Jaune/Orange pour les matchs à venir */
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
}

/* Notes sur le type de match (poule/élimination) */
.vcm-match-type-note {
    font-size: 0.8em;
    color: #777;
    text-align: center;
    margin-bottom: 10px;
    background-color: #eef;
    padding: 5px;
    border-radius: 3px;
}

/* --- Style des équipes dans un match --- */
.vcm-bracket-team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.vcm-bracket-team:last-of-type {
    border-bottom: none; /* Pas de bordure sous la dernière équipe */
}

.vcm-team-name {
    font-weight: bold;
    color: #333;
    flex-grow: 1; /* Prend l'espace restant */
}

.vcm-team-score {
    font-weight: bold;
    color: #000;
    min-width: 25px; /* Pour aligner les scores */
    text-align: right;
}

/* Style du vainqueur du match */
.vcm-bracket-winner .vcm-team-name,
.vcm-bracket-winner .vcm-team-score {
    color: #28a745; /* Vert pour le vainqueur */
    font-weight: bold;
}

/* Détails du match (date/heure) */
.vcm-bracket-details {
    text-align: center;
    font-size: 0.8em;
    color: #888;
    margin-top: 5px;
}

/* --- Styles pour les classements de tour (pour les tours de type 'poule') --- */
.vcm-round-ranking {
    margin-top: 15px; /* Espace au-dessus du tableau de classement */
    margin-bottom: 25px; /* Espace en dessous du tableau de classement */
    background-color: #f0f8ff; /* Couleur de fond légère pour le classement */
    border: 1px solid #d0e8ff;
    border-radius: 5px;
    padding: 15px;
}

.vcm-ranking-title {
    font-size: 1.1em;
    color: #444;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.vcm-ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.vcm-ranking-table th,
.vcm-ranking-table td {
    border: 1px solid #e0e0e0;
    padding: 8px 10px;
    text-align: left;
}

.vcm-ranking-table th {
    background-color: #e6f2ff; /* En-tête de tableau */
    color: #333;
    font-weight: bold;
}

.vcm-ranking-table tr:nth-child(even) {
    background-color: #f8f8f8; /* Zébrure des lignes */
}

/* --- Mise en surbrillance des équipes qualifiées dans le classement --- */
.vcm-qualifier {
    background-color: #d4edda !important; /* Vert pâle pour les qualifiés */
    font-weight: bold;
    color: #155724; /* Texte plus foncé pour le contraste */
    border-left: 4px solid #28a745; /* Bordure latérale verte pour les qualifiés */
}

/* --- Média Queries pour la Responsivité (simplifiées car l'affichage est déjà en colonne) --- */
@media (max-width: 768px) {
    .vcm-cup-competition-container {
        margin: 10px; /* Moins de marge sur petits écrans */
        padding: 10px;
    }

    .vcm-competition-round {
        padding: 10px;
    }

    .vcm-bracket-match {
        padding: 8px 10px;
        font-size: 0.85em;
    }

    .vcm-ranking-table {
        font-size: 0.85em;
    }
}

/* ===================================================================== */
/* MEDIA QUERIES pour le Responsive                                    */
/* ===================================================================== */

/* Pour les écrans plus petits (smartphones en mode portrait, max 768px) */
@media (max-width: 768px) {
    /* Conteneurs */
    .vcm-calendar-container,
    .vcm-team-stats-container,
    .vcm-matches-container,
    .vcm-classement-container,
    .vcm-cup-bracket-container {
        padding: 10px;
        margin-left: 10px;
        margin-right: 10px;
        max-width: none;
    }

    /* Titres */
    .vcm-calendar-title,
    .vcm-team-stats-title,
    .vcm-matches-title,
    .vcm-classement-title,
    .vcm-cup-bracket-title {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    /* Tableaux : Rendre les cellules plus compactes ou ajuster les colonnes */
    table th, table td {
        padding: 6px;
        font-size: 0.85em;
    }

    /* Boutons de navigation : s'assurer qu'ils s'empilent */
    .vcm-calendar-nav {
        flex-direction: column;
        align-items: center;
    }

    .vcm-nav-button {
        width: 80%;
        text-align: center;
        margin-bottom: 10px;
    }

    /* Arbre de coupe : Empiler les tours de l'arbre de coupe */
    .vcm-bracket-rounds {
        flex-direction: column;
        align-items: center;
    }

    .vcm-bracket-round {
        width: 90%;
        margin: 10px 0;
        min-width: unset;
    }

    .vcm-bracket-match {
        font-size: 0.9em;
    }
}

/* Pour les écrans encore plus petits (smartphones très petits, max 480px) */
@media (max-width: 480px) {
    /* Réduire encore la taille de police si nécessaire */
    .vcm-calendar-title,
    .vcm-team-stats-title,
    .vcm-matches-title,
    .vcm-classement-title,
    .vcm-cup-bracket-title {
        font-size: 1.3em;
    }

    table th, table td {
        padding: 4px;
        font-size: 0.8em;
    }
}

/* ===================================================================== */
/* IMPRESSION                                                          */
/* ===================================================================== */

@media print {
    /* Masquer les éléments non essentiels à l'impression */
    body {
        background-color: #fff;
        color: #000;
    }
    .vcm-calendar-nav,
    .vcm-cup-bracket-container,
    .some-other-element-to-hide {
        display: none !important;
    }

    /* Ajuster la taille de police pour l'impression */
    .vcm-classement-table,
    .vcm-matches-table {
        font-size: 10pt;
    }
    table th, table td {
        border: 1px solid #000;
    }
}

/* Exemple de CSS pour les filtres et la pagination */
.vcm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
}
.vcm-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vcm-filter-group label {
    font-weight: bold;
}
.vcm-filter-group select,
.vcm-filters input[type="submit"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}
.vcm-filters input[type="submit"] {
    cursor: pointer;
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}
.vcm-filters input[type="submit"]:hover {
    background-color: #005177;
}

/* Styles pour la pagination */
.vcm-pagination {
    margin-top: 25px;
    text-align: center;
}
.vcm-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex; /* ou flex pour un alignement horizontal */
    gap: 5px;
}
.vcm-pagination li {
    display: inline-block;
    margin: 0 2px;
}
.vcm-pagination a,
.vcm-pagination .current {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #0073aa;
}
.vcm-pagination a:hover {
    background-color: #f0f0f0;
}
.vcm-pagination .current {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
    font-weight: bold;
}
.vcm-no-matches {
    text-align: center;
    font-style: italic;
    color: #666;
    margin-top: 20px;
}

.vcm-matches-table .vcm-highlight-team {
    background-color: #e6f7ff; /* Couleur de fond légère pour surligner */
    font-weight: bold;         /* Texte en gras */
    /* Tu peux ajuster la couleur selon ton thème */
}


.vcm-matches-table td.vcm-highlight-team {
    border-left: 3px solid #0073aa;
}

.vcm-classement-table .vcm-highlight-selected-team {
    background-color: #ffe0b2; 
    font-weight: bold;         
}

.vcm-classement-table .vcm-highlight-selected-team td {
    border-left: 3px solid #ff9800;
}