/* Rumney Cup - just the bits practice.css/match.css/competition-header.css
   don't already cover. The scorecard/shot-box/shooter-picker styling is
   all borrowed from match.css via the .edit-mode class - see
   JS/rumney-cup-competition.js. */

.comp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.comp-tab-btn {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e0d6c8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.comp-tab-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.comp-tab-btn.active {
    color: #18181b;
    background: #d4a017;
    border-color: #d4a017;
}

.comp-tab-section[hidden] {
    display: none;
}

#rcLockBar[hidden] {
    display: none;
}

/* One card per match - two 4-a-side scorecards stacked (not side by side,
   this page's tables are already wide with handicap columns), a team
   total footer under each, then the tie-breaker/declare-winner actions. */
.rc-match-card {
    margin-bottom: 28px;
}

/* match.css's own narrow-viewport rule squashes a wide score-table down to
   100% width instead of letting .score-table-column's overflow-x:auto
   scroll it - fine for pairs/trebles' 2-3-column tables, but a Rumney Cup
   scorecard is a full 4-a-side team (up to 7 shot columns plus
   Score/HC/Total) and just gets illegibly cramped instead. Keep the
   min-width + scroll behaviour here regardless of viewport width. */
@media (max-width: 1120px) {
    .rc-match-card .score-table:not(.summary-table) {
        min-width: 480px;
        width: auto;
    }
}

.rc-match-card.rc-match-decided {
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: 10px;
    padding: 12px;
}

.rc-match-head {
    margin-bottom: 6px;
}

.rc-match-card .score-table + .team-totals {
    margin-bottom: 18px;
}

.practice-actions + .section,
#rcDrawWrap:not(:empty) {
    margin-top: 12px;
}

#rcDrawWrap:not(:empty) + .practice-actions {
    margin-top: 24px;
}

.results-summary {
    margin: 20px auto 0;
    max-width: 360px;
    border: 2px solid #d4a017;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(212, 160, 23, 0.25);
}

.results-summary-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.04);
}

.results-summary-table td {
    padding: 10px 14px;
    text-align: left;
    color: #e0d6c8;
    font-size: 0.92rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.results-summary-table tr:first-child td {
    border-top: none;
}

.results-place {
    font-weight: 700;
    color: #d4a017;
    white-space: nowrap;
}

.results-row-winner {
    background: rgba(212, 160, 23, 0.18);
}

.results-row-winner td {
    color: #ffd873;
}

.results-row-winner .results-place {
    color: #d4a017;
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.4);
}

.round-history-group + .round-history-group {
    margin-top: 28px;
}

/* Both Draw-tab tables (bracket overview, pairing form) - wrapped in this
   so a long team name gets a horizontal scrollbar on a narrow screen
   instead of getting squeezed/wrapped into illegibility. The table's own
   min-width (below) is what actually forces that overflow; .score-table's
   width:100% only matters once the viewport is wide enough to satisfy it. */
.rc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Draw tab bracket overview - Squad/Total/Squad/Total, not the 2-column
   name+total layout .summary-table's own first/last-child rules assume, so
   override those widths here rather than let one squad's name column eat
   most of the row. */
.rc-bracket-table {
    min-width: 480px;
}

.rc-bracket-table th,
.rc-bracket-table td {
    width: 25%;
}

.rc-bracket-table th:first-child,
.rc-bracket-table td:first-child,
.rc-bracket-table th:nth-child(3),
.rc-bracket-table td:nth-child(3) {
    width: 35%;
    text-align: left;
    white-space: nowrap;
}

.rc-bracket-table th:nth-child(2),
.rc-bracket-table td:nth-child(2),
.rc-bracket-table th:last-child,
.rc-bracket-table td:last-child {
    width: 15%;
    white-space: nowrap;
}

/* Draw tab pairing form - Match/Team/Opponent, not the 2-column name+total
   layout .summary-table's own first-child rule assumes (which would give
   the single-digit Match column 60% of the row). */
.rc-pairing-table {
    min-width: 480px;
}

.rc-pairing-table th:first-child,
.rc-pairing-table td:first-child {
    width: 12%;
    text-align: left;
}

.rc-pairing-table th:nth-child(2),
.rc-pairing-table td:nth-child(2),
.rc-pairing-table th:last-child,
.rc-pairing-table td:last-child {
    width: 44%;
}

.rc-draw-heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.rc-draw-heading-row .column-title {
    margin-bottom: 0;
}

/* .new-shooter-input is written for <input> - a plain <select> ignores its
   padding/border/background almost entirely without this, and falls back
   to the browser's own unstyled dropdown chrome. */
.rc-pair-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23e0d6c8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 7px;
    padding-right: 36px;
    cursor: pointer;
}

.rc-pair-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rc-pair-select option {
    background: #18181b;
    color: #ffffff;
}

/* Draw tab - one card per squad, built by hand ("+ Create Team", then a
   name field + 4 shooter-picker slots - see buildSquadCard), above the
   pairing form. */
.rc-squad-manager {
    margin-bottom: 20px;
}

.rc-section-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 24px 0;
}

/* Flexbox, not CSS grid - grid's repeat() forces every column to the same
   track width, whereas a wrapping flex row packs as many fixed-size cards
   per row as actually fit the viewport. */
.rc-team-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.rc-team-card {
    width: 280px;
    flex: 0 0 auto;
}

.rc-team-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 12px;
    margin-bottom: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rc-team-name-input {
    flex: 1;
    text-align: center;
    font-weight: 600;
}

/* One row per roster slot - a plain list, not a table, so a long name has
   nothing to force wider than the card: the picker trigger itself gets a
   hard, explicit pixel width (not a percentage of anything) and truncates
   with an ellipsis past that, so it can never push the card or the row
   wider than intended. */
.rc-squad-roster-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.rc-team-card .shooter-picker,
.rc-team-card .shooter-picker-trigger {
    width: 220px;
    box-sizing: border-box;
}

.rc-team-card .shooter-picker-label {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.new-shooter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 1rem;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s ease;
}

.new-shooter-input:focus {
    border-color: #c41e3a;
}