/* ── Player detail row ─────────────────────────────────────── */

/* Hide detail rows on desktop — original layout unchanged */
tr.player-detail-row {
    display: none;
}

/* On mobile, detail rows participate in layout but start collapsed */
@media (max-width: 767px) {

    table.sortable thead tr::before,
    table.sortable thead tr:nth-child(2)::before,
    table.sortable tbody tr::before {
        display: none;
    }

    /* Hide player score columns on mobile — keep team cols only */
    .hide-mobile-col {
        display: none;
    }

    /* Show detail rows (visibility controlled by .expanded on parent) */
    tr.player-detail-row {
        display: table-row;
        /* collapsed state: zero height, no border */
        /* visibility: hidden; */
        visibility: collapse;  /* for better browser support */
        max-height: 0;
        overflow: hidden;

    }

    tr.player-detail-row.expanded {
        /* visibility: visible; */
        visibility: visible;
        max-height: none;
    }

    tr.player-detail-row.expanded td {
        padding: 0;
        border-top: none;

        /* To zero out the width influence of these rows */
        width: 1px;
        /* min-width: 0; */
    }

    tr.player-detail-row td > div {
        width: 100vw;      /* or a calc() based on your table's container */
        max-width: 100%;
    }



    /* Chevron expand button */
    .expand-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: none;
        background: none;
        cursor: pointer;
        color: var(--bs-secondary-color, #6c757d);
        font-size: 0.75rem;
        transition: transform 0.2s ease;
        padding: 0;
    }
    .expand-toggle.open {
        transform: rotate(180deg);
    }

    /* Hide the expand toggle on desktop */
    .expand-col {
        display: table-cell;
    }
}

/* On desktop the expand toggle column is invisible */
@media (min-width: 768px) {
    .expand-col {
        display: none;
    }
}

/* ── Player chips ───────────────────────────────────────────── */

.player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0;
}

.player-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /* font-size: 0.72rem; */
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid;
    white-space: nowrap;
    line-height: 1.4;
    color: #495057;
}

.chip-score {
    font-weight: 600;
    min-width: 2.5ch;      /* keeps alignment consistent across chips */
    text-align: right;
}
.chip-thru {
    /* font-size: 0.85em; */
    color: var(--color-text-tertiary);
    min-width: 2ch;
}
.chip-name {
    font-weight: bold;
    /* font-size: 0.9em; */
}

/* Score-tinted chip borders */
.player-chip.chip-under {
    border-color: #198754;
    color: #198754;
}
.player-chip.chip-over {
    border-color: #dc3545;
    color: #dc3545;
}
.player-chip.chip-even {
    border-color: #6c757d;
    color: #6c757d;
}
.player-chip.chip-mc {
    /* missed cut */
    border-color: #adb5bd;
    color: #adb5bd;
    text-decoration: line-through;
}