/* ========================================================================== PRICE LISTS — the drawer behind Pricing › Page Settings › Price Lists ========================================================================== This was a page of its own (pricing-types.html) until the whole screen moved into a right-side slider on Pricing. Nothing about what a price list IS changed; what changed is that the cards now stand in a 520px drawer instead of a page-wide grid, so they are built small — one column, every fact on one short line, and the reader's eye travels down rather than across. The cards are still a reading surface: one per price list, and every one of them read-only. Everything that changes a price list — its name, its region, what it charges and who it applies to — happens in the Price List panel that opens over this one, because five controls crammed into a card the reader is scanning is not a form. ========================================================================== */ /* The list drawer is wider than a plain slide-over and narrower than the form that opens over it: eight cards read down it without a card having to wrap its own assignment chips. */ #so-price-lists .slideover { width: min(520px, 100%); } /* ---- The column of price-list cards -------------------------------------- One column, because the drawer only has room for one. The old page laid these out `repeat(auto-fill, minmax(320px, 1fr))` and let a card be tall; here a card is a band, and eight of them are the screen. */ .pt-grid { display: flex; flex-direction: column; gap: 8px; } .pt-card { padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; background: #f5f5f5; box-shadow: var(--shadow-md); } .pt-card__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .pt-head-left { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; } .pt-rank { flex: none; width: 19px; height: 19px; border-radius: 5px; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .pt-name { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-card__actions { display: flex; gap: 0; flex: none; } /* The two row actions are the card's own furniture, not page buttons: at the platform icon-button size they are half the height of the band they sit in. */ .pt-card__actions .icon-btn { width: 26px; height: 26px; } .pt-card__actions .icon-btn svg { width: 14px; height: 14px; } /* A row is one line. The old card gave each 30px of its own so the facts stood apart on a wide page; in a column they are read together and the space between them is what makes eight cards not fit. */ .pt-row { display: flex; align-items: center; gap: 7px; min-height: 20px; font-size: 12px; } .pt-row > .pt-label { width: 62px; flex: none; color: var(--color-text-subtle); font-size: 11px; } .pt-row.pt-assigned { align-items: baseline; } .pt-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .pt-chips .chip { font-size: 11px; padding: 1px 6px; } /* The fallback sits under the row it qualifies, indented past the label so it reads as a note on the assignment rather than a second assignment. */ .pt-fallback { margin: 1px 0 0 69px; font-size: 10px; line-height: 1.4; color: var(--color-text-subtle); } /* Order is dragged, so every card says so before it is grabbed. */ .pt-grip { display: inline-flex; flex: none; color: var(--color-text-subtle); cursor: grab; } .pt-grip svg { width: 14px; height: 14px; } .pt-card:active .pt-grip { cursor: grabbing; } .pt-card.dragging { opacity: .45; } .pt-typeval { flex-wrap: wrap; } .pt-typeval > .pt-label { width: auto; } /* Method/Value labels hug their values */ .pt-typeval > .pt-vlabel { margin-left: 8px; } /* separate the Value group from the Method group */ .pt-typeval .badge { font-size: 11px; } /* A card states its region; it never repicks it. That is the panel's job. */ .pt-region { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--color-text); } .pt-region .loc-pin { color: var(--color-primary); flex-shrink: 0; } /* Adding is the last thing down the column rather than a tile beside the cards: in one column a 110px square would sit in its own empty row. */ .pt-add-tile { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--color-border-strong); background: transparent; box-shadow: none; color: var(--color-text-subtle); cursor: pointer; transition: border-color 120ms, color 120ms; } .pt-add-tile:hover { border-color: var(--color-primary); color: var(--color-primary); } .pt-add-tile svg { width: 20px; height: 20px; stroke-width: 2.5; } /* ---- The Price List panel ------------------------------------------------ One panel for a new price list and for an existing one: the fields are the same fields, and a second form for the same five answers is a second form to keep in step. It opens OVER the list drawer — later in document order, which is what puts it on top — so editing reads as stepping further in. */ #so-price-list .slideover { width: min(560px, 100%); } /* The sentence under Method carries the one rule this screen enforces — one base per region — so it is prose, not a tooltip on a chip nobody can click. */ .pl-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--color-text-subtle); } .pl-value-row { display: flex; align-items: center; gap: 6px; } .pl-value-row .input { width: 90px; text-align: right; } /* ---- Who the price list applies to --------------------------------------- Every client type, always on show, each with a switch. The switch is the assignment — there is nothing to open and nothing to confirm. A box on the panel takes the control ground: a white box on a white panel has no edge. */ .pl-types { border: 1px solid var(--color-control-border); border-radius: 7px; background: var(--color-control); padding: 2px 12px; } /* These rows are