.verticle-header {
    font-weight: bold;
    width: 65px;
    display: inline-block;
}

.scoresheet-table th, .scoresheet-table td {
    vertical-align: middle;
}

.scoresheet-cell {
    cursor: pointer;
    height: 48px;
    min-width: 60px;
}

    .scoresheet-cell.active-cell {
        outline: 3px solid #2196f3;
        box-shadow: inset 0 0 0 2px #2196f3;
    }

.keypad-btn {
    min-width: 64px;
    margin: 4px;
    font-weight: 600;
}

.scoresheet-header h1 {
    line-height: 1.1;
}

.action-row {
    display: flex;
    gap: 12px; /* spacing between buttons */
    flex-wrap: nowrap; /* keep them on one row */
    min-width: 0; /* allow flex children to shrink */
}

.action-btn {
    flex: 1 1 0; /* same width for all three */
    display: flex; /* center label vertically */
    align-items: center;
    justify-content: center;
    white-space: normal; /* allow wrapping inside */
    line-height: 1.2;
    padding: 0; /* consistent height */
    min-height: 56px; /* ensure same height even if one wraps */
    text-align: center;
}

td.selected {
    outline: 3px solid #2f7ae5;
}

tfoot th {
    font-weight: 600;
}

/* make every column obey the colgroup widths */
.table.scoresheet {
    table-layout: fixed !important; /* override bootstrap's auto */
    width: 100%;
}

    /* let text shrink/ellipsis instead of growing the column */
    .table.scoresheet th,
    .table.scoresheet td {
        min-width: 0; /* critical for fixed layout */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* Auto-fit the container width; columns resize with it */
.summary-auto {
    width: 100%;
    table-layout: fixed; /* prevents horizontal overflow; equal-ish columns */
    border-collapse: collapse;
}

    .summary-auto th,
    .summary-auto td {
        white-space: nowrap; /* keep scores on one line */
        overflow: hidden; /* no horizontal scrollbars */
        text-overflow: ellipsis; /* gracefully truncate if super tight */
        padding: .375rem .4rem; /* a hair tighter than default */
        vertical-align: middle;
    }

/* Small phones: compress a bit more */
@media (max-width: 576px) {
    .summary-auto th,
    .summary-auto td {
        padding: .25rem .3rem !important;
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .scoresheet-cell {
        min-width: 0;
    }
}