/* ========================================================================
   1. Variáveis, Reset Básico e Layout Principal
   ======================================================================== */
:root {
    --cfs-primary-text: #212529;
    --cfs-secondary-text: #6c757d;
    --cfs-border-color: #dee2e6;
    --cfs-header-bg: #f8f9fa;
    --cfs-row-hover-bg: #f1f3f5;
    --cfs-accent-color: #007bff;
    --cfs-live-color: #e63946;
    --cfs-finished-color: #2a9d8f;
    --cfs-scheduled-color: #0077b6;
    --cfs-postponed-color: #e9c46a;
}

/* Reset básico para garantir layout consistente */
* {
    box-sizing: border-box;
}

.cfs-plugin-wrapper { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
    margin: 0;
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.cfs-header { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; 
    gap: 1rem; 
    margin-bottom: 1.5rem; 
    padding-bottom: 1.5rem; 
    border-bottom: 2px solid var(--cfs-border-color); 
}

.cfs-league-selector-wrapper { 
    display: flex; 
    align-items: center; 
    flex: 1; 
    min-width: 0; /* Permite encolhimento */
}

.cfs-league-selector-wrapper label { 
    font-weight: 600; 
    margin-right: 10px; 
    white-space: nowrap; 
    flex-shrink: 0;
}

#cfs-league-selector { 
    padding: 8px 12px; 
    border-radius: 6px; 
    border: 1px solid var(--cfs-border-color); 
    font-size: 1rem; 
    background-color: #fff; 
    width: 100%;
    min-width: 200px;
}

.cfs-tabs-nav { 
    display: flex; 
    gap: 5px; 
    background-color: var(--cfs-header-bg); 
    padding: 5px; 
    border-radius: 8px; 
    flex-shrink: 0;
}

.cfs-main-tab { 
    padding: 10px 16px; 
    border: none; 
    background-color: transparent; 
    cursor: pointer; 
    font-weight: 500; 
    color: var(--cfs-secondary-text); 
    border-radius: 6px; 
    transition: all 0.2s ease-in-out; 
    white-space: nowrap;
}

.cfs-main-tab.active { 
    background-color: #fff; 
    color: var(--cfs-accent-color); 
    font-weight: 600; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}

.cfs-tab-content { 
    display: none; 
}

.cfs-tab-content.active { 
    display: block; 
}

.cfs-filter-nav { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 1.5rem; 
    flex-wrap: wrap; 
}

.cfs-filter-button { 
    background-color: #fff; 
    border: 1px solid var(--cfs-border-color); 
    color: var(--cfs-secondary-text); 
    padding: 8px 16px; 
    border-radius: 20px; 
    cursor: pointer; 
    font-weight: 500; 
    font-size: 0.9rem; 
    transition: all 0.2s ease-in-out; 
}

.cfs-filter-button.active { 
    background-color: var(--cfs-accent-color); 
    color: #fff; 
    border-color: var(--cfs-accent-color); 
}

.cfs-loader { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 200px; 
    font-size: 1.1rem; 
    color: var(--cfs-secondary-text); 
}

.cfs-loader::after { 
    content: ''; 
    width: 25px; 
    height: 25px; 
    border: 3px solid var(--cfs-border-color); 
    border-top-color: var(--cfs-accent-color); 
    border-radius: 50%; 
    animation: cfs-spin 1s linear infinite; 
    margin-left: 15px; 
}

@keyframes cfs-spin { 
    to { transform: rotate(360deg); } 
}

.cfs-status { 
    padding: 4px 10px; 
    border-radius: 12px; 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: #fff; 
    text-transform: uppercase; 
    white-space: nowrap; 
    display: inline-block;
}

.cfs-status-finished { 
    background-color: var(--cfs-finished-color); 
}

.cfs-status-scheduled, .cfs-status-timed { 
    background-color: var(--cfs-scheduled-color); 
}

.cfs-status-postponed { 
    background-color: var(--cfs-postponed-color); 
    color: var(--cfs-primary-text); 
}

.cfs-status-live, .cfs-status-in_play { 
    background-color: var(--cfs-live-color); 
    animation: pulse 1.5s infinite; 
}

@keyframes pulse { 
    0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7); } 
    70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); } 
}

/* ========================================================================
   2. Estilos de Tabelas (Classificação e Base de Jogos)
   ======================================================================== */
.cfs-table-container { 
    border: 1px solid var(--cfs-border-color); 
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    background-color: #fff; 
    overflow: hidden;
    width: 100%;
}

.cfs-standings-table { 
    width: 100%; 
    border-collapse: collapse; 
}

.cfs-standings-table thead th { 
    background-color: var(--cfs-header-bg); 
    padding: 12px 8px; 
    text-align: center; 
    font-weight: 600; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    border-bottom: 2px solid var(--cfs-border-color); 
}

.cfs-standings-table tbody td { 
    padding: 12px 8px; 
    vertical-align: middle; 
    border-bottom: 1px solid var(--cfs-border-color); 
    text-align: center; 
    font-size: 0.9rem;
}

.cfs-standings-table .td-team { 
    text-align: left; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-weight: 600; 
    min-width: 0;
}

.cfs-standings-table .td-team .team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfs-standings-table .crest-small { 
    width: 20px; 
    height: 20px; 
    object-fit: contain; 
    flex-shrink: 0;
}

.cfs-standings-table .td-points { 
    font-weight: 700; 
}

.cfs-standings-table thead.group-header th { 
    background-color: var(--cfs-accent-color); 
    color: #fff; 
}

/* ========================================================================
   3. LAYOUT DUPLO: DESKTOP (TABELA) vs. MOBILE (CARTÕES)
   ======================================================================== */

/* --- Layout de Tabela para DESKTOP (Padrão) --- */
.cfs-mobile-card { 
    display: none; 
}

.cfs-games-table { 
    width: 100%; 
    border-collapse: collapse; 
}

.cfs-games-table thead { 
    display: table-header-group; 
}

.cfs-games-table .cfs-desktop-row { 
    display: table-row; 
}

.cfs-games-table .cfs-desktop-row:hover {
    background-color: var(--cfs-row-hover-bg);
}

.cfs-games-table .cfs-desktop-row td { 
    padding: 16px 12px; 
    text-align: center; 
    vertical-align: middle; 
    border-bottom: 1px solid var(--cfs-border-color); 
}

.cfs-games-table .cfs-match-item:last-child .cfs-desktop-row td { 
    border-bottom: none; 
}

.cfs-games-table .cfs-team-cell .cfs-team-cell-content { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.cfs-games-table .home-team .cfs-team-cell-content { 
    justify-content: flex-start; 
}

.cfs-games-table .away-team .cfs-team-cell-content { 
    justify-content: flex-end; 
    flex-direction: row-reverse; 
}

.cfs-games-table .cfs-team-crest { 
    width: 24px; 
    height: 24px; 
    object-fit: contain; 
    flex-shrink: 0;
}

.cfs-games-table .cfs-score-cell { 
    font-size: 1.2rem; 
    font-weight: 700; 
}

/* ========================================================================
   4. RESPONSIVIDADE MOBILE
   ======================================================================== */

/* Tablet */
@media screen and (max-width: 1024px) {
    .cfs-plugin-wrapper {
        padding: 0.75rem;
    }
    
    .cfs-standings-table thead th {
        padding: 10px 6px;
        font-size: 0.7rem;
    }
    
    .cfs-standings-table tbody td {
        padding: 10px 6px;
        font-size: 0.85rem;
    }
    
    .cfs-standings-table .crest-small {
        width: 18px;
        height: 18px;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .cfs-plugin-wrapper {
        padding: 0.5rem;
        margin: 0;
    }

    .cfs-header { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 1rem;
    }
    
    .cfs-league-selector-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cfs-league-selector-wrapper label {
        margin-right: 0;
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    #cfs-league-selector { 
        min-width: 0;
    }
    
    .cfs-tabs-nav { 
        justify-content: center; 
        flex-wrap: wrap;
    }
    
    .cfs-main-tab { 
        flex: 1; 
        text-align: center; 
        min-width: 80px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .cfs-filter-nav {
        justify-content: center;
    }

    /* Esconde a estrutura da tabela no mobile */
    .cfs-table-container { 
        border: none; 
        box-shadow: none; 
        background: transparent; 
    }
    
    .cfs-games-table, 
    .cfs-games-table tbody, 
    .cfs-games-table thead, 
    .cfs-games-table .cfs-desktop-row {
        display: none;
    }
    
    /* Mostra os itens de jogo como blocos */
    .cfs-match-item {
        display: block;
    }
    
    /* Mostra e estiliza os cartões no mobile */
    .cfs-mobile-card {
        display: block;
        border: 1px solid var(--cfs-border-color);
        border-radius: 8px;
        margin-bottom: 1rem;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .cfs-card-matchup {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        gap: 8px;
    }
    
    .cfs-card-team {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }
    
    .cfs-card-team.away {
        flex-direction: row-reverse;
        text-align: right;
    }
    
    .cfs-card-team .cfs-team-crest {
        width: 24px;
        height: 24px;
        object-fit: contain;
        flex-shrink: 0;
    }
    
    .cfs-card-team .cfs-team-name {
        font-weight: 600;
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .cfs-card-score {
        font-size: 1.4rem;
        font-weight: 700;
        text-align: center;
        flex-shrink: 0;
        padding: 0 8px;
        min-width: 50px;
    }
    
    .cfs-card-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--cfs-header-bg);
        padding: 8px 12px;
        font-size: 0.8rem;
        border-top: 1px solid var(--cfs-border-color);
    }
    
    .cfs-card-date {
        color: var(--cfs-secondary-text);
    }

    /* Responsividade da tabela de classificação */
    .cfs-standings-table { 
        display: block;
        width: 100%;
    }
    
    .cfs-standings-table thead { 
        display: none; 
    }
    
    .cfs-standings-table tbody {
        display: block;
        width: 100%;
    }
    
    .cfs-standings-table tr { 
        display: block; 
        border: 1px solid var(--cfs-border-color); 
        border-radius: 8px; 
        margin-bottom: 1rem; 
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .cfs-standings-table td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 12px 16px; 
        border-bottom: 1px solid var(--cfs-header-bg); 
        text-align: left;
    }
    
    .cfs-standings-table tr td:last-child { 
        border-bottom: none; 
    }
    
    .cfs-standings-table td:before { 
        content: attr(data-label); 
        font-weight: 600; 
        color: var(--cfs-secondary-text); 
        flex-shrink: 0;
        min-width: 80px;
    }
    
    .cfs-standings-table .td-team {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .cfs-standings-table .td-team:before {
        align-self: flex-start;
    }
    
    .cfs-standings-table .td-team .cfs-team-cell-content {
        align-self: flex-end;
        gap: 8px;
    }
}

/* Mobile muito pequeno */
@media screen and (max-width: 480px) {
    .cfs-plugin-wrapper {
        padding: 0.25rem;
    }
    
    .cfs-main-tab {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    
    .cfs-card-team .cfs-team-name {
        font-size: 0.8rem;
    }
    
    .cfs-card-score {
        font-size: 1.2rem;
        min-width: 40px;
    }
    
    .cfs-card-meta {
        font-size: 0.75rem;
    }
}