/*
=================================
    TABLE ADN HEADER CONTAINER
=================================
*/

/* Container for table and header */
#league-table-container 
{
    width: 60%;
    justify-content: center;
    align-items: center;

    margin-right: 30px;

    transition: transform 0.3s ease; /* Add smooth transition effect */
}

/*
=================================
        TABLE CONTAINER
=================================
*/

/* Container for Table */
#league-table-stats-container 
{
   width: 100%;    
}

/* Table that holds all the standing information */
#league-standings-table 
{
    width: 100%;
    padding: 15px;

    /* Table Header Styling */
    th 
    {
        border-bottom: 3px solid red; /* Add red bottom border */
    }

    /* Data in Row Style */
    td
    {
        padding: 5px;
    }

    /* Every Odd Row in Table Style */
    tbody tr:nth-child(odd) 
    {
        background-color: #d2d2d2; /* Light gray for odd rows */
    }
}

    /*
    ===========================
        TABLE COLUMNS STYLE
    ===========================
    */

    /* Club Logo Column in Table Style */
    #league-table-club-logo-column {
        width: 25px; 

        /* Club Logo Style */
        #league-table-club-logo 
        {      
            width: 25px;
            margin-right: 5px;
            cursor: pointer;
        }

    }

    /* Club Name Column in Table Style */
    #league-table-club-name-column 
    {
        font-weight: 500;
        cursor: pointer;
    }

    /* Points Column in Table Style */
    #league-table-points-column 
    {
        font-weight: bolder;
    }

/*
==============================================================
                       HOVER STYLES
==============================================================
*/

/* Add hover effect to table rows */
#league-standings-table tbody tr:hover 
{
    /* Create border around row on hover */
    border: 1px solid lightgray;
    border-radius: 10px;

    /* Make club logo larger on hover */
    #league-table-club-logo
    {
        width: 32px;
    }

    /* Undeline club name on hover */
    #league-table-club-name-column 
    {
        text-decoration: underline; /* Add underline effect */
    }
}

/*
==============================================================
                 DYNAMIC PAGE WIDTH STYLES
==============================================================
*/

/* Stlye for Screens Smaller than 1230px */
@media (max-width: 1230px) 
{
    #league-table-container 
    {
        align-items: center;
        width: 75%;
        min-width: 580px;
    }   
}