/* Players speaks the shared vocabulary: .page-intro, .bo-table,
   .bo-btn-*, quiet bordered cards.

   The avatar itself (.player-avatar, .player-name) stays in index.html —
   the booking modals render it too (.bm-player .player-avatar). Its two
   wrappers below are this page's alone, so they live here. Tokens only. */

.players-page {
    min-width: 0;
}

/* The one page-intro that also carries an action: title+description stay a
   grid (page-intro's own rule), the New player button sits beside them. */
.players-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.players-header-text {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.players-new-btn {
    flex: 0 0 auto;
}

.player-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-gender {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Pad the body only — PrimeVue nests .p-card-content inside .p-card-body,
   so padding both doubles it. */
.players-card.p-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.players-card .p-card-body {
    padding: var(--space-5);
}

.players-card .p-card-content {
    padding: 0;
}

/* The editor is a compact workspace rather than a bare form: a player
   identity strip creates context, then the shared dialog tabs separate
   editing from history without adding another overlay. */
.players-dialog.p-dialog {
    display: flex;
    flex-direction: column;
    width: min(960px, 94vw);
    max-width: 94vw;
    height: min(860px, 90vh);
    max-height: 90vh;
}

.players-dialog .p-dialog-header {
    flex: 0 0 auto;
    min-height: 64px;
    padding: var(--space-4) var(--space-5);
    box-sizing: border-box;
}

.players-dialog .p-dialog-header .p-dialog-title {
    min-width: 0;
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--leading-tight);
}

.players-dialog .p-dialog-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* The frame stays still between Profile and Matches. The tab strip and
   identity remain in place; only a long form or history table scrolls. */
.players-dialog .bo-dialog-tabs {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.players-dialog .bo-dialog-tabs .p-tablist {
    flex: 0 0 auto;
}

.players-dialog .bo-dialog-tabs .p-tabpanels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ── Table controls ─────────────────────────────────────────────────*/
.players-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.players-search.p-inputtext {
    width: 240px;
    max-width: 100%;
    margin-left: auto;
}

/* The community line says what this is; the toolbar needs only the number. */
.players-count {
    color: var(--color-text);
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}

/* ── Editor ─────────────────────────────────────────────────────────*/
.players-editor-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.players-editor-avatar {
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    aspect-ratio: 1;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-size: var(--text-base);
}

.players-editor-identity {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.players-editor-stats {
    display: flex;
    align-items: stretch;
}

.players-editor-stat {
    display: grid;
    gap: 2px;
    min-width: 64px;
}

.players-editor-stat + .players-editor-stat {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
}

.players-editor-stat span {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.players-editor-stat strong {
    color: var(--color-text);
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}

/* A <p> fills its line; this piece of metadata should only be as wide as its text. */
.players-device {
    flex: 0 1 auto;
    margin-left: auto;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.players-form {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.players-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 560px) {
    .players-form-grid {
        grid-template-columns: 1fr;
    }
}

.players-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.players-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.players-field .p-inputtext {
    width: 100%;
}

/* Points: the field plus the ±50 nudges, on one line. */
.players-points-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.players-points-row .p-inputtext {
    flex: 1;
    min-width: 0;
}

.players-points-nudge {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 13px;
    white-space: nowrap;
}

/* Starting points are the baseline the rating grew from — shown beside the
   editable rating for context; the server moves them with it. */
.players-field .players-readonly {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    cursor: default;
    pointer-events: none;
}

/* The page-size picker stays a native select — two options, where a full
   Select is more machinery than the choice deserves. Styled to sit level
   with the PrimeVue inputs beside it. */
.players-native-select {
    width: 100%;
    min-height: 34px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-base);
}

.players-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--color-text);
    cursor: pointer;
}

.players-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--color-primary);
}

.players-check-meta {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

.players-form-actions {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: var(--space-1) calc(0px - var(--space-5)) calc(0px - var(--space-5));
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}

/* Contact belongs to the player's identity strip. It stays visibly distinct
   from Save, which is the editor's only commit action. */
.players-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: var(--space-2);
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--color-success);
    border-radius: var(--radius-full);
    background: var(--color-success);
    color: var(--color-on-primary);
    font-size: var(--text-md);
    font-weight: 500;
    text-decoration: none;
}

.players-whatsapp .pi {
    font-size: 15px;
}

.players-whatsapp:hover {
    border-color: var(--color-success-hover);
    background: var(--color-success-hover);
    color: var(--color-on-primary);
}

@media (max-width: 560px) {
    .players-editor-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .players-whatsapp {
        margin-left: 0;
    }

    .players-device {
        margin-left: 0;
    }
}

/* Save closes the row from the right, as it does across the app. */
.players-save {
    margin-left: auto;
}

.players-saved {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-success);
}

.players-error.p-message {
    margin: 0;
}

/* ── Matches tab ────────────────────────────────────────────────────*/

.players-matches-table .p-datatable-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.players-matches-table .p-datatable-wrapper {
    overflow-x: hidden;
}

.players-matches-table .p-datatable-thead > tr > th,
.players-matches-table .p-datatable-tbody > tr > td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.players-matches-table .p-datatable-thead > tr > th:first-child,
.players-matches-table .p-datatable-tbody > tr > td:first-child {
    width: 96px;
}

.players-matches-table .p-datatable-thead > tr > th:last-child,
.players-matches-table .p-datatable-tbody > tr > td:last-child {
    width: 220px;
}

.players-match-result {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    white-space: nowrap;
}

.players-matches-pager {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.players-muted {
    margin: 0;
    font-size: var(--text-md);
    color: var(--color-text-secondary);
}

.players-sets {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

/* ── Roster ─────────────────────────────────────────────────────────*/
.players-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 132px;
    padding: var(--space-4) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

.players-state .pi {
    color: var(--color-text-tertiary);
}

.players-table-wrap {
    overflow-x: auto;
}

/* Ten columns, but most hold two to four characters, so they compress
   without becoming unreadable. This floor is what the widest real content
   needs (a full phone number and "12 Aug 2026"), letting the table fit the
   wide shell at 1280px rather than scrolling sideways. */
.players-table .p-datatable-table {
    min-width: 880px;
}

/* Ten columns earn a denser gutter than the four- or five-column tables
   the shared .bo-table rhythm was tuned for — this is what buys the last
   of the horizontal room. */
.players-table .p-datatable-thead > tr > th,
.players-table .p-datatable-tbody > tr > td {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}

.players-table .p-datatable-thead > tr > th:first-child,
.players-table .p-datatable-tbody > tr > td:first-child {
    padding-left: 0;
}

.players-table .p-datatable-thead > tr > th:last-child,
.players-table .p-datatable-tbody > tr > td:last-child {
    padding-right: 0;
}

/* Nothing in a data row should wrap to a second line — the name column is
   the only one with room to spare. */
.players-table .p-datatable-tbody > tr > td {
    white-space: nowrap;
}

.players-table .p-datatable-tbody > tr > td:first-child {
    white-space: normal;
}

.players-num {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.players-table .p-datatable-tbody > tr.players-row-selected > td {
    background: var(--color-primary-subtle);
}

.players-table .p-datatable-tbody > tr {
    cursor: default;
}

.players-table[row-hover] .p-datatable-tbody > tr {
    cursor: pointer;
}

.players-gender-unknown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.players-unknown {
    color: var(--color-danger);
}

/* The two-tap gender review, small enough to live inside a table row. */
.players-gender-btn {
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.players-gender-btn:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text);
}

/* The server's guess, offered but not applied. */
.players-gender-btn.is-suggested {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.players-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.players-pagination .p-paginator {
    padding: 0;
    background: transparent;
}

.players-page-size {
    width: auto;
    min-height: 30px;
    font-size: var(--text-md);
}

/* ── Loading ────────────────────────────────────────────────────────
   First load gets placeholder rows on the table's own rhythm, so the
   roster fades in without the page resizing. */
.players-skeleton {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

/* Every later fetch — search, sort, page — keeps the roster on screen and
   only dims it. Replacing it with a spinner made each keystroke read as
   the page collapsing and rebuilding. */
.players-table-wrap {
    transition: opacity 0.15s ease;
}

.players-table-wrap.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.players-gender-select.p-select {
    width: 100%;
}