/* ========================================
   Results Pages - Rankers & Cutoff
   Common Styles
   ======================================== */

/* Desktop Layout (993px and above) */
.top-container {
    margin-top: 150px;
}

/* Make table headers bold in desktop */
.responsive-table thead td,
.responsive-table thead th {
    font-weight: bold;
}

/* Tablet and Mobile: Override Materialize responsive-table behavior */
@media only screen and (max-width: 992px) {
    /* Completely override Materialize responsive-table behavior */
    table.responsive-table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        position: static !important;
    }

    table.responsive-table thead {
        display: table-header-group !important;
        float: none !important;
        border: none !important;
        border-right: none !important;
    }

    table.responsive-table tbody {
        display: table-row-group !important;
        width: 100% !important;
        position: static !important;
        overflow-x: visible !important;
        white-space: normal !important;
    }

    table.responsive-table thead tr,
    table.responsive-table tbody tr {
        display: table-row !important;
        border: none !important;
        padding: 0 !important;
    }

    table.responsive-table thead tr th::before {
        content: none !important;
    }

    table.responsive-table thead tr td,
    table.responsive-table thead tr th,
    table.responsive-table tbody tr td,
    table.responsive-table tbody tr th {
        display: table-cell !important;
        border: 1px solid #ddd !important;
        vertical-align: middle !important;
        white-space: normal !important;
        text-align: left !important;
        min-height: auto !important;
        margin: 0 !important;
    }

    table.responsive-table thead td,
    table.responsive-table thead th {
        font-weight: bold !important;
        text-align: center !important;
        background-color: #f5f5f5 !important;
    }
}

/* Tablet Layout (601px - 992px) */
@media only screen and (min-width: 601px) and (max-width: 992px) {
    .top-container {
        margin-top: 60px;
    }

    table.responsive-table thead tr td,
    table.responsive-table thead tr th,
    table.responsive-table tbody tr td,
    table.responsive-table tbody tr th {
        font-size: 13px !important;
        padding: 8px 6px !important;
    }
}

/* Mobile Layout (up to 600px) */
@media only screen and (max-width: 600px) {
    .top-container {
        margin-top: 10px;
    }

    table.responsive-table thead tr td,
    table.responsive-table thead tr th,
    table.responsive-table tbody tr td,
    table.responsive-table tbody tr th {
        font-size: 11px !important;
        padding: 6px 3px !important;
    }
}