/* Club Prices speaks the same quiet, task-first vocabulary as Coaches and
   VIP: one page intro, hairline structure, muted micro-labels, and a
   black primary action. Shared patterns (.page-intro, .bo-table) come
   from design/vocabulary.css; only page-specific rules live here. */

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

/* First-load skeleton. Its blocks trace the real layout — a heading row,
   a run of table rows, then the discount card — so revealing the page
   swaps like for like and nothing below it shifts. Shown only until the
   first fetch of both prices and discount settles (the `booted` gate);
   a save's refetch keeps the real content up. */
.prices-skeleton {
    display: grid;
    gap: var(--space-4);
}

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

/* Row placeholders on the same rhythm as .bo-table cells (12px top/bottom
   padding around the line), separated by the same hairline, so the real
   table drops straight into the space they held. */
.prices-skeleton-table {
    display: grid;
}

.prices-skeleton-table .p-skeleton {
    margin: 12px 0;
}

.prices-skeleton-table .p-skeleton:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
    padding-bottom: 12px;
}

/* The card placeholder carries the gap that separates the two real
   sections, so the discount card lands where its skeleton was. */
.prices-skeleton-card {
    margin-top: var(--space-3);
}

/* Price tiers are the page's subject and come first; the same-day
   discount is a club-wide setting that follows them. */
.prices-tiers {
    margin-bottom: var(--space-6);
}

.prices-section.p-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.prices-section .p-card-body,
.prices-section .p-card-content {
    padding: 0;
}

.prices-pane {
    padding: var(--space-5);
}

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

.prices-pane-sub {
    max-width: 70ch;
    margin: var(--space-1) 0 0;
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--color-text-secondary);
}

.prices-discount-field {
    margin-top: var(--space-4);
}

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

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

.prices-amount {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.prices-amount input {
    width: 120px;
    min-height: 32px;
    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-variant-numeric: tabular-nums;
}

.prices-currency {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Save commits the card, so it sits on its own rule at the foot of it. */
.prices-pane-footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.prices-hint {
    max-width: 70ch;
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--color-text-tertiary);
}

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

.prices-tiers-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

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

.prices-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 96px;
    padding: var(--space-4) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

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

.prices-table .p-datatable-table {
    min-width: 620px;
}

/* The courts cell is the row's identity, and the only one whose length
   really varies — "All courts" on one row, eight court names on the next.
   Auto layout sized the column to the shortest case and handed the slack
   to Days, so state the shares explicitly and give the widest cell the
   most room. */
.prices-table .p-datatable-thead > tr > th:nth-child(1) { width: 32%; }
.prices-table .p-datatable-thead > tr > th:nth-child(2) { width: 23%; }
.prices-table .p-datatable-thead > tr > th:nth-child(3) { width: 19%; }
.prices-table .p-datatable-thead > tr > th:nth-child(4) { width: 13%; }
.prices-table .p-datatable-thead > tr > th:nth-child(5) { width: 13%; }

/* .bo-table pulls the first column flush left, which is right when a table
   sits inside a padded card. This one sits directly on the page, beside a
   card whose content is inset by space-5 — so without this the two blocks
   start on different vertical lines. Indent to match. */
.prices-table .p-datatable-thead > tr > th:first-child,
.prices-table .p-datatable-tbody > tr > td:first-child {
    padding-left: var(--space-5);
}

.prices-courts {
    font-weight: 500;
    line-height: var(--leading-body);
    color: var(--color-text);
}

.prices-days,
.prices-hours {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

/* The per-hour figure is what an operator quotes out loud, so it carries
   the emphasis — in ink, like the settlement amount, not in brand blue. */
.prices-amount-cell.is-strong {
    font-weight: 600;
    color: var(--color-text);
}

/* The heading row: label, count, and the one action, pushed right. */
.prices-add {
    margin-left: auto;
}

/* Tiers are edited in a dialog, like a coach profile — the table stays
   put instead of being pushed down by an inline form. The frame is fixed:
   the same size for adding and for editing, and for a club with three
   courts or twelve, so the dialog never resizes under the cursor.
   Content scrolls inside; the footer stays put. */
.prices-dialog.p-dialog {
    width: min(760px, 94vw);
    max-width: 94vw;
    height: 600px;
    max-height: 90vh;
}

.prices-dialog .p-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

.prices-dialog-body {
    display: grid;
    gap: var(--space-5);
}

/* Courts, two to a row. A checkbox says "selected" with a tick rather than
   a shade, and each court keeps its full name on one line. */
.prices-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
}

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

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

.prices-check span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Seven day chips fit one row on a wide dialog, but must wrap rather than
   push past the dialog's own padding when they do not. */
.prices-dialog .p-selectbutton {
    flex-wrap: wrap;
}

@media (max-width: 560px) {
    .prices-checks {
        grid-template-columns: minmax(0, 1fr);
    }
}

.prices-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

/* "Select all" is a quiet affordance beside its label, not a control in
   its own right. */
.prices-linkbutton {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.prices-linkbutton:hover {
    color: var(--color-text);
}

.prices-dialog-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.prices-hour-select.p-select {
    width: 120px;
}

.prices-price-input .p-inputnumber-input {
    width: 110px;
}

.prices-dialog-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.prices-dialog-spacer {
    flex: 1 1 auto;
}

.prices-table .p-datatable-tbody > tr {
    cursor: pointer;
}

@media (max-width: 560px) {
    .prices-dialog-row {
        flex-direction: column;
    }
}

/* Player start times: one chip per half-hour start. Green = players may
   start then (default), red = switched off. Same success/danger tokens the
   payment badges use, so the meaning is already learned. */
.club-prices-page .start-times-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.club-prices-page .start-chip {
    min-width: 62px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.club-prices-page .start-chip-on {
    background: var(--color-success-subtle);
    border-color: var(--color-success);
    color: var(--color-success-hover);
}

.club-prices-page .start-chip-off {
    background: var(--color-danger-subtle);
    border-color: var(--color-danger);
    color: var(--color-danger-hover);
    text-decoration: line-through;
}

.club-prices-page .start-times-actions,
.club-prices-page .start-times-pattern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}