/* Practice match - setup wizard + free-form scorecards.
   Score tables themselves come from CSS/match.css; this sheet covers the
   setup screen, the pickers, and the practice-only bits of a scorecard. */

.practice-note {
    margin-bottom: 22px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(212, 160, 23, 0.3);
    background: rgba(212, 160, 23, 0.1);
    color: #e6d3a3;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ---- Form fields ---------------------------------------------------- */

.practice-field {
    margin-bottom: 24px;
}

.practice-field:last-child {
    margin-bottom: 0;
}

.practice-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c9c9ce;
}

.practice-optional {
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: #8a8a90;
}

.practice-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
}

.practice-input::placeholder {
    color: #7f7f88;
}

.practice-input:focus {
    outline: none;
    border-color: rgba(212, 160, 23, 0.7);
    background: rgba(255, 255, 255, 0.1);
}

.practice-input-num {
    width: 80px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---- Segmented choices ---------------------------------------------- */

.seg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.seg-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #e4e4e8;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.seg-btn:hover {
    background: rgba(196, 30, 58, 0.14);
}

.seg-btn.is-active {
    border-color: rgba(196, 30, 58, 0.7);
    background: rgba(196, 30, 58, 0.22);
    color: #ffffff;
}

.seg-name {
    font-size: 1rem;
    font-weight: 700;
}

.seg-desc {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #a8a8b0;
}

.seg-btn.is-active .seg-desc {
    color: #d9c3c7;
}

/* ---- Scoring options ------------------------------------------------ */

.practice-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
}

.practice-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.practice-opt[hidden] {
    display: none;
}

.practice-check {
    align-items: flex-start;
}

.practice-opt input[type="checkbox"] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: #c41e3a;
    cursor: pointer;
}

.practice-opt-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

.practice-opt-desc {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #a0a0a8;
}

/* ---- Buttons -------------------------------------------------------- */

.practice-btn {
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.practice-btn-primary {
    background: rgba(80, 170, 90, 0.4);
    border-color: rgba(80, 170, 90, 0.7);
    color: #d6f3da;
}

.practice-btn-primary:hover:not(:disabled) {
    background: rgba(80, 170, 90, 0.6);
}

.practice-btn-ghost {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e0d6c8;
}

.practice-btn-ghost:hover:not(:disabled) {
    background: rgba(196, 30, 58, 0.25);
    color: #ffffff;
}

.practice-btn-danger {
    background: rgba(196, 30, 58, 0.28);
    border-color: rgba(196, 30, 58, 0.55);
    color: #f0aeb6;
}

.practice-btn-danger:hover:not(:disabled) {
    background: rgba(196, 30, 58, 0.5);
    color: #ffffff;
}

.practice-btn-small {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.practice-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.practice-link {
    padding: 0;
    border: 0;
    background: none;
    color: #d98a95;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.practice-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ---- Shooter picker ------------------------------------------------- */

.picker {
    margin-top: 14px;
}

.picker-list {
    max-height: 260px;
    margin-top: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.picker-option:last-child {
    border-bottom: 0;
}

.picker-option:hover {
    background: rgba(196, 30, 58, 0.25);
}

.picker-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-option-sub {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-shrink: 0;
}

.picker-option-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: #9a9aa2;
}

/* Last in the row and a fixed width, so every #number lines up in a column */
.picker-option-no {
    flex-shrink: 0;
    width: 3.6em;
    text-align: right;
    font-size: 0.78rem;
    color: #a0a0a0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Narrow screens: name on its own line, team + number beneath it */
@media (max-width: 520px) {
    .picker-option {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 3px;
    }

    .picker-option-name {
        white-space: normal;
    }

    .picker-option-sub {
        justify-content: space-between;
    }

    .picker-option-no {
        width: auto;
    }
}

.picker-option-guest {
    color: #bfe6c4;
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.picker-empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: #9a9aa2;
}

/* ---- Picked shooters ------------------------------------------------ */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(196, 30, 58, 0.45);
    background: rgba(196, 30, 58, 0.18);
    font-size: 0.85rem;
}

.chip-guest {
    border-color: rgba(80, 170, 90, 0.45);
    background: rgba(80, 170, 90, 0.16);
}

.chip-name {
    font-weight: 600;
    color: #ffffff;
}

.chip-team {
    font-size: 0.75rem;
    color: #b6b6bd;
}

.chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    color: #e4e4e8;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.chip-remove:hover {
    background: #c41e3a;
    color: #ffffff;
}

.practice-empty {
    font-size: 0.85rem;
    font-style: italic;
    color: #9a9aa2;
}

/* ---- Team cards ----------------------------------------------------- */

.team-card {
    margin-bottom: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.team-card.is-picked {
    border-color: rgba(196, 30, 58, 0.5);
    background: rgba(196, 30, 58, 0.08);
}

.team-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

/* Only the league-team header is a label wrapping a tick box; the custom
   one holds a text input, which shouldn't read as clickable. */
label.team-card-head {
    cursor: pointer;
}

.team-card-head input[type="checkbox"] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    accent-color: #c41e3a;
    cursor: pointer;
}

.team-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.team-card-count {
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #9a9aa2;
}

.team-name-input {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.team-card-body {
    padding: 0 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.team-card-tools {
    display: flex;
    gap: 16px;
    padding: 10px 0;
}

.roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 14px;
    margin-bottom: 12px;
}

.roster-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.88rem;
    color: #e4e4e8;
    cursor: pointer;
}

.roster-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #c41e3a;
    cursor: pointer;
}

.roster-item.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.roster-note {
    font-size: 0.72rem;
    font-style: italic;
    color: #9a9aa2;
}

.guest-adder {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.guest-adder .practice-input {
    flex: 1;
    min-width: 0;
}

/* ---- Start bar ------------------------------------------------------ */

.practice-start-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.practice-start-summary {
    font-size: 0.9rem;
    color: #bfe6c4;
    font-weight: 600;
}

.practice-start-summary.is-problem {
    color: #f0aeb6;
}

/* ---- Match stage ---------------------------------------------------- */

.practice-match-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.practice-match-headings .section-title,
.practice-match-head .section-title {
    margin-bottom: 0;
}

.practice-meta {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #a0a0a8;
}

.practice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.practice-share-status {
    margin: 10px 0 14px;
    min-height: 1.2em;
    font-size: 0.85rem;
    color: #bfe6c4;
    font-weight: 600;
}

.access-panel {
    text-align: center;
}

.edit-lock-signin-note {
    font-size: 0.85rem;
    color: #a0a0a0;
}

.edit-lock-signin-note a {
    color: #d4a017;
}

/* Rank column, standings tables only (the scorecards below repeat the
   name/team but not the position - the standings table is already the
   ranking). Overrides CSS/match.css's .summary-table *:first-child rule
   (60% width, left-aligned, sized for the shooter/team column it usually
   is) - same specificity, so it has to win on selector order instead. */
.summary-table th.pos-th,
.summary-table td.pos-cell {
    min-width: unset;
    width: 1%;
    text-align: center;
}

.pos-cell {
    color: #ffffff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Scorecards line up column for column across every team. Left to the
   browser's automatic table layout, each team's table sized its own
   columns to fit its own content - a team with longer names got a wider
   Shooter column, which pushed every shot and total column out of line
   with the other teams'. A fixed layout takes the widths from these rules
   instead, so every table comes out identical: the Shooter column is
   --name-col, the Score/H/C/Total columns are --stat-col each, and the
   shot columns share what's left equally. Long names wrap inside the
   Shooter column instead of widening it. All in pixels rather than
   percentages, which round differently per column and could leave a
   table a pixel wider than its box - enough for a needless scrollbar.

   min-width - every column at its full width - stops a narrow screen
   squeezing the shot boxes into each other; the table scrolls sideways
   inside its column instead, as it always has. --shots and --stat-cols
   are set per table by buildScorecard() in JS/practice.js. Read-only cards show plain numbers
   rather than input boxes, so their shot columns can be narrower.
   #tablesWrap only exists on the practice page, so the competition pages
   sharing this stylesheet keep their own layout. */
#tablesWrap .score-table {
    --name-col: 240px;
    --shot-col: 64px;
    --stat-col: 76px;
    table-layout: fixed;
    min-width: calc(var(--name-col) + var(--shots, 7) * var(--shot-col) + var(--stat-cols, 1) * var(--stat-col));
}

#tablesWrap .score-table.is-readonly {
    --shot-col: 44px;
}

#tablesWrap .score-table th:first-child {
    width: var(--name-col);
}

#tablesWrap .score-table th.th-stat {
    width: var(--stat-col);
}

/* A single word too long for the column (rare, but possible on a phone)
   breaks with a hyphen rather than spilling into the shot columns. */
#tablesWrap .score-table .shooter-cell {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Cell padding shrinks at these widths (CSS/match.css), so the columns can
   too. */
@media (max-width: 1120px) {
    #tablesWrap .score-table {
        --name-col: 150px;
        --shot-col: 60px;
        --stat-col: 64px;
    }

    #tablesWrap .score-table.is-readonly {
        --shot-col: 34px;
    }
}

@media (max-width: 480px) {
    #tablesWrap .score-table {
        --name-col: 112px;
        --shot-col: 56px;
        --stat-col: 52px;
    }

    #tablesWrap .score-table.is-readonly {
        --shot-col: 28px;
    }
}

.practice-shooter-name {
    color: #ffffff;
}

.practice-shooter-team {
    display: block;
    font-size: 0.72rem;
    color: #9a9aa2;
}

.ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-size: 0.72rem;
    color: #d0d0d0;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
}

.ai-toggle input {
    accent-color: #d4a017;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.ai-toggle input:disabled {
    cursor: wait;
    opacity: 0.6;
}

.ai-toggle-note {
    margin-left: 6px;
    color: #c41e3a;
    font-size: 0.68rem;
}

.ai-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(212, 160, 23, 0.5);
    background: rgba(212, 160, 23, 0.15);
    color: #d4a017;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.score-edit-row .score-cell.ai-cell {
    background: rgba(212, 160, 23, 0.07);
}

.team-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.team-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.team-total.total-highest {
    color: #d4a017;
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.4);
}

.team-total.total-lowest {
    color: #c41e3a;
}

.team-total-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a0a0a8;
}

@media (max-width: 600px) {
    .practice-actions {
        width: 100%;
    }

    .practice-actions .practice-btn {
        flex: 1;
        padding: 9px 10px;
    }

    .practice-start-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .team-totals {
        gap: 16px;
        justify-content: space-between;
    }

    .team-total {
        font-size: 1.05rem;
    }
}

/* CSS/match.css shrinks .summary-table right down at this width (4px 2px
   padding, 0.7rem) - tuned for the real match page's 3-column Shooter /
   A-League / B-League summary. Our standings table can carry up to six
   columns (POS, Shooter or Team, Score, HC, 10s, Total), so at that
   padding the headers run together. Restored to the same roomier values
   the league table (CSS/table.css) uses at this width - the id keeps this
   above match.css's rule without needing !important. */
@media (max-width: 480px) {
    #standingsWrap .summary-table th,
    #standingsWrap .summary-table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }
}