/* Charting page — phone-first: large tap targets, high contrast for
   outdoor use, minimal chrome, comfortable for one-handed use. */

.chart-page {
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.chart-status-message {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

/* ---- Trainer (Pages/Trainer.cshtml) ---- */

.trainer-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.trainer-new-match-btn {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
}

/* ---- Header ---- */

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.chart-position {
    font-size: 1.4rem;
    font-weight: 700;
}

.chart-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chart-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chart-badge-suspended {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 2px solid var(--color-warning-border);
}

.chart-badge-tiebreak {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border: 2px solid var(--color-primary);
}

.format-btn {
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.format-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Scoreboard ---- */

.scoreboard {
    background: var(--color-primary-darker);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* The shared .set-score-table (site.css) is styled for the light cards it
   normally sits on (the public/admin scoreboards) — this card is dark, so
   its text needs an explicit light-on-dark override here rather than
   inheriting the shared component's dark-on-transparent defaults. */
.scoreboard .set-score-name,
.scoreboard .set-score-cell {
    color: #fff;
}

.scoreboard .set-score-cell-empty {
    color: var(--color-primary-muted-on-dark);
}

.scoreboard .set-score-cell-set-loser {
    color: var(--color-primary-faint-on-dark);
}

/* .set-score-cell-current keeps its own light badge background regardless
   of the ambient dark card (site.css) — but the `.scoreboard .set-score-cell`
   rule above is a compound selector, so it beats site.css's plain
   `.set-score-cell-current` rule on specificity alone regardless of load
   order, turning its text white-on-light-yellow (illegible) without this
   explicit override putting the dark text color back. */
.scoreboard .set-score-cell-current {
    color: var(--color-accent-dark);
}

.scoreboard .set-score-row-home .set-score-name { border-left: 5px solid var(--color-primary-bright-on-dark); padding-left: 0.5rem; }
.scoreboard .set-score-row-visiting .set-score-name { border-left: 5px solid var(--color-visiting-bright-on-dark); padding-left: 0.5rem; }

/* ---- Match complete banner ---- */

.match-complete-banner {
    background: var(--color-primary-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.match-complete-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

#match-complete-score {
    font-size: 1.3rem;
    font-weight: 700;
}

.review-match-link {
    display: inline-flex;
    margin-top: 0.75rem;
}

/* ---- Point entry ---- */

.point-entry {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Neutral card — no home/visiting tint here. The button inside already
   carries the color at full saturation; tinting the card behind it too
   just doubled up the same signal and made the page read as "a lot of
   colors" for no added clarity. Color now shows up in exactly one place
   per side (the button), plus the thin scoreboard accent bar and the
   point log text — everywhere else stays neutral. */
.side-panel {
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    border: 1px solid var(--color-border);
}

.point-btn-primary {
    display: block;
    width: 100%;
    min-height: 72px;
    border: none;
    border-radius: 10px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.point-btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.point-btn-home { background: var(--color-primary); }
.point-btn-visiting { background: var(--color-visiting); }

.point-btn-primary:disabled {
    background: var(--color-disabled);
    cursor: not-allowed;
    box-shadow: none;
}

.chip-caption {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.6rem 0 0.35rem;
}

.outcome-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.chip:active {
    background: var(--color-surface-alt);
}

.chip:disabled,
.point-btn-primary:disabled,
.undo-redo-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Undo/Redo ---- */

.undo-redo-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.undo-redo-btn {
    flex: 1 1 0;
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---- Point log ---- */

.point-log-toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem 0;
}

.point-log {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.point-log li {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-surface-alt);
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.point-log li:last-child { border-bottom: none; }

.point-log-side-home { color: var(--color-primary); font-weight: 700; }
.point-log-side-visiting { color: var(--color-visiting); font-weight: 700; }

.point-log-outcome {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

/* ---- Small screens: keep primary buttons thumb-height, chips wrap 2-up ---- */
@media (max-width: 420px) {
    .chip { flex-basis: calc(50% - 0.25rem); }
}

/* ---- Penalty ---- */

.swap-server-section {
    margin-bottom: 0.75rem;
}

.swap-server-btn {
    width: 100%;
    min-height: 44px;
    font-weight: 700;
}

.penalty-finalize-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.issue-penalty-btn,
.finalize-match-btn {
    flex: 1 1 0;
    min-height: 48px;
    font-weight: 700;
}

/* Outline rather than a solid fill like .btn-danger's — a rare, modal-
   opening action doesn't need to compete at full saturation with the
   green/purple point buttons right above it. Border+text still carries
   --color-penalty (site.css) so it reads as distinct and serious; the
   quiet white fill is what actually cut down the page's color noise. */
.issue-penalty-btn {
    background-color: var(--color-surface);
    color: var(--color-penalty);
    border: 2px solid var(--color-penalty);
}

.issue-penalty-btn:hover {
    background-color: var(--color-danger-bg);
}

/* .modal-overlay / .modal-panel / .modal-panel h2 moved to site.css —
   they're generic, used well beyond this page now. */

.side-toggle {
    display: flex;
    gap: 0.5rem;
}

.serving-first-prompt {
    margin-bottom: 1.25rem;
}

.serving-first-label {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.side-toggle-btn {
    flex: 1 1 0;
    min-height: 48px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 700;
    cursor: pointer;
}

.side-toggle-btn.side-toggle-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.side-toggle-home.side-toggle-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.side-toggle-visiting.side-toggle-active { background: var(--color-visiting); border-color: var(--color-visiting); color: #fff; }

.format-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.5rem 0;
}

.penalty-level-preview {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0.75rem 0;
}

.penalty-override-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.penalty-override-toggle input { width: auto; }

/* ---- Charting levels 0 and 1 (spec §2.1) ---- */

/* One card per level inside #charting-level-modal-overlay — explanatory text
   needs real room, which a 3-way .side-toggle row couldn't give it, so each
   option is its own block with its own Choose button rather than a shared
   toggle group. */
.charting-level-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.charting-level-option {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

/* Marks whichever level is already active — most relevant when this modal is
   reopened via "Change level of detail" to see what's currently picked,
   rather than re-reading three paragraphs to remember. */
.charting-level-option-active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.charting-level-option h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
}

.charting-level-option p {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.charting-level-option .btn {
    width: 100%;
}

/* Level 1: one big target per side, same weight as the point buttons they
   replace, since this is the whole interaction on this page. */
.game-entry {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* Level 0: a set at a time. */
.set-entry {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.set-entry-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.set-entry-row label {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Wide enough that a two-digit score clears the number spinner — same reason
   the Correct Final Score dialog's inputs are this size. */
.set-entry-row input[type="number"] {
    width: 4.5rem;
    text-align: center;
}

.set-entry-dash {
    color: var(--color-text-faint);
    font-weight: 700;
}

.set-entry-tiebreak {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.set-entry-tiebreak input {
    width: auto;
    margin: 0;
}

.set-entry-actions {
    display: flex;
    gap: 0.6rem;
}

.set-entry-actions .btn {
    flex: 1 1 0;
    min-height: 44px;
}

.charting-level-change-btn {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
    padding: 0.4rem;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}