/* 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;
}






/* 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;
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 5px;
    
    /* MODIFICATIONS CLÉS POUR LE CENTRAGE (POINT 1) */
    width: 100%;
    max-width: 1000px; /* Largeur maximale pour le centrage */
    margin: 10px auto; /* Centre le bloc horizontalement */

    box-sizing: border-box;
    overflow-x: auto; /* Permet le défilement horizontal sur les petits écrans */
}

/* Nous allons aussi vérifier le style du tableau lui-même */
.vcm-classement-table {
    width: 100%; /* S'assure que le tableau remplit son conteneur */
    min-width: 700px; /* Ajout d'une largeur minimale pour les colonnes ne deviennent pas illisibles */
    border-collapse: collapse;
    margin-bottom: 0; /* Suppression de la marge inférieure */
}

/* 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 (déjà correct) */
    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 auto; /* Centrage maintenu avec moins de marge verticale */
    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: auto; /* Maintient le centrage */
    margin-right: auto; /* Maintient le centrage */
    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;

    /* Ajout pour centrer les filtres si la largeur n'est pas 100% */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.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;
}

/* ===================================================================== */
/* NOUVEAU CENTRAGE POUR LES RÉSULTATS DU DERNIER WEEK-END */
/* ===================================================================== */

/* (POINT 2) Centrage de la DIV parente */
.vcm-last-weekend-results {
    /* Définir une largeur maximale pour que le centrage soit visible */
    max-width: 900px;
    
    /* Utiliser 'auto' pour les marges gauche et droite pour centrer le bloc */
    margin: 30px auto;
    
    /* Styles esthétiques */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* (POINT 3) Centrage du TABLEAU à l'intérieur de la DIV parente */
.vcm-last-weekend-results .vcm-results-table {
    width: 90%; /* Une largeur plus petite pour visualiser le centrage */
    display: table; /* Force le comportement de bloc nécessaire au centrage */
    margin-left: auto; /* Centre le tableau */
    margin-right: auto; /* Centre le tableau */
    border-collapse: collapse;
}

/* Conteneur principal pour les deux colonnes */
.vcm-last-weekend-results .vcm-split-container {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne sur mobile */
    gap: 20px; /* Espace entre les deux tableaux */
}

/* Chaque colonne du tableau */
.vcm-last-weekend-results .vcm-split-container .vcm-results-column {
    flex: 1 1 45%; /* Prend presque la moitié de l'espace, permet un petit gap */
    min-width: 300px; /* Assure que le tableau reste lisible sur des petits écrans */
}

/* Règle pour s'assurer que sur mobile (ou petit écran) les colonnes s'empilent */
@media (max-width: 768px) {
    .vcm-last-weekend-results .vcm-split-container .vcm-results-column {
        flex: 1 1 100%; /* Prend toute la largeur, les tableaux sont l'un au-dessus de l'autre */
        min-width: initial;
    }
}

/* Ajustement pour que le tableau remplisse la colonne */
.vcm-last-weekend-results .vcm-results-table {
    width: 100%;
    /* Assurez-vous que le reste de votre style de tableau est appliqué ici */
}