/* Trebles - just the bits practice.css/match.css/competition-header.css
   don't already cover (the scorecard, shooter picker and shot boxes are all
   borrowed from match.css's real scorecard styling via the .edit-mode
   class - see JS/trebles-competition.js). */

.treble-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

/* The treble-total-with-handicap figure, same gold as match.css's .hc-cell -
   overrides practice.css's plain white .team-total since it loads first. */
.team-total.team-total-eff {
    color: #d4a017;
}

/* Team name in the shooter picker dropdown, same idea as the practice
   session's own shooter dropdown - match.css's .shooter-picker-option only
   ever shows name + number, since the match sheet's picker is already
   scoped to one known team's roster; this page's picker draws from every
   shooter across every team, so the team needs to be there too. */
.edit-mode .shooter-option-team {
    color: #a0a0a0;
    font-size: 0.8rem;
}

/* Name, team and number always stacked on their own line, rather than only
   once the picker panel narrows below match.css's 260px container-query
   breakpoint - a treble picker packs three fields (name/team/number) where
   the match sheet's own picker only ever has two, so a single line runs out
   of room well before that breakpoint fires on a normal-width column.
   Scoped to :has(.shooter-option-team) so match.html's own name+number-only
   picker keeps its compact single-line layout. */
.edit-mode .shooter-picker-option:has(.shooter-option-team) {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3px;
}

.edit-mode .shooter-picker-option:has(.shooter-option-team) .shooter-option-name,
.edit-mode .shooter-picker-option:has(.shooter-option-team) .shooter-option-team {
    white-space: normal;
    max-width: none;
}

.edit-mode .shooter-picker-option:has(.shooter-option-team) .shooter-option-no {
    width: auto;
}

/* "+ Create Treble"/"Start Tie-Breaker" sit below the table they act on, not
   up in the section header, so each reads as "next" rather than a
   detached toolbar action. */
#treblesWrap + .practice-actions,
#standingsWrap + .practice-actions {
    margin-top: 24px;
}

/* "Firing N shots" + the editor's "Change" button - sits between the
   tie-breaker's intro paragraph and its standings, so it reads as a
   property of the tie-breaker itself rather than another toolbar action. */
#reshootShotsBar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #e0d6c8;
    font-size: 0.9rem;
}

#reshootShotsBar:empty {
    display: none;
    margin-bottom: 0;
}

/* match.css's .edit-lock-bar is display:flex, which - being an author
   rule - always beats the UA [hidden] stylesheet rule regardless of
   specificity (origin outranks both). match.html/practice.html never
   actually toggle hidden on it (they insert/remove the element instead),
   so this pairing doesn't exist there - it's needed here because this bar
   is static markup that starts hidden. */
#treblesLockBar[hidden] {
    display: none;
}

/* .login-intro's own spacing lives in login.css, which this page doesn't
   link - without it the tie-breaker's intro paragraph sits flush against
   the table right below it. */
#reshootSection .login-intro {
    margin-bottom: 20px;
    line-height: 1.5;
}

/* 1st place and runner-up each get their own labelled block within the
   tie-breaker - stacked, with room between them so the two groups (and
   their otherwise-identical-looking standings tables) don't run together. */
.reshoot-group + .reshoot-group {
    margin-top: 28px;
}

.reshoot-group-title {
    margin-bottom: 10px;
}

/* Winner/runner-up summary shown in the header once results are submitted
   - a small table rather than prose so the two places line up and scan at
   a glance. */
.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-treble {
    line-height: 1.4;
}

.results-total {
    vertical-align: middle;
}

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

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

.results-total {
    text-align: right;
    font-weight: 700;
    color: #ffffff;
}

/* Winner row picked out in gold - the same colour the rest of the page
   already uses for "first"/"highest" (total-highest, score-winner). */
.results-row-winner {
    background: rgba(212, 160, 23, 0.18);
}

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

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

/* Space between the tie-breaker's own standings and its first treble card -
   they're two plain sibling divs inside one section (unlike the main
   Standings/Trebles, which get their gap for free from being separate
   sections), so this needs to be explicit. */
#reshootStandingsWrap:not(:empty) + #reshootTreblesWrap {
    margin-top: 24px;
}

/* "+ New Shooter" dialog - name and team together in one popup, styled to
   match the site's other dialogs (confirm-dialog.js/text-prompt.js). */

.new-shooter-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.7);
}

.new-shooter-card {
    background: #18181b;
    color: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    width: min(400px, 100%);
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    font: inherit;
    box-sizing: border-box;
}

.new-shooter-card h2 {
    margin: 0 0 16px;
    font-size: 1.2rem;
    color: #d4a017;
}

.new-shooter-field {
    margin-bottom: 14px;
}

.new-shooter-label {
    display: block;
    font-size: 0.85rem;
    color: #e0d6c8;
    margin-bottom: 6px;
}

.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;
}

.new-shooter-hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    min-height: 1.1em;
    color: #ffb3c0;
}

.new-shooter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
}

.new-shooter-actions button {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    color: #ffffff;
}

.new-shooter-cancel {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.new-shooter-go {
    border: none;
    background: linear-gradient(90deg, #c41e3a, #d4a017);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.new-shooter-go:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}