/* A product's sales page (product-page.js), both apps. Its own tokens, dark first, light by data-scheme. */
.pp, .pd { --pp-bg: #0F1113; --pp-card: #17191C; --pp-raised: #1E2125; --pp-line: rgba(255,255,255,.1); --pp-text: #F2F3F5; --pp-muted: #A9B1BA;
  --pp-acc: #F7A11A; --pp-acc-ink: #1A1205; --pp-ok: #3FB950; --pp-bad: #E5645A; --pp-wait: #F7A11A; }
.pp { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; background: var(--pp-bg); color: var(--pp-text);
  font-family: inherit; font-size: 14px; box-sizing: border-box; }
:root[data-scheme="light"] .pp, :root[data-scheme="light"] .pd { --pp-bg: #F6F3EE; --pp-card: #FFFFFF; --pp-raised: #F4F1EA; --pp-line: rgba(18,20,23,.12); --pp-text: #1D1A16; --pp-muted: #5F5A52;
  --pp-acc: #9A5800; --pp-acc-ink: #FFFFFF; --pp-ok: #1B7F3A; --pp-bad: #B3261E; --pp-wait: #8A5300; }
html.pp-open, html.pp-open body { overflow: hidden; }
/* a sheet opened from the page (an order, an account) comes up above it; the offer view (2000) already does */
html.pp-open .sheet { z-index: 1600; }
.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
.pp h2, .pp h3, .pp h4, .pp p { margin: 0; }
.pp-bar-top .bc-wrap { margin: 0; flex: 1 1 auto; }
.pp-bar-top { display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--pp-line); background: var(--pp-card); }
.pp-back { min-height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text); font: inherit; font-weight: 800; cursor: pointer; flex: none; }
.pp-ttl { min-width: 0; }
.pp-ttl h2 { font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.pp-kicker { font-size: 12px; font-weight: 700; color: var(--pp-muted); text-transform: uppercase; letter-spacing: .05em; }
.pp-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; max-width: 1200px; width: 100%; margin: 0 auto; }
.pp-scope { color: var(--pp-muted); font-size: 13px; }
.pp-warn { color: var(--pp-wait); font-weight: 700; }
.pp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pp-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-tile { background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 12px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-tile.is-na .pp-v { color: var(--pp-muted); }
.pp-k { font-size: 12px; font-weight: 700; color: var(--pp-muted); }
.pp-v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp-v small { font-size: 12px; color: var(--pp-muted); }
.pp-s { font-size: 12.5px; color: var(--pp-muted); overflow-wrap: anywhere; }
.pp-card { background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 14px; padding: 14px; min-width: 0; }
.pp-cardh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.pp-cardh h3 { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.pp-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; background: var(--pp-raised); border: 1px solid var(--pp-line); }
.pp-seg button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--pp-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pp-seg button[aria-pressed="true"] { background: var(--pp-acc); color: var(--pp-acc-ink); }
.pp-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-cmp > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--pp-raised); min-width: 0; }
.pp-cmp b { font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp-d { font-size: 12px; color: var(--pp-muted); }
.pp-d.is-up { color: var(--pp-ok); } .pp-d.is-down { color: var(--pp-bad); }
.pp-note { font-size: 12.5px; color: var(--pp-muted); margin-top: 8px !important; line-height: 1.5; }
.pp-limits { margin-top: 0 !important; }
.pp-empty { color: var(--pp-muted); padding: 14px 0; }
.pp-chart { display: flex; align-items: stretch; gap: 3px; height: 170px; margin-top: 12px; padding-bottom: 22px; overflow-x: auto; }
.pp-bar { flex: 1 0 14px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 14px; }
.pp-bar__fill { display: block; width: 100%; background: var(--pp-acc); border-radius: 4px 4px 0 0; }
.pp-bar__l { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--pp-muted); white-space: nowrap; }
.pp-chart:has(.pp-bar:nth-child(13)) .pp-bar:not(:nth-child(3n+1)) .pp-bar__l { visibility: hidden; }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pp-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.pp-two--one { grid-template-columns: minmax(0, 1fr); }
.pp-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-rowbtn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--pp-line); background: var(--pp-raised); color: var(--pp-text); font: inherit; text-align: start; cursor: pointer; }
.pp-rowbtn:hover, .pp-rowbtn:focus-visible { border-color: var(--pp-acc); outline: none; }
.pp-rn { font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.pp-rv { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }
.pp-rbar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--pp-line); overflow: hidden; }
.pp-rbar i { display: block; height: 100%; background: var(--pp-acc); }
.pp-rs { grid-column: 1 / -1; font-size: 12px; color: var(--pp-muted); }
.pp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.pp-in { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--pp-line); background: var(--pp-raised); color: var(--pp-text); font: inherit; font-size: 14px; color-scheme: dark; }
:root[data-scheme="light"] .pp-in { color-scheme: light; }
.pp-in--q { flex: 1 1 220px; min-width: 0; }
.pp-lab { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pp-muted); font-weight: 700; }
.pp-btn { min-height: 40px; padding: 0 16px; margin-top: 10px; border-radius: 10px; border: 1px solid var(--pp-acc); background: transparent; color: var(--pp-acc); font: inherit; font-weight: 800; cursor: pointer; }
.pp-btn:hover { background: var(--pp-acc); color: var(--pp-acc-ink); }
.pp-btn--ghost { margin-top: 0; border-color: var(--pp-line); color: var(--pp-text); }
.pp-wrap { overflow-x: auto; border: 1px solid var(--pp-line); border-radius: 10px; }
.pp-tbl { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 13px; }
.pp-tbl--sm { min-width: 0; }
.pp-tbl th, .pp-tbl td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--pp-line); vertical-align: top; }
.pp-tbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--pp-muted); background: var(--pp-raised); white-space: nowrap; }
.pp-tbl .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-tbl .nw { white-space: nowrap; }
.pp-tbl tbody tr[data-pp-tx] { cursor: pointer; }
.pp-tbl tbody tr[data-pp-tx]:hover, .pp-tbl tbody tr[data-pp-tx]:focus-visible { background: var(--pp-raised); outline: none; }
.pp-chip { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: var(--pp-muted); white-space: nowrap; }
.pp-chip--approved, .pp-chip--ordered { color: var(--pp-ok); }
.pp-chip--rejected, .pp-chip--expired { color: var(--pp-bad); }
.pp-chip--awaiting, .pp-chip--open { color: var(--pp-wait); }
.pp-client { position: fixed; inset: 0; z-index: 1; background: rgba(0,0,0,.55); display: flex; justify-content: flex-end; }
.pp-client__in { width: min(640px, 100%); height: 100%; overflow-y: auto; background: var(--pp-bg); border-inline-start: 1px solid var(--pp-line); padding: max(14px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.pp-x { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text); font-size: 22px; cursor: pointer; }
.pp-h4 { font-size: 13px; font-weight: 800; color: var(--pp-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px !important; }
.pp-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-plist li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--pp-raised); font-size: 13px; }
.pp-plist li b { text-align: end; overflow-wrap: anywhere; }
/* the manager's Products list */
.pd { color: var(--pp-text); }
.pd-fam { font-size: 12px; color: var(--pp-muted); }
.pd-tbl { min-width: 760px; }
.pd-tbl tbody tr { cursor: pointer; }
.pd-tbl tbody tr:hover, .pd-tbl tbody tr:focus-visible { background: var(--pp-raised); outline: none; }
/* a product name that opens its history (the rep's order page) */
.linkbtn { padding: 0; border: 0; background: none; color: var(--accent, #F7A11A); font: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: start; }
/* the product sheet's summary (rep app) */
.pp-sum { margin-top: 16px; padding: 12px; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px; background: var(--wash, transparent); }
.pp-sum__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 4px; }
.pp-sum__g div { min-width: 0; }
.pp-sum__g b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp-sum__g span { font-size: 12px; color: var(--steel, #A9B1BA); }
@media (max-width: 760px) {
  .pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pp-tiles--3, .pp-cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-cmp > div:last-child { grid-column: 1 / -1; }
  .pp-v { font-size: 17px; }
  .pp-filters .pp-in, .pp-lab { flex: 1 1 140px; }
  .pp-lab .pp-in { flex: 1 1 auto; min-width: 0; }
}
@media print { .pp { display: none; } }
/* the app's price under a rep's own quotation price (2026-11-03) */
.pp-app { display: block; font-size: 11.5px; font-weight: 500; color: var(--pp-muted); white-space: nowrap; }