/* VIP memberships use the same quiet, task-first vocabulary as Coaches:
   one page intro, standard PrimeVue controls, and a single divided surface
   instead of a stack of decorative cards. The finish follows the compact
   editorial feel of ElevenLabs' product UI: hairline structure, muted
   micro-labels, a black primary action, and room for the data to breathe. */

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

/* The tab strip sits directly on the page ground: no white band, just the
   hairline underline doing the structural work. The rules moved to the
   shared .bo-page-tabs pattern (design/vocabulary.css) when Bookings needed
   the same strip; .vip-tabs stays as this page's hook. */

.vip-plan-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 72ch;
    margin: 0 0 var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

.vip-plan-note .pi {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: var(--text-base);
    color: var(--color-text-tertiary);
}

.vip-plan-note p {
    margin: 0;
}

.vip-workspace.p-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    overflow: visible;
}

.vip-workspace .p-card-body,
.vip-workspace .p-card-content {
    padding: 0;
}

/* The form column holds a fixed, comfortable width; every extra pixel of
   page width goes to the members table, which is sized to fit the page's
   900px column without scrolling. */
.vip-workspace-grid {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
}

.vip-pane {
    min-width: 0;
    padding: var(--space-5);
}

.vip-members-pane {
    border-left: 1px solid var(--color-border);
}

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

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

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

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

.vip-player-field {
    position: relative;
}

.vip-player-field .p-inputtext,
.vip-field .p-datepicker {
    width: 100%;
}

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

/* Add commits the form, so it wears .bo-btn-primary from
   design/vocabulary.css. Only its placement in the grid is this page's. */
.vip-form .p-button {
    justify-self: start;
}

.vip-error.p-message {
    margin-top: var(--space-3);
}

.vip-members-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

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

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

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

.vip-table-wrap {
    margin-top: var(--space-4);
}

/* Header/cell treatment comes from the shared .bo-table vocabulary
   (index.html); below is only what is specific to this table. */
.vip-members-table .p-datatable-table {
    min-width: 420px;
}

.vip-members-table .p-datatable-tbody > tr {
    transition: background-color 0.12s ease;
}

.vip-members-table .p-datatable-tbody > tr:hover {
    background: var(--color-surface-hover);
}

/* The Remove column hugs the right edge of the pane. */
.vip-members-table .p-datatable-thead > tr > th:last-child,
.vip-members-table .p-datatable-tbody > tr > td:last-child {
    text-align: right;
}

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

.vip-member-phone,
.vip-never-expires {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vip-never-expires {
    color: var(--color-text-tertiary);
}

/* Remove stays quiet until the row is engaged. */
.vip-members-table .p-button.p-button-text {
    padding: 4px 8px;
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .vip-workspace-grid {
        grid-template-columns: 1fr;
    }

    .vip-members-pane {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }
}

@media (max-width: 480px) {
    .vip-pane {
        padding: var(--space-4);
    }
}