/* --- Reusable Table Component Styles --- */

.table-container {
    max-width: 900px;
    overflow-x: auto;
    border: 1px solid var(--club-green);
    border-radius: var(--border-radius);
    -webkit-overflow-scrolling: touch;
    margin-block-start: var(--spacing-lg);
}

.styled-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
}

.styled-table th,
.styled-table td {
    padding: var(--spacing-xs);
    white-space: nowrap;
}

.styled-table th {
    padding: var(--spacing-sm);
    background-color: var(--club-green);
    color: var(--pure-white);
    position: sticky;
    top: 0;
    z-index: 2;
}

/* --- Corner Rounding --- */
.styled-table th:first-child {
    border-top-left-radius: var(--border-radius);
}

.styled-table th:last-child {
    border-top-right-radius: var(--border-radius);
}

.styled-table tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--border-radius) - 1px);
}

.styled-table tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--border-radius) - 1px);
}

.styled-table tbody tr:nth-child(odd) td {
    background-color: var(--pure-white);
}

.styled-table tbody tr:nth-child(even) td {
    background-color: #f2f2f2;
}

/* --- Column Specific Styling --- */
.pos-col {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 50px;
}

.team-name-col {
    text-align: left;
    font-weight: bold;
    min-width: 150px;
    position: sticky;
    left: 50px;
    z-index: 1;
}

.number-col {
    text-align: center;
    width: 70px;
}

.pts-col {
    font-weight: bold;
    color: var(--darker-green);
}

.styled-table tr:hover td {
    background-color: hsl(120, 100%, 95%);
}

.styled-table th.pos-col,
.styled-table th.team-name-col {
    z-index: 3;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .styled-table th,
    .styled-table td {
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    .pos-col {
        width: 35px;
    }

    .team-name-col {
        left: 35px;
    }
}

@media (max-width: 600px) {
    .col-win-percentage {
        display: none;
    }
}

@media (max-width: 550px) {
    .col-pins-against {
        display: none;
    }
}

@media (max-width: 500px) {
    .col-average {
        display: none;
    }
}

@media (max-width: 450px) {
    .col-pins-for {
        display: none;
    }
}