/* 
 * Responsive table styles for the website
 */

/* Base table responsive styles */
.table-responsive {
    width: 100%;
    margin-bottom: 1rem;
}

/* Medium screens / tablets (up to 992px) */
@media screen and (max-width: 992px) {

    /* Make tables more readable on smaller screens */
    table {
        width: 100%;
    }

    /* Specific styling for winners table */
    #winners-list table {
        width: 100%;
    }

    #winners-list table td {
        padding: 8px 5px;
    }
}

/* Small screens / mobile (up to 768px) */
@media screen and (max-width: 768px) {

    /* Stack table cells on mobile for better readability */
    #winners-list table tr {
        margin-bottom: 15px;
        display: block;
        border-bottom: 1px solid #eee;
    }

    #winners-list table td.label {
        /*font-weight: bold;*/
        /*background-color: #f5f5f5;*/
    }
}

/* Extra small screens (up to 480px) */
@media screen and (max-width: 600px) {

    /* Stack all table cells vertically on very small screens */
    #winners-list table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }
}