/* Club Admins: an "Add staff" card standing above the roster table, both
   on the same quiet bordered surface as VIP and Coaches. The user search
   repeats the Notifications treatment (quiet floating results, chosen
   person as a bordered row); roles stay real checkboxes — a tick states
   membership in a role the way a chip cannot. Shared vocabulary:
   .page-intro, .bo-table, .bo-btn-*. Tokens only. */

.club-admins-page {
    min-width: 0;
}

/* Both blocks sit on the same card. The table's flush .bo-table columns
   align to this padding, giving the roster clean left and right insets. */
.admins-card.p-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* Pad the body only — PrimeVue nests .p-card-content inside .p-card-body,
   so padding both doubles it. */
.admins-card .p-card-body {
    padding: var(--space-5);
}

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

.admins-add-card {
    margin-bottom: var(--space-5);
}

/* The roster card carries the table only, whose cells bring their own
   vertical rhythm — so the card adds horizontal inset but just a hair of
   vertical, instead of stacking a full pad on top of the cell padding. */
.admins-list .admins-card .p-card-body {
    padding: var(--space-2) var(--space-5);
}

.admins-pane-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text);
}

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

/* User search beside roles on a wide card; they stack on a narrow one. */
.admins-add-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 640px) {
    .admins-add-grid {
        grid-template-columns: 1fr;
    }
}

.admins-add-actions {
    display: flex;
    justify-content: flex-end;
}

.admins-field {
    display: grid;
    gap: 6px;
}

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

.admins-user-field {
    position: relative;
}

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

/* Roles: the Club Prices checkbox vocabulary, two to a row in the dialog. */
.admins-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
}

.admins-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
}

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

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

/* ── Roster ─────────────────────────────────────────────────────────
   Heading row: title and count, above the table card. */
.admins-list-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.admins-count {
    min-width: 24px;
    padding: 2px 7px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-body);
    text-align: center;
}

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

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

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

.admins-table .p-datatable-table {
    min-width: 560px;
}

.admins-name {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
}

.admins-phone {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* In-row role toggles: the same checkbox vocabulary a step smaller, laid
   out in a row that wraps on narrow screens. */
.admins-role-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.admins-check-row {
    font-size: var(--text-md);
}

.admins-check-row input {
    width: 14px;
    height: 14px;
}

.admins-self {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

/* The user id, same treatment as the Players table's id column. */
.admins-num {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.admins-table .p-datatable-thead > tr > th:last-child,
.admins-table .p-datatable-tbody > tr > td:last-child {
    text-align: right;
}