/* 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-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.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 {
    /* 44px tall like everything else tapped on this page; it was about 34. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3rem 0.9rem;
    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;
}

/* The school code sets its own colour, so it does not inherit the white
   above. --color-text-muted is tuned for the light cards the shared table
   normally sits on and falls to roughly 3:1 against this dark green, which is
   under AA for text this size. The on-dark faint token keeps it clearly
   quieter than the player name while staying legible in daylight, which is
   where this screen is actually read. */
.scoreboard .set-score-school {
    color: var(--color-primary-faint-on-dark);
}

.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: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* A fixed height, not a minimum. Two reasons, and the first is the one
       that bites: with min-height the button simply grows to fit whatever
       name it is given, so "does this text overflow?" is never true and
       fitPointButtonText has nothing to react to. The second is that this is
       a tap target hit at speed at the side of a court, and it should not
       move down the screen because one court happens to have long names. */
    height: 72px;
    overflow: hidden;
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: 10px;
    /* Set by fitPointButtonText (chart-ui.js) per label, because a doubles
       pair is roughly twice as long as a singles name and one fixed size
       cannot serve both. This is the ceiling and the singles case. */
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* A doubles label is one string with a slash in it ("Contreras/Osorio
   Point"), which has no space to break at, so without this the browser
   overflows the button rather than wrapping. Breaking anywhere is acceptable
   here precisely because the shrink-to-fit above usually avoids needing it;
   this is the backstop for a genuinely enormous pair of names. */
.point-btn-primary > span {
    overflow-wrap: anywhere;
}

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

/* What each penalty level does, under the suggested one. */
.penalty-level-effects {
    padding-left: 1.1rem;
}

.penalty-level-effects li + li {
    margin-top: 0.2rem;
}

.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;
    min-height: 44px;
    padding: 0.4rem;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}