/* SCORES & STANDINGS PAGE ONLY STYLES */

.match-data-container {
    max-width: 960px;
    margin: 0 auto 40px auto;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}
.data-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.data-tab-btn {
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.data-tab-btn:hover {
    color: var(--text-primary);
    background-color: rgba(20, 188, 254, 0.1);
}
.data-tab-btn.active {
    color: var(--bg-dark);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
.data-panel { display: none; }
.data-panel.active { display: block; }
.loading-text {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
}
.scores-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.scores-header h3 { margin: 0; color: var(--text-primary); }
#scores-date-picker {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px;
}
.scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}
.score-card {
    background-color: var(--bg-dark);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.score-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    color: var(--text-secondary);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.match-status-live { color: var(--live-red); font-weight: bold; }
.match-status-ft { color: var(--text-secondary); }
.match-status-ht { color: #ffc107; }
.score-card-body { display: flex; flex-direction: column; gap: 10px; }
.team-line { display: flex; align-items: center; justify-content: space-between; font-size: 1.1em; }
.team-info { display: flex; align-items: center; gap: 10px; }
.team-logo { width: 24px; height: 24px; }
.team-score { font-weight: bold; }

/* FINAL STANDINGS TABLE STYLES (App-like design) */
.standings-table-container { 
    overflow-x: auto;
    background-color: #1E293B; /* Added a background color to the container */
    padding: 8px;
    border-radius: 8px;
}
.standings-table {
    width: 100%;
    min-width: 500px;
    border-collapse: separate;
    border-spacing: 0 4px; /* Creates space between rows */
    table-layout: fixed;
}
.standings-table th,
.standings-table td {
    padding: 16px 12px; /* Increased padding for more space */
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    
}
.standings-table th {
    color: var(--text-secondary);
    font-size: 0.8em;
    font-weight: 600;
    text-transform: none; /* Changed from uppercase to normal */
}
.standings-table tbody tr { 
    background-color: #0F172A; /* Darker row color */
    position: relative; 
}

/* Rounded corners for first and last rows */
.standings-table tbody tr:first-child td:first-child { border-top-left-radius: 6px; }
.standings-table tbody tr:first-child td:last-child { border-top-right-radius: 6px; }
.standings-table tbody tr:last-child td:first-child { border-bottom-left-radius: 6px; }
.standings-table tbody tr:last-child td:last-child { border-bottom-right-radius: 6px; }


/* Column Widths & Alignments */
.standings-table .col-pos { width: 10%; }
.standings-table .col-team { width: 54%; text-align: left; }
.standings-table .col-numeric { width: 12%; }

/* Team Cell Content Styling */
.standings-table .team-cell-content { display: flex; align-items: center; gap: 12px; }
.standings-table .team-cell-content img { width: 24px; height: 24px; }
.standings-table .points-cell { font-weight: 700; color: white; } /* Made points bold and white */

/* --- LEAGUE POSITION COLOR BARS (like in the app screenshot) --- */
.standings-table td.col-pos {
    position: relative;
    font-weight: bold;
}
.standings-table td.col-pos::before {
    content: '';
    position: absolute;
    left: 0; 
    top: 0;
    bottom: 0;
    width: 4px; /* Width of the color bar */
    background-color: transparent; /* Default is no color */
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* Green for positions 1-4 (Champions League) */
.standings-table tr[data-position='1'] .col-pos::before,
.standings-table tr[data-position='2'] .col-pos::before,
.standings-table tr[data-position='3'] .col-pos::before,
.standings-table tr[data-position='4'] .col-pos::before { 
    background-color: #22c55e; 
}

/* Blue for position 5 (Europa League) */
.standings-table tr[data-position='5'] .col-pos::before { 
    background-color: #3b82f6; 
}

/* Red for positions 18-20 (Relegation) - Assuming 20 teams */
.standings-table tr[data-position='18'] .col-pos::before,
.standings-table tr[data-position='19'] .col-pos::before,
.standings-table tr[data-position='20'] .col-pos::before { 
    background-color: #ef4444; 
}
/* ======================================================= */
/* FINAL STABLE & RECOMMENDED MOBILE SOLUTION (with Scroll)*/
/* ======================================================= */
@media (max-width: 600px) {

    /* This container allows the table to be scrolled horizontally */
    .standings-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    /* We give the table a minimum width to prevent columns from crushing */
    /* This will cause scrolling on screens smaller than 500px, which is intended */
    .standings-table {
        min-width: 500px; 
    }
    
    /* We use JS to shorten the names, so we don't need to hide logos or columns */
    /* This provides the best balance of data and usability */
    
    .standings-table th,
    .standings-table td {
        padding: 12px 10px; /* Standard padding */
    }
    
    .standings-table {
        font-size: 0.95em;
    }
}