/* 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;
}

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