/* Pricing and finance pages (js/pricing.js, js/finance.js). Uses the tokens of style.css. */

/* Lookups in a card's filter bar get room for a product or customer name */
.pr-filter-wide {
    flex: 1 1 18rem;
    max-width: 32rem;
}

.pr-filter-wide .lookup {
    width: 100%;
}

/* A product, current price and the "Set new price" button above the history */
.pr-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    margin: 1rem 0;
}

.pr-summary .detail-list {
    flex: 1 1 28rem;
}

.pr-result > .muted {
    margin: 1rem 0 0;
}

.pr-detail:empty {
    display: none;
}

/* The global default maximum discount above the rules */
.pr-default {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 0 0 1rem;
    padding: .6rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

/* "More options" toggle inside a form dialog (spans the form grid) */
.pr-more {
    grid-column: 1 / -1;
    justify-self: start;
}

/* Chosen products of a list field, each with a remove button */
.pr-picked {
    margin-top: .45rem;
}

.pr-picked:empty {
    display: none;
}

.pr-picked .chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.pr-chip-remove {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.pr-chip-remove:hover,
.pr-chip-remove:focus-visible {
    background: var(--danger-soft);
    color: var(--danger);
}

/* Small editable tables inside forms (tiers, kit components, quote lines) */
.pr-edit-table {
    margin: .5rem 0;
}

.pr-edit-table input {
    max-width: 100%;
}

.pr-amount-input {
    width: 8rem;
}

.pr-short-input {
    width: 4.5rem;
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    text-transform: uppercase;
}

.pr-tiers .btn,
.pr-goodwill {
    margin-top: .4rem;
}

.pr-split-note {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: var(--text-muted);
}

.pr-subheading {
    margin: 1.1rem 0 .4rem;
    font-size: 1rem;
}

/* "Try a quote" */
.pr-quote-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.pr-quote-body[hidden] {
    display: none;
}

.pr-quote-body {
    margin-top: 1rem;
}

.pr-quote-filters {
    border-bottom: 0;
}

.pr-quote-add {
    max-width: 32rem;
    margin: .25rem 0;
}

.pr-quote-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 1rem 0 .5rem;
}

.pr-quote-notes {
    margin: .6rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-muted);
}

p.pr-quote-notes {
    padding-left: 0;
}

/* The price steps of a quote line: List 100.00, Group -15 % -> 85.00, ... */
.pr-steps {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    padding-left: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* Credit note lines */
.pr-credit-lines td {
    vertical-align: top;
}

.pr-totals {
    margin-top: 1rem;
}

/* Negative amounts: a minus sign and a colour (never colour alone) */
.pr-negative {
    color: var(--danger);
}

/* Results: KPI tiles outside the dashboard need their accent */
.pr-kpis {
    --accent: var(--primary);
    --accent-soft: var(--primary-soft);
}

.pr-segmented {
    display: inline-flex;
    gap: 0;
    margin-bottom: 1rem;
}

.pr-segmented .btn {
    border-radius: 0;
}

.pr-segmented .btn:first-child {
    border-radius: 8px 0 0 8px;
}

.pr-segmented .btn:last-child {
    border-radius: 0 8px 8px 0;
}

.pr-segmented .btn[aria-pressed="true"] {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.sr-month {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

/* Target grid: each month's target is a button */
.pr-targets th[scope="row"] {
    white-space: nowrap;
    font-weight: 600;
}

.pr-cell-button {
    min-width: 4.5rem;
    padding: .25rem .4rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
    cursor: pointer;
}

.pr-cell-button:hover,
.pr-cell-button:focus-visible {
    border-color: var(--primary);
    background: var(--primary-soft);
}

/* Rebate agreement: the current period's progress (a sentence, a bar, the details) and gift tiers */
.pr-progress-sentence {
    margin: 0 0 .5rem;
}

.pr-progress-bar {
    display: block;
    width: 100%;
    max-width: 36rem;
    height: .75rem;
    margin: 0 0 1rem;
    accent-color: var(--primary);
}

.pr-tier-gift .lookup {
    min-width: 14rem;
}

@media (max-width: 600px) {
    .pr-filter-wide {
        max-width: none;
    }

    .pr-amount-input {
        width: 6.5rem;
    }
}