#page-sales .sa-kpi[data-pop]:focus-visible { outline: 2px solid rgba(201,168,76,0.6); outline-offset: 2px; } /* interactive-tile affordance (S2 wired: data-pop tiles are keyboard-reachable buttons) */ #page-sales .sao-kpi[data-pop] { cursor: pointer; } #page-sales .sao-kpi[data-pop]:focus-visible { outline: 2px solid rgba(201,168,76,0.6); outline-offset: 2px; } #page-sales .sao-kpi.sao-pop-open { border-color: rgba(201,168,76,0.32); box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.22), 0 0 30px -10px rgba(201,168,76,0.5); } /* ════════════════════════════════════════════════════════════════════════════ FIX_SALES_COMMAND_CENTRE_S1_2026_06_17 — Sales Command Centre (Overview) styles, scoped under #page-sales. Built TO design_samples/sales/sales_landing_command.html at ultra-HD fidelity (the founder sample is the spec). Literal hex values mirror the sample's :root tokens (the platform's own :root names differ; inlining the sample's exact palette preserves the sample aesthetic). ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM - the established L18.8 lesson). MIRRORS the shipped #page-risk rk-* CSS structure (same sample family) re-prefixed sa-*, with the SVG tapered pipeline FUNNEL hero replacing the likelihood x impact risk-matrix. S1 (landing): KPI band + funnel hero + needs-attention. The KPI expand-chevron + hover-hint affordances render for VISUAL FIDELITY but their click/hover handlers are UNWIRED (the hover-peek popovers + click-expand modals are Sales S2 - their CSS lands with S2 too). ════════════════════════════════════════════════════════════════════════════ */ #page-sales .sa-head-row { display: flex; align-items: flex-end; gap: 16px; } #page-sales .sa-head-row h1 { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: #F0EBE2; margin: 0; } #page-sales .sa-head-row .sa-when { font-size: 11.5px; color: #8A857D; padding-bottom: 2px; } /* FIX_KPIWIN_P2_ROLLOUT_2026_07_01 — Sales header: .sa-head-spacer pushes the reusable window control top-right; .sa-asof is the snapshot "as of today" marker. Sales WINDOWED tiles (Joined / Conversion / Win-rate — period derivations) re-derive on the range; SNAPSHOT tiles (open pipeline now / active trials now / composite health) carry the marker under a non-MTD window. */ #page-sales .sa-head-row .sa-head-spacer { flex: 1 1 auto; } #page-sales .sa-asof { font-size: 10px; color: #8A857D; font-style: italic; margin-left: 4px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } #page-sales .sa-statusline { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; font-size: 13.5px; color: #C4BFB6; } #page-sales .sa-statusline .sa-dot { width: 10px; height: 10px; border-radius: 50%; background: #E8943A; box-shadow: 0 0 11px #E8943A; position: relative; flex: 0 0 auto; } #page-sales .sa-statusline .sa-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(232,148,58,0.4); animation: saPulse 2.6s ease-out infinite; } #page-sales .sa-statusline b { color: #F0EBE2; font-weight: 700; } #page-sales .sa-statusline .sa-fix { color: #E8943A; font-weight: 600; } /* exposure-overlay posture line (Sales spine, parallel to Risk broker-gate / Legal counsel-gate) */ #page-sales .sa-statusline .sa-posture { color: #8A857D; font-size: 12px; font-style: italic; } /* KPI band - 6 tiles (sample .kpis / .kpi) */ #page-sales .sa-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; margin-bottom: 18px; } #page-sales .sa-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg, #262320, #1f1c19); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1); } /* per-tile accent rail (sample .k-pipe/.k-trials/.k-conv/.k-joined/.k-win/.k-health) */ #page-sales .sa-kpi.sa-k-pipe::before { background: #C9A84C; } #page-sales .sa-kpi.sa-k-trials::before { background: #E8943A; } #page-sales .sa-kpi.sa-k-conv::before { background: #5B9BD5; } #page-sales .sa-kpi.sa-k-joined::before { background: #4CAF7D; } #page-sales .sa-kpi.sa-k-win::before { background: #3FB6A8; } #page-sales .sa-kpi.sa-k-health::before { background: #C9A84C; } #page-sales .sa-kpi .sa-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; } #page-sales .sa-kpi .sa-val { font-family: 'Montserrat', sans-serif; font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; font-variant-numeric: tabular-nums; } #page-sales .sa-kpi .sa-sub { font-size: 11.5px; margin-top: 7px; color: #8A857D; display: flex; align-items: center; gap: 5px; } #page-sales .sa-kpi .sa-sub .sa-delta { font-weight: 700; } #page-sales .sa-kpi .sa-sub .sa-pos { color: #4CAF7D; } #page-sales .sa-kpi .sa-sub .sa-warn { color: #E8943A; } #page-sales .sa-kpi .sa-sub .sa-neg { color: #E05555; } #page-sales .sa-kpi .sa-sub .sa-blue { color: #5B9BD5; } /* expand affordance chevron (S1 inert - visual fidelity only; click/hover wiring is S2) */ #page-sales .sa-kpi .sa-expand { position: absolute; right: 11px; bottom: 11px; width: 16px; height: 16px; opacity: .38; transition: opacity .2s cubic-bezier(0.4,0,0.2,1), transform .2s cubic-bezier(0.4,0,0.2,1); } #page-sales .sa-kpi:hover .sa-expand { opacity: .9; transform: scale(1.12); } #page-sales .sa-kpi .sa-expand svg { width: 16px; height: 16px; stroke: #C9A84C; } #page-sales .sa-kpi .sa-hint-i { position: absolute; left: 16px; bottom: 11px; font-size: 8.5px; letter-spacing: .04em; color: #8A857D; opacity: 0; transition: opacity .2s cubic-bezier(0.4,0,0.2,1); font-weight: 600; white-space: nowrap; pointer-events: none; } #page-sales .sa-kpi:hover .sa-hint-i { opacity: .7; } #page-sales .sa-kpi .sa-hint-i b { color: #C9A84C; font-weight: 700; } /* layout: funnel hero + attention (sample .grid 1.5fr 1fr) */ #page-sales .sa-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; } #page-sales .sa-panel { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .sa-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-sales .sa-panel-h h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: .4px; color: #F0EBE2; font-weight: 700; margin: 0; } #page-sales .sa-panel-h .sa-hint { font-size: 11px; color: #8A857D; } #page-sales .sa-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 14px; } /* pipeline funnel key visual (sample .funnel-wrap / #funnelSvg / .funnel-legend) */ #page-sales .sa-funnel-wrap { position: relative; padding: 4px 2px 2px; } #page-sales #sa-funnelSvg { width: 100%; height: 268px; display: block; } #page-sales .sa-funnel-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 10.5px; color: #8A857D; flex-wrap: wrap; } #page-sales .sa-funnel-legend span { display: inline-flex; align-items: center; gap: 6px; } #page-sales .sa-funnel-legend .sa-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } #page-sales .sa-funnel-legend b { color: #C4BFB6; font-weight: 600; } /* needs-attention list (sample .att-head / .att-list / .att) */ #page-sales .sa-att-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #page-sales .sa-att-head h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: .4px; display: flex; align-items: center; gap: 9px; color: #F0EBE2; font-weight: 700; margin: 0; } #page-sales .sa-att-head h3 .sa-glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg, rgba(224,85,85,0.24), rgba(232,148,58,0.12)); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } #page-sales .sa-att-head h3 .sa-glyph svg { width: 14px; height: 14px; } #page-sales .sa-att-head .sa-count { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: #F0EBE2; background: rgba(232,148,58,0.16); border: 1px solid rgba(232,148,58,0.36); border-radius: 999px; padding: 3px 11px; letter-spacing: .03em; } #page-sales .sa-att-list { display: flex; flex-direction: column; gap: 9px; } /* FIX_HONEST_EMPTY_PRESERVE_STRUCTURE_S1_2026_06_20 — honest-empty skeleton rows for the Sales needs-attention panel on a real account (structure preserved, no fabricated rows). Mirrors the #page-procurement .proc-att-skel / .proc-skel-line idioms verbatim, Sales-scoped. */ #page-sales .sa-att-skel { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.014); border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; } #page-sales .sa-att-skel .sa-skel-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #8A857D; opacity: .45; width: 16px; text-align: center; flex: none; } #page-sales .sa-att-skel .sa-skel-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); } #page-sales .sa-att-skel .sa-skel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } #page-sales .sa-att-skel .sa-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-sales .sa-att-skel .sa-skel-line.w1 { width: 62%; } #page-sales .sa-att-skel .sa-skel-line.w2 { width: 84%; } #page-sales .sa-att-skel .sa-skel-act { flex: none; } #page-sales .sa-att-empty-note { margin-top: 12px; text-align: center; font-size: 12.5px; color: #8A857D; line-height: 1.6; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.014); border: 1px dashed rgba(255,255,255,0.08); } #page-sales .sa-att-empty-note b { color: #B8B2A8; } #page-sales .sa-att { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); transition: .18s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; } #page-sales .sa-att.sa-p1 { --sa-lvl: #E05555; border-color: rgba(224,85,85,0.36); background: linear-gradient(108deg, rgba(224,85,85,0.12), rgba(255,255,255,0.018) 46%); padding: 14px 15px; } #page-sales .sa-att.sa-p1::before { box-shadow: 0 0 18px rgba(224,85,85,0.5); } #page-sales .sa-att.sa-p1::after { content: ""; position: absolute; inset: 0; background: radial-gradient(360px 140px at 0% 50%, rgba(224,85,85,0.10), transparent 70%); pointer-events: none; } #page-sales .sa-att.sa-amber { --sa-lvl: #E8943A; } #page-sales .sa-att.sa-red { --sa-lvl: #E05555; } #page-sales .sa-att.sa-blue { --sa-lvl: #5B9BD5; } #page-sales .sa-att .sa-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #8A857D; width: 16px; text-align: center; flex-shrink: 0; z-index: 1; } #page-sales .sa-att.sa-p1 .sa-rank { font-size: 17px; color: #E05555; width: 20px; } #page-sales .sa-att .sa-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; z-index: 1; } #page-sales .sa-att.sa-p1 .sa-ico { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 18px -4px rgba(224,85,85,0.45); } #page-sales .sa-att .sa-ico svg { width: 16px; height: 16px; } #page-sales .sa-att.sa-p1 .sa-ico svg { width: 20px; height: 20px; } #page-sales .sa-att .sa-ic-amber { background: rgba(232,148,58,0.14); } #page-sales .sa-att .sa-ic-amber svg { stroke: #E8943A; } #page-sales .sa-att .sa-ic-gold { background: rgba(201,168,76,0.14); } #page-sales .sa-att .sa-ic-gold svg { stroke: #C9A84C; } #page-sales .sa-att .sa-ic-red { background: rgba(224,85,85,0.14); } #page-sales .sa-att .sa-ic-red svg { stroke: #E05555; } #page-sales .sa-att .sa-ic-blue { background: rgba(91,155,213,0.14); } #page-sales .sa-att .sa-ic-blue svg { stroke: #5B9BD5; } #page-sales .sa-att-body { flex: 1; min-width: 0; z-index: 1; } #page-sales .sa-att-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } #page-sales .sa-att-top .sa-tt { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; } #page-sales .sa-att.sa-p1 .sa-att-top .sa-tt { font-size: 14.5px; } #page-sales .sa-att-top .sa-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; } #page-sales .sa-att .sa-desc { font-size: 11.5px; color: #8A857D; margin-top: 3px; line-height: 1.4; } #page-sales .sa-att.sa-p1 .sa-desc { font-size: 12px; color: #C4BFB6; } #page-sales .sa-att .sa-desc b { color: #C4BFB6; font-weight: 600; } #page-sales .sa-att .sa-att-act { flex: none; z-index: 1; } #page-sales .sa-att .sa-att-act .sa-btn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 7px 14px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; transition: all .18s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .sa-att .sa-att-act .sa-btn:hover { background: rgba(255,255,255,0.09); color: #F0EBE2; transform: translateY(-1px); border-color: #C9A84C; } #page-sales .sa-att.sa-p1 .sa-att-act .sa-btn { background: linear-gradient(180deg, #E05555, #b94545); border-color: transparent; color: #fff; font-weight: 700; padding: 9px 18px; box-shadow: 0 4px 16px -5px rgba(224,85,85,0.5); } #page-sales .sa-footnote { font-size: 10px; color: #8A857D; margin-top: 18px; text-align: center; opacity: .7; } @media (prefers-reduced-motion: reduce) { #page-sales .sa-statusline .sa-dot::after { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ FIX_SALES_QUOTES_S1_2026_06_17 — Quotes & Proposals drill-in styles, scoped under #page-sales. Built TO design_samples/sales/sales_quotes_proposals.html (sample CSS L322-595) at ultra-HD fidelity. Literal hex values mirror the sample's :root tokens. ASCII-only comments (a non-ASCII char silently drops the rule from the CSSOM - the established L18.8 lesson). The detail + proposal modals REUSE the shipped .rk-modal / .rk-mod-scrim shells (Risk drill-in); only the board / live-totals builder / forecast bars / follow-up list / proposal-document CSS is genuinely new substrate. WRITES NOTHING. ════════════════════════════════════════════════════════════════════════════ */ /* two-column work area: pipeline board (left) + builder (right) */ #page-sales .sq-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; } @media (max-width: 1180px) { #page-sales .sq-grid { grid-template-columns: 1fr; } } #page-sales .sq-panel { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .sq-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-sales .sq-panel-h h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: .4px; color: #F0EBE2; font-weight: 700; margin: 0; } #page-sales .sq-panel-h .sq-hint { font-size: 11px; color: #8A857D; } #page-sales .sq-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 14px; } /* ----- pipeline board (kanban) ----- */ #page-sales .sq-board-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } #page-sales .sq-board-h h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: .4px; color: #F0EBE2; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 9px; } #page-sales .sq-board-h h3 .sq-glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg, rgba(201,168,76,0.24), rgba(201,168,76,0.08)); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } #page-sales .sq-board-h h3 .sq-glyph svg { width: 14px; height: 14px; stroke: #C9A84C; } #page-sales .sq-board-h .sq-count { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: #F0EBE2; background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.34); border-radius: 999px; padding: 3px 11px; letter-spacing: .03em; } #page-sales .sq-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; margin-top: 14px; align-items: start; } /* FIX_MOBILE_PERCOMPONENT_OVERFLOW_2026_08_02 — head-of-block for the three phone arms this build ships (this one, plus the arms on the pipeline filter chip row and on the marketing analytics table; all cited by symbol anchor, never by line number). MECHANISM: at 375px the shell is INNOCENT. .crm-content is already pinned at 375, proven three ways in the investigation behind this build — hiding the nav entirely is a no-op, align-items: stretch is a no-op, and the rail measures navW 0 because it is display:none below 720. Every over-375 pixel is a DESCENDANT escaping .crm-content, which is why each fix is per-component and none is page-level. Here the five tracks plus each grid item's default min-width:auto floor the columns at min-content, so the board measured 510px inside a 375px column and the document scrolled to 576. FORM: an ID-scoped max-width 720px media arm sited IMMEDIATELY AFTER its base rule, copying the shipped sales pipeline board precedent (symbol anchor: the sp-board rule head in this same stylesheet). A media block contributes ZERO specificity — this arm ties the base rule at (1,1,0) and wins only by later source order, which the siting is what guarantees. Never edit the base declaration: changing the five-track template there would fix 375px and break every desktop width. PROSE NOTE, deliberate: this comment spells the at-rule keyword and the neighbouring selectors WITHOUT their sigils, because the brief's row 0.8 / 0.9 verification is a brace-balanced scan that would otherwise start inside this comment and span a phantom block — reword the prose, never loosen the check. DO NOT complete the pattern by adding #page-sales, #page-marketing, #page-procurement or #page-intelligence to the .crm-layout collapse set that sets flex-direction to column. It is an ANTI-FIX on these four pages, measured: quotes 576 -> 592, pipeline 456 -> 472, analytics 665 -> 702. Once the container is a column, the flex-start cross-axis alignment on the shared .crm-layout base rule makes the horizontal axis the CROSS axis and .crm-content shrink-to-fits to a min-content larger than 375. The omission of these four pages from that set is load-bearing, not an oversight. */ /* FIX_MOBILE_PERCOMPONENT_OVERFLOW_2026_08_02 — arm 1 of 3: quote board, 576 -> 375. */ @media (max-width: 720px) { #page-sales .sq-board { grid-template-columns: 1fr; } } #page-sales .sq-bcol { background: rgba(255,255,255,0.014); border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; padding: 10px 9px 12px; min-height: 160px; display: flex; flex-direction: column; gap: 9px; transition: border-color .18s cubic-bezier(0.4,0,0.2,1), background .18s cubic-bezier(0.4,0,0.2,1); } #page-sales .sq-bcol.sq-drop { border-color: rgba(201,168,76,0.5); background: rgba(201,168,76,0.05); } #page-sales .sq-bcol-h { display: flex; align-items: center; justify-content: space-between; padding: 1px 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-sales .sq-bcol-h .sq-bh-l { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A857D; display: flex; align-items: center; gap: 6px; } #page-sales .sq-bcol-h .sq-bh-l i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; } #page-sales .sq-bcol-h .sq-bh-n { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11px; color: #F0EBE2; } #page-sales .sq-bcol-foot { margin-top: auto; padding-top: 7px; font-size: 9.5px; color: #8A857D; text-align: center; border-top: 1px dashed rgba(255,255,255,0.07); } #page-sales .sq-bcol-foot b { color: #C4BFB6; font-family: 'Montserrat', sans-serif; font-weight: 700; } #page-sales .sq-qcard { background: linear-gradient(168deg, #2a2723, #211e1b); border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; padding: 11px 11px 10px; cursor: grab; position: relative; overflow: hidden; box-shadow: 0 10px 24px -20px #000, inset 0 1px 0 rgba(255,255,255,0.05); transition: transform .16s cubic-bezier(0.4,0,0.2,1), box-shadow .16s cubic-bezier(0.4,0,0.2,1), border-color .16s cubic-bezier(0.4,0,0.2,1), opacity .16s cubic-bezier(0.4,0,0.2,1); } #page-sales .sq-qcard.sq-dragging { opacity: .45; cursor: grabbing; } #page-sales .sq-qcard .sq-qc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } #page-sales .sq-qcard .sq-qc-client { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; color: #F0EBE2; line-height: 1.25; } #page-sales .sq-qcard .sq-qc-kind { font-size: 9px; color: #8A857D; margin-top: 2px; letter-spacing: .02em; } #page-sales .sq-qcard .sq-qc-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: #F0EBE2; white-space: nowrap; } #page-sales .sq-qcard .sq-qc-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; } #page-sales .sq-qpill { font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.07); color: #8A857D; background: rgba(255,255,255,0.02); display: inline-flex; align-items: center; gap: 4px; } #page-sales .sq-qpill.sq-warn { color: #E8943A; border-color: rgba(232,148,58,0.4); background: rgba(232,148,58,0.1); } #page-sales .sq-qpill.sq-danger { color: #E05555; border-color: rgba(224,85,85,0.4); background: rgba(224,85,85,0.1); } #page-sales .sq-qpill.sq-good { color: #4CAF7D; border-color: rgba(76,175,125,0.4); background: rgba(76,175,125,0.1); } #page-sales .sq-qcard .sq-qc-next { font-size: 9.5px; color: #8A857D; margin-top: 8px; display: flex; align-items: center; gap: 5px; line-height: 1.35; } #page-sales .sq-qcard .sq-qc-next svg { width: 11px; height: 11px; stroke: #C9A84C; flex: none; opacity: .85; } #page-sales .sq-qcard .sq-qc-next b { color: #C4BFB6; font-weight: 600; } #page-sales .sq-board-tip { margin-top: 11px; font-size: 10px; color: #8A857D; display: flex; align-items: center; gap: 7px; } #page-sales .sq-board-tip svg { width: 12px; height: 12px; stroke: #C9A84C; opacity: .8; } /* ----- quote builder ----- */ #page-sales .sq-builder-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-sales .sq-builder-h h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: .4px; color: #F0EBE2; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 9px; } #page-sales .sq-builder-h h3 .sq-glyph-t { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg, rgba(63,182,168,0.24), rgba(63,182,168,0.08)); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } #page-sales .sq-builder-h h3 .sq-glyph-t svg { width: 14px; height: 14px; stroke: #3FB6A8; } #page-sales .sq-builder-h .sq-tag { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; padding: 3px 9px; } #page-sales .sq-qb-client { display: flex; align-items: center; gap: 11px; margin: 12px 0 14px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.018); } #page-sales .sq-qbc-ava { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: #16140F; background: linear-gradient(140deg, #C9A84C, #9c7f33); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); } #page-sales .sq-qbc-t b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #F0EBE2; line-height: 1.2; } #page-sales .sq-qbc-t span { font-size: 10.5px; color: #8A857D; } #page-sales .sq-qbc-sw { margin-left: auto; font-size: 9.5px; color: #C9A84C; font-weight: 600; border: 1px solid rgba(201,168,76,0.3); border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); } /* FIX_SALES_QUOTE_CREATE_S1_2026_09_05 (§3.1) -- New quote is the PRIMARY control (brief's own wording); margin-left:auto on THIS button (not sq-qbc-sw) claims the row's free space so the two controls sit together on the right, and the adjacent-sibling override below zeroes sq-qbc-sw's own auto margin so a second auto-margin claim cannot split them apart. */ #page-sales .sq-qbc-new { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: #16140F; background: linear-gradient(140deg, #C9A84C, #9c7f33); border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); } #page-sales .sq-qbc-new:hover { filter: brightness(1.08); } #page-sales .sq-qbc-t b[contenteditable]:focus { outline: 1px solid rgba(201,168,76,0.5); outline-offset: 2px; border-radius: 3px; } #page-sales .sq-lia-more { font-size: 10.5px; color: #8A857D; padding: 6px 2px; flex-basis: 100%; } /* FIX_SALES_QUOTE_CREATE_S1_2026_09_05 (§3.2) -- free-form add-line row. Text inputs reuse the .sq-li-inp look (left-aligned rather than the money-figure right-align that class ships with; overridden per-input class below) so the row reads as part of the same table, not a bolted-on form. */ #page-sales .sq-li-newrow { display: flex; gap: 7px; margin: 4px 0 6px; flex-wrap: wrap; align-items: center; } #page-sales .sq-li-newin { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 7px 9px; color: #F0EBE2; font-family: 'Open Sans', sans-serif; font-size: 12px; outline: none; transition: border-color .16s cubic-bezier(0.4,0,0.2,1); } #page-sales .sq-li-newin:focus { border-color: rgba(201,168,76,0.5); box-shadow: 0 0 0 2px rgba(201,168,76,0.14); } #page-sales .sq-li-newin::placeholder { color: #6E6961; } #page-sales .sq-li-newin-desc { flex: 1 1 160px; min-width: 120px; } #page-sales .sq-li-newin-s { width: 96px; } #page-sales .sq-li-newin-xs { width: 58px; text-align: right; font-variant-numeric: tabular-nums; } #page-sales .sq-li-newbtn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: #C9A84C; border: 1px dashed rgba(201,168,76,0.4); background: rgba(201,168,76,0.06); border-radius: 8px; padding: 8px 13px; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; } #page-sales .sq-li-newbtn:hover { background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.6); } #page-sales .sq-li-newerr { font-size: 11px; color: #E05555; min-height: 14px; margin: -2px 0 8px 2px; } /* FIX_SALES_QUOTE_CREATE_S1_2026_09_05 (§3.4) -- validity date row, right-aligned figure-style like every other .sq-tot-row value, native picker so the browser owns date-entry affordance. */ #page-sales .sq-valid-inp { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); border-radius: 7px; padding: 5px 8px; color: #F0EBE2; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; outline: none; color-scheme: dark; } #page-sales .sq-valid-inp:focus { border-color: rgba(201,168,76,0.5); box-shadow: 0 0 0 2px rgba(201,168,76,0.14); } #page-sales .sq-li-head { display: grid; grid-template-columns: 1fr 58px 78px 80px 26px; gap: 8px; padding: 0 4px 6px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; font-weight: 700; } #page-sales .sq-li-head .sq-r { text-align: right; } #page-sales .sq-li-row { display: grid; grid-template-columns: 1fr 58px 78px 80px 26px; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-sales .sq-li-name { font-size: 12px; color: #F0EBE2; font-weight: 600; } #page-sales .sq-li-name small { display: block; font-size: 9.5px; color: #8A857D; font-weight: 400; margin-top: 1px; } #page-sales .sq-li-inp { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 7px 8px; color: #F0EBE2; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; text-align: right; outline: none; transition: border-color .16s cubic-bezier(0.4,0,0.2,1), box-shadow .16s cubic-bezier(0.4,0,0.2,1); font-variant-numeric: tabular-nums; } #page-sales .sq-li-inp:focus { border-color: rgba(201,168,76,0.5); box-shadow: 0 0 0 2px rgba(201,168,76,0.14); } #page-sales .sq-li-amt { text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; color: #F0EBE2; } #page-sales .sq-li-del { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); color: #8A857D; cursor: pointer; display: grid; place-items: center; transition: .14s; justify-self: center; } #page-sales .sq-li-del:hover { color: #E05555; border-color: rgba(224,85,85,0.4); background: rgba(224,85,85,0.08); } #page-sales .sq-li-del svg { width: 13px; height: 13px; stroke: currentColor; } #page-sales .sq-li-add { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px; } #page-sales .sq-lia { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; color: #C4BFB6; border: 1px dashed rgba(255,255,255,0.13); background: rgba(255,255,255,0.02); border-radius: 9px; padding: 6px 11px; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); display: inline-flex; align-items: center; gap: 6px; } #page-sales .sq-lia svg { width: 12px; height: 12px; stroke: #C9A84C; } #page-sales .sq-lia:hover { border-color: rgba(201,168,76,0.5); color: #F0EBE2; background: rgba(201,168,76,0.06); } /* FIX_SQ_CATALOG_FIXTURE_GATE_2026_07_17 — honest-empty note that replaces the quick-add buttons when the account has no catalogue of its own. Sits in the same .sq-li-add row and reuses the buttons' own dashed affordance tokens, so the builder keeps its shape instead of collapsing to a gap. */ #page-sales .sq-lia-none { font-size: 11px; color: #8A857D; line-height: 1.5; border: 1px dashed rgba(255,255,255,0.13); background: rgba(255,255,255,0.02); border-radius: 9px; padding: 9px 12px; flex: 1; } #page-sales .sq-lia-none b { color: #C4BFB6; font-weight: 700; } #page-sales .sq-qb-totals { margin-top: 14px; padding: 14px 15px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.07); background: linear-gradient(168deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)); } #page-sales .sq-tot-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 5px 0; color: #C4BFB6; } #page-sales .sq-tot-row .sq-tl { color: #8A857D; display: flex; align-items: center; gap: 7px; } #page-sales .sq-tot-row .sq-tv { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 12.5px; } #page-sales .sq-tot-row.sq-disc .sq-tv { color: #4CAF7D; } #page-sales .sq-tot-row.sq-disc .sq-tl b { color: #C9A84C; font-weight: 700; } #page-sales .sq-tot-grand { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.13); } #page-sales .sq-tot-grand .sq-tg-l { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #8A857D; } #page-sales .sq-tot-grand .sq-tg-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 24px; color: #F0EBE2; } #page-sales .sq-tot-mo { font-size: 10px; color: #8A857D; text-align: right; margin-top: 3px; } #page-sales .sq-disc-link { font-size: 9.5px; color: #C9A84C; border-bottom: 1px dotted rgba(201,168,76,0.5); cursor: pointer; } #page-sales .sq-qb-actions { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; } #page-sales .sq-btn-g { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #16140F; background: linear-gradient(180deg, #C9A84C, #9c7f33); border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(201,168,76,0.55), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform .16s cubic-bezier(0.4,0,0.2,1), box-shadow .16s cubic-bezier(0.4,0,0.2,1); } #page-sales .sq-btn-g:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(201,168,76,0.7), inset 0 1px 0 rgba(255,255,255,0.3); } #page-sales .sq-btn-g svg { width: 14px; height: 14px; stroke: #16140F; stroke-width: 2.3; } #page-sales .sq-btn-o { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: #C4BFB6; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.13); border-radius: 10px; padding: 10px 15px; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .sq-btn-o:hover { background: rgba(255,255,255,0.09); color: #F0EBE2; border-color: #C9A84C; } #page-sales .sq-btn-o svg { width: 14px; height: 14px; stroke: currentColor; } #page-sales .sq-coming-pill { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 1px 6px; margin-left: 2px; } #page-sales .sq-counsel-cue { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(139,111,214,0.32); background: linear-gradient(168deg, rgba(139,111,214,0.1), rgba(139,111,214,0.03)); font-size: 10.5px; color: #C4BFB6; line-height: 1.45; } #page-sales .sq-counsel-cue .sq-cc-ic { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; background: rgba(139,111,214,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } #page-sales .sq-counsel-cue .sq-cc-ic svg { width: 13px; height: 13px; stroke: #a98fe6; } #page-sales .sq-counsel-cue b { color: #bfa9ef; font-weight: 700; } #page-sales .sq-det-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 9.5px; color: #8A857D; } #page-sales .sq-det-legend span { display: inline-flex; align-items: center; gap: 6px; } #page-sales .sq-det-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } /* ----- forecast contribution band ----- */ #page-sales .sq-fcrow { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; } @media (max-width: 1180px) { #page-sales .sq-fcrow { grid-template-columns: 1fr; } } #page-sales .sq-stage-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; } #page-sales .sq-sbar { display: grid; grid-template-columns: 120px 1fr 92px; gap: 11px; align-items: center; font-size: 11.5px; } #page-sales .sq-sbar .sq-sb-l { color: #C4BFB6; display: flex; align-items: center; gap: 8px; } #page-sales .sq-sbar .sq-sb-l i { width: 8px; height: 8px; border-radius: 2px; flex: none; } #page-sales .sq-sbar .sq-sb-l small { color: #8A857D; font-size: 9.5px; } #page-sales .sq-sbar .sq-sb-track { height: 13px; border-radius: 7px; background: rgba(255,255,255,0.05); overflow: hidden; position: relative; } #page-sales .sq-sbar .sq-sb-raw { position: absolute; inset: 0; width: var(--sq-raw, 0%); background: rgba(255,255,255,0.05); border-radius: 7px; transition: width 1s cubic-bezier(.2,.7,.2,1); } #page-sales .sq-sbar .sq-sb-wt { position: absolute; inset: 0; width: 0; border-radius: 7px; transition: width 1.1s cubic-bezier(.2,.7,.2,1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); } #page-sales .sq-sbar .sq-sb-v { text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #F0EBE2; } #page-sales .sq-sbar .sq-sb-v small { display: block; font-size: 9px; color: #8A857D; font-weight: 600; } #page-sales .sq-fc-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.13); } #page-sales .sq-fc-total .sq-fct-l { font-size: 11px; color: #8A857D; max-width: 58%; line-height: 1.4; } #page-sales .sq-fc-total .sq-fct-l b { color: #C4BFB6; font-weight: 600; } #page-sales .sq-fc-total .sq-fct-v { text-align: right; } #page-sales .sq-fc-total .sq-fct-v .sq-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 23px; color: #F0EBE2; line-height: 1; } #page-sales .sq-fc-total .sq-fct-v small { display: block; font-size: 9.5px; color: #8A857D; margin-top: 4px; } #page-sales .sq-fc-note { margin-top: 12px; font-size: 10px; color: #8A857D; display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; } #page-sales .sq-fc-note svg { width: 12px; height: 12px; stroke: #5B9BD5; flex: none; margin-top: 1px; opacity: .9; } #page-sales .sq-fc-note b { color: #C4BFB6; font-weight: 600; } /* ----- follow-up tie-in list ----- */ #page-sales .sq-fu-list { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; } #page-sales .sq-fu { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.016); transition: .16s cubic-bezier(0.4,0,0.2,1); cursor: pointer; position: relative; overflow: hidden; } #page-sales .sq-fu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--sq-fl, #E8943A); } #page-sales .sq-fu:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.13); transform: translateX(2px); } #page-sales .sq-fu.sq-danger { --sq-fl: #E05555; border-color: rgba(224,85,85,0.3); } #page-sales .sq-fu .sq-fu-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; } #page-sales .sq-fu .sq-fu-ic svg { width: 15px; height: 15px; } #page-sales .sq-fu-body { flex: 1; min-width: 0; } #page-sales .sq-fu-body .sq-fu-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: #F0EBE2; } #page-sales .sq-fu-body .sq-fu-d { font-size: 10.5px; color: #8A857D; margin-top: 2px; line-height: 1.4; } #page-sales .sq-fu-body .sq-fu-d b { color: #C4BFB6; font-weight: 600; } #page-sales .sq-fu .sq-fu-act { flex: none; } #page-sales .sq-fu .sq-fu-act .sq-fubtn { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 7px 13px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; transition: all .16s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .sq-fu .sq-fu-act .sq-fubtn:hover { background: rgba(255,255,255,0.09); color: #F0EBE2; transform: translateY(-1px); border-color: #C9A84C; } #page-sales .sq-fu-handoff { margin-top: 12px; font-size: 10px; color: #8A857D; display: flex; align-items: center; gap: 7px; line-height: 1.4; } #page-sales .sq-fu-handoff svg { width: 12px; height: 12px; stroke: #C9A84C; flex: none; opacity: .85; } #page-sales .sq-fu-handoff b { color: #C4BFB6; font-weight: 600; } #page-sales .sq-footnote { font-size: 10px; color: #8A857D; margin-top: 18px; text-align: center; opacity: .7; line-height: 1.6; } /* ----- proposal-preview document (inside the reused .rk-modal shell, wide variant) ----- */ #page-sales .sq-prop-doc { margin-top: 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden; background: linear-gradient(180deg, #211e1b, #1b1916); box-shadow: 0 30px 70px -40px #000; } #page-sales .sq-prop-cover { position: relative; padding: 24px 26px 22px; background: linear-gradient(150deg, rgba(201,168,76,0.16), rgba(201,168,76,0.03)); border-bottom: 1px solid rgba(255,255,255,0.07); overflow: hidden; } #page-sales .sq-prop-cover .sq-pc-from { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #C9A84C; font-weight: 700; font-family: 'Montserrat', sans-serif; } #page-sales .sq-prop-cover h2 { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 800; color: #F0EBE2; margin-top: 13px; letter-spacing: -.01em; line-height: 1.15; } #page-sales .sq-prop-cover .sq-pc-for { font-size: 12px; color: #C4BFB6; margin-top: 5px; } #page-sales .sq-prop-cover .sq-pc-for b { color: #F0EBE2; font-weight: 600; } #page-sales .sq-prop-cover .sq-pc-meta { display: flex; gap: 18px; margin-top: 15px; flex-wrap: wrap; } #page-sales .sq-prop-cover .sq-pc-meta div { font-size: 10px; color: #8A857D; } #page-sales .sq-prop-cover .sq-pc-meta div b { display: block; color: #F0EBE2; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; margin-top: 2px; } #page-sales .sq-prop-body { padding: 20px 26px 8px; } #page-sales .sq-prop-sec { margin-bottom: 20px; } #page-sales .sq-prop-sec .sq-ps-h { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #C9A84C; font-weight: 700; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; } #page-sales .sq-prop-sec .sq-ps-h .sq-ps-by { margin-left: auto; font-size: 8.5px; letter-spacing: .04em; text-transform: none; color: #8A857D; font-weight: 600; } #page-sales .sq-prop-sec .sq-ps-h .sq-ps-by.sq-det { color: #5B9BD5; } #page-sales .sq-prop-sec p { font-size: 12.5px; color: #C4BFB6; line-height: 1.6; } #page-sales .sq-prop-coming { font-size: 11.5px; color: #8A857D; line-height: 1.55; padding: 12px 14px; border-radius: 10px; border: 1px dashed rgba(201,168,76,0.3); background: rgba(201,168,76,0.04); } #page-sales .sq-prop-coming b { color: #C9A84C; font-weight: 700; } #page-sales .sq-prop-table { width: 100%; border-collapse: collapse; font-size: 12px; } #page-sales .sq-prop-table th { text-align: left; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; font-weight: 700; padding: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,0.13); } #page-sales .sq-prop-table th.sq-r, #page-sales .sq-prop-table td.sq-r { text-align: right; } #page-sales .sq-prop-table td { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); color: #C4BFB6; } #page-sales .sq-prop-table td .sq-pt-name { color: #F0EBE2; font-weight: 600; } #page-sales .sq-prop-table td .sq-pt-sub { font-size: 10px; color: #8A857D; margin-top: 1px; } #page-sales .sq-prop-table td.sq-r { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; } #page-sales .sq-prop-table tr.sq-pt-sum td { border-bottom: none; padding: 6px 0; color: #8A857D; } #page-sales .sq-prop-table tr.sq-pt-sum td.sq-r { color: #F0EBE2; font-weight: 700; } #page-sales .sq-prop-table tr.sq-pt-disc td.sq-r { color: #4CAF7D; } #page-sales .sq-prop-table tr.sq-pt-grand td { padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.13); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; color: #F0EBE2; } #page-sales .sq-prop-valid { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 13px; border-radius: 10px; border: 1px solid rgba(232,148,58,0.3); background: rgba(232,148,58,0.08); font-size: 11px; color: #E8943A; font-weight: 600; } #page-sales .sq-prop-valid svg { width: 14px; height: 14px; stroke: #E8943A; flex: none; } @media (prefers-reduced-motion: reduce) { #page-sales .sq-sbar .sq-sb-wt, #page-sales .sq-sbar .sq-sb-raw { transition: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ FIX_SALES_OFFERS_S1_2026_06_17 — Offers & Promotions drill-in styles, scoped under #page-sales. Built TO design_samples/sales/sales_offers_promotions.html (sample CSS L142-439) at ultra-HD fidelity, MIRROR of the Quotes (FIX_SALES_QUOTES_S1) CSS region. ASCII-only comments (a non-ASCII char silently drops the rule from the CSSOM - the L18.8 lesson). All classes are .so-* namespaced + scoped under #page-sales (the sample's bare .kpi/.panel/.modal/.seg generics would collide with the platform; the sample modal shells are REPLACED by the shipped .rk-mod-scrim/.rk-modal shells - only the inner content classes live here). Reuses .sa-head-row / .sa-statusline / .sa-when from the Sales landing region. */ #page-sales .so-sot { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 11px 16px; border-radius: 12px; background: linear-gradient(100deg, rgba(201,168,76,0.07), rgba(91,155,213,0.04)); border: 1px solid rgba(201,168,76,0.2); font-size: 11.5px; color: #C4BFB6; line-height: 1.45; } #page-sales .so-sot .so-sot-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg, rgba(201,168,76,0.22), rgba(201,168,76,0.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .so-sot .so-sot-ic svg { width: 16px; height: 16px; stroke: #C9A84C; } #page-sales .so-sot b { color: #F0EBE2; font-weight: 700; } #page-sales .so-sot .so-who-winback { color: #3FB6A8; font-weight: 700; } #page-sales .so-sot .so-who-pos { color: #C9A84C; font-weight: 700; } #page-sales .so-sot .so-who-pricing { color: #5B9BD5; font-weight: 700; } #page-sales .so-sot .so-who-retail { color: #E8943A; font-weight: 700; } #page-sales .so-sot .so-sot-tag { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C9A84C; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; padding: 3px 10px; flex: none; } /* KPI band - 4 tiles (the sample uses 4-col; reuse the .sa-kpi family from the landing but in a 4-col grid scoped to the Offers surface). The peek/modal hooks render but stay UNWIRED (S2). */ #page-sales .so-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 20px; } @media (max-width: 1180px) { #page-sales .so-kpis { grid-template-columns: repeat(2, 1fr); } } #page-sales .so-kpis .sa-kpi.so-k-live::before { background: #4CAF7D; } #page-sales .so-kpis .sa-kpi.so-k-redeem::before { background: #C9A84C; } #page-sales .so-kpis .sa-kpi.so-k-rev::before { background: #3FB6A8; } #page-sales .so-kpis .sa-kpi.so-k-roi::before { background: #5B9BD5; } /* FIX_DEMO_ROSTERBIND_OFFERSKPI_2026_08_06 (v1.25) -- Sales -> Offers: suppress the DEAD peek affordance. renderSalesOffers emits four __salesKpi tiles carrying role="button", an expand chevron and a hover-hint label, but it never calls __wireKpiSurface -- measured 0 calls across the renderSalesOffers span (function head to __swbDaysLapsed) against a live control of 5 __salesKpi calls in the same span, while renderSalesOverview does bind. So those controls render as interactive and nothing is wired to them. Copies the shipped sp-kpis precedent verbatim (siblings: sp-kpis, sf-kpis, scv-kpis). SUPPRESSION, NOT WIRING -- the peeks land in S2; do not edit __salesKpi, the shared emitter behind 31 call sites, which would change every Sales tile including the wired ones. Placement is settled by STRUCTURE, not line range: this block follows the base #page-sales .sa-kpi rules, and neither base rule declares display at all, so display:none at (1,3,0) has no competitor. Do not relocate the block. */ #page-sales .so-kpis .sa-kpi .sa-expand, #page-sales .so-kpis .sa-kpi .sa-hint-i { display: none; } /* board toolbar */ #page-sales .so-board-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } #page-sales .so-board-bar h2 { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #F0EBE2; } #page-sales .so-board-bar .so-bb-sub { font-size: 11.5px; color: #8A857D; } #page-sales .so-board-bar .so-spacer { margin-left: auto; } #page-sales .so-seg { display: inline-flex; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 3px; gap: 2px; } #page-sales .so-seg button { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #8A857D; background: transparent; border: none; border-radius: 8px; padding: 6px 13px; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); } #page-sales .so-seg button:hover { color: #C4BFB6; } #page-sales .so-seg button.on { background: linear-gradient(180deg, rgba(201,168,76,0.22), rgba(201,168,76,0.06)); color: #F0EBE2; box-shadow: inset 0 0 0 1px rgba(201,168,76,0.3); } #page-sales .so-new-offer { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700; color: #16140F; background: linear-gradient(180deg, #C9A84C, #9c7f33); border: none; border-radius: 10px; padding: 9px 16px; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(201,168,76,0.55), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform .16s cubic-bezier(0.4,0,0.2,1), box-shadow .16s cubic-bezier(0.4,0,0.2,1); } #page-sales .so-new-offer:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(201,168,76,0.7), inset 0 1px 0 rgba(255,255,255,0.3); } #page-sales .so-new-offer svg { width: 15px; height: 15px; stroke: #16140F; stroke-width: 2.6; } /* offers board - status groups */ #page-sales .so-group { margin-bottom: 22px; } #page-sales .so-group.so-hidden { display: none; } #page-sales .so-sg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } #page-sales .so-sg-head .so-sg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } #page-sales .so-sg-head.so-s-live .so-sg-dot { background: #4CAF7D; box-shadow: 0 0 9px #4CAF7D; } #page-sales .so-sg-head.so-s-sched .so-sg-dot { background: #5B9BD5; box-shadow: 0 0 9px rgba(91,155,213,0.6); } #page-sales .so-sg-head.so-s-ended .so-sg-dot { background: #8A857D; } #page-sales .so-sg-head h3 { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; } #page-sales .so-sg-head .so-sg-count { font-size: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #8A857D; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 2px 9px; } #page-sales .so-sg-head .so-sg-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.07), transparent); } #page-sales .so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; } /* offer card */ #page-sales .so-card { position: relative; overflow: hidden; cursor: pointer; background: linear-gradient(168deg, #262320, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 16px 17px 15px; box-shadow: 0 18px 40px -32px #000, inset 0 1px 0 rgba(255,255,255,0.05); transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; } #page-sales .so-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--so-accent, #C9A84C); opacity: .7; } #page-sales .so-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.13); box-shadow: 0 26px 52px -28px #000, 0 0 0 1px rgba(201,168,76,0.14), 0 0 28px -12px rgba(201,168,76,0.4); } #page-sales .so-card.so-ended { opacity: .78; } #page-sales .so-card.so-ended:hover { opacity: 1; } #page-sales .so-oc-top { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; } #page-sales .so-oc-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .so-oc-ic svg { width: 18px; height: 18px; } #page-sales .so-oc-tt { flex: 1; min-width: 0; } #page-sales .so-oc-tt h4 { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 700; color: #F0EBE2; line-height: 1.2; letter-spacing: -.005em; } #page-sales .so-oc-type { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 9.5px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; } #page-sales .so-otype-trial { color: #E8943A; background: rgba(232,148,58,0.13); border: 1px solid rgba(232,148,58,0.3); } #page-sales .so-otype-referral { color: #3FB6A8; background: rgba(63,182,168,0.13); border: 1px solid rgba(63,182,168,0.32); } #page-sales .so-otype-member { color: #C9A84C; background: rgba(201,168,76,0.13); border: 1px solid rgba(201,168,76,0.32); } #page-sales .so-otype-bundle { color: #5B9BD5; background: rgba(91,155,213,0.13); border: 1px solid rgba(91,155,213,0.3); } #page-sales .so-otype-winback { color: #a98fe6; background: rgba(139,111,214,0.15); border: 1px solid rgba(139,111,214,0.34); } #page-sales .so-otype-seasonal { color: #4CAF7D; background: rgba(76,175,125,0.13); border: 1px solid rgba(76,175,125,0.3); } #page-sales .so-otype-unknown { color: #8A857D; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } /* FIX_OFFERS_TYPEMETA_GUARD_2026_09_09 -- mirrors .so-ocs-ended's existing muted tokens verbatim; no new colour literal. */ #page-sales .so-oc-status { font-size: 8.5px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 7px; flex: none; } #page-sales .so-ocs-live { color: #4CAF7D; background: rgba(76,175,125,0.14); border: 1px solid rgba(76,175,125,0.34); } #page-sales .so-ocs-sched { color: #5B9BD5; background: rgba(91,155,213,0.14); border: 1px solid rgba(91,155,213,0.32); } #page-sales .so-ocs-ended { color: #8A857D; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } /* FIX_OFFERS_LIFECYCLE_2026_09_08 (build_offers_s2f_lifecycle_draft_brief.md §3.F.5) -- the Draft pill. Colour token reused verbatim from .so-otype-trial immediately above (this file's own existing "in progress / not yet committed" amber), rather than a new colour literal. */ #page-sales .so-ocs-draft { color: #E8943A; background: rgba(232,148,58,0.14); border: 1px solid rgba(232,148,58,0.32); } /* FIX_OFFERS_LIFECYCLE_2026_09_08 (build_offers_s2f_lifecycle_draft_brief.md §3.F.3) -- the card's own Duplicate control. Sized/positioned to sit beside .so-oc-status inside .so-oc-top (flex row, gap already set there) without disturbing that row's existing three children; colour tokens reused verbatim from .so-oc-mrow's own muted palette immediately below, no new colour literal introduced. */ #page-sales .so-oc-dupbtn { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); color: #8A857D; cursor: pointer; padding: 0; transition: border-color .15s, color .15s, background .15s; } #page-sales .so-oc-dupbtn svg { width: 12px; height: 12px; stroke: currentColor; } #page-sales .so-oc-dupbtn:hover { border-color: rgba(201,168,76,0.32); color: #C9A84C; background: rgba(201,168,76,0.08); } #page-sales .so-oc-mech { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; color: #F0EBE2; line-height: 1.25; margin: 2px 0 10px; letter-spacing: -.01em; } #page-sales .so-oc-mech .so-ded { color: #C9A84C; } #page-sales .so-oc-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; } #page-sales .so-oc-mrow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #C4BFB6; } #page-sales .so-oc-mrow svg { width: 12px; height: 12px; stroke: #8A857D; flex: none; } #page-sales .so-oc-mrow .so-ml { color: #8A857D; width: 54px; flex: none; } #page-sales .so-oc-mrow b { color: #F0EBE2; font-weight: 600; } #page-sales .so-oc-perf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 11px 0 12px; border-top: 1px solid rgba(255,255,255,0.07); margin-top: auto; } #page-sales .so-ocp { text-align: center; } #page-sales .so-ocp .so-ocp-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; color: #F0EBE2; line-height: 1; } #page-sales .so-ocp .so-ocp-l { font-size: 8.5px; letter-spacing: .6px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-top: 4px; } #page-sales .so-ocp.so-roi .so-ocp-v.so-good { color: #4CAF7D; } #page-sales .so-ocp.so-roi .so-ocp-v.so-weak { color: #E05555; } #page-sales .so-oc-sched-note { padding: 11px 0 12px; border-top: 1px solid rgba(255,255,255,0.07); margin-top: auto; font-size: 11px; color: #5B9BD5; display: flex; align-items: center; gap: 8px; } #page-sales .so-oc-sched-note svg { width: 13px; height: 13px; stroke: #5B9BD5; flex: none; } #page-sales .so-oc-used { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-top: 11px; border-top: 1px dashed rgba(201,168,76,0.22); } #page-sales .so-oc-used .so-used-lbl { font-size: 8.5px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; } #page-sales .so-uchip { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-family: 'Montserrat', sans-serif; font-weight: 700; border-radius: 7px; padding: 3px 8px; letter-spacing: .01em; } #page-sales .so-uchip svg { width: 10px; height: 10px; flex: none; } #page-sales .so-uchip.so-u-winback { color: #3FB6A8; background: rgba(63,182,168,0.1); border: 1px solid rgba(63,182,168,0.28); } #page-sales .so-uchip.so-u-winback svg { stroke: #3FB6A8; } #page-sales .so-uchip.so-u-pos { color: #C9A84C; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.28); } #page-sales .so-uchip.so-u-pos svg { stroke: #C9A84C; } #page-sales .so-uchip.so-u-pricing { color: #5B9BD5; background: rgba(91,155,213,0.1); border: 1px solid rgba(91,155,213,0.28); } #page-sales .so-uchip.so-u-pricing svg { stroke: #5B9BD5; } #page-sales .so-uchip.so-u-retail { color: #E8943A; background: rgba(232,148,58,0.1); border: 1px solid rgba(232,148,58,0.28); } #page-sales .so-uchip.so-u-retail svg { stroke: #E8943A; } #page-sales .so-oc-casl { margin-top: 9px; font-size: 9.5px; color: #5B9BD5; display: flex; align-items: center; gap: 6px; line-height: 1.35; } #page-sales .so-oc-casl svg { width: 12px; height: 12px; stroke: #5B9BD5; flex: none; } #page-sales .so-oc-casl b { font-weight: 700; } /* attribution / performance rank panel */ #page-sales .so-panel { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); margin-top: 8px; } #page-sales .so-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-sales .so-panel-h h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: .4px; color: #F0EBE2; font-weight: 700; } #page-sales .so-panel-h .so-hint { font-size: 11px; color: #8A857D; } #page-sales .so-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 16px; } #page-sales .so-rank { display: flex; flex-direction: column; gap: 10px; } #page-sales .so-rrow { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); transition: .16s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; } #page-sales .so-rrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--so-rk, #C9A84C); } #page-sales .so-rrow:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.13); } #page-sales .so-rrow.so-weak { border-color: rgba(224,85,85,0.3); background: linear-gradient(100deg, rgba(224,85,85,0.07), rgba(255,255,255,0.018) 50%); } #page-sales .so-rrow.so-weak::before { background: #E05555; } #page-sales .so-rrow .so-rk-no { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: #8A857D; width: 16px; text-align: center; flex: none; } #page-sales .so-rrow .so-rk-body { flex: 1; min-width: 0; } #page-sales .so-rk-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } #page-sales .so-rk-top .so-rk-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; } #page-sales .so-rk-top .so-rk-tag { font-size: 9px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A857D; } #page-sales .so-rk-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 7px; max-width: 340px; } #page-sales .so-rk-bar i { display: block; height: 100%; border-radius: 4px; width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); } #page-sales .so-rrow .so-rk-fig { text-align: right; flex: none; min-width: 96px; } #page-sales .so-rrow .so-rk-fig .so-rf-rev { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: #F0EBE2; } #page-sales .so-rrow .so-rk-fig .so-rf-roi { font-size: 10px; color: #8A857D; margin-top: 2px; } #page-sales .so-rrow .so-rk-fig .so-rf-roi b.so-good { color: #4CAF7D; } #page-sales .so-rrow .so-rk-fig .so-rf-roi b.so-weak { color: #E05555; } #page-sales .so-rrow .so-rk-flag { font-size: 9px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #E05555; background: rgba(224,85,85,0.13); border: 1px solid rgba(224,85,85,0.32); border-radius: 7px; padding: 3px 8px; flex: none; } #page-sales .so-footnote { font-size: 10px; color: #8A857D; margin-top: 20px; text-align: center; opacity: .7; line-height: 1.5; } /* offer-detail modal inner content (the .rk-modal shell is shipped; these are the body classes) */ #page-sales .so-mod-mech { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16px; color: #F0EBE2; background: rgba(201,168,76,0.07); border: 1px solid rgba(201,168,76,0.22); border-radius: 12px; padding: 13px 15px; margin-bottom: 16px; line-height: 1.4; } #page-sales .so-mod-mech .so-ded { color: #C9A84C; } #page-sales .so-mod-mech .so-mm-narr { display: block; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; color: #C4BFB6; margin-top: 7px; line-height: 1.5; } #page-sales .so-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; } @media (max-width: 640px) { #page-sales .so-statgrid { grid-template-columns: repeat(2, 1fr); } } #page-sales .so-mstat { background: rgba(255,255,255,0.022); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 13px 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .so-mstat .so-ms-l { font-size: 9px; letter-spacing: .8px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 6px; } #page-sales .so-mstat .so-ms-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: #F0EBE2; line-height: 1; } #page-sales .so-mstat .so-ms-d { font-size: 10px; color: #8A857D; margin-top: 5px; } #page-sales .so-mod-sec-h { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin: 6px 0 11px; font-family: 'Montserrat', sans-serif; } #page-sales .so-detgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; margin-bottom: 18px; } #page-sales .so-mdet { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 12px; } #page-sales .so-mdet .so-md-l { color: #8A857D; } #page-sales .so-mdet .so-md-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 12px; text-align: right; } #page-sales .so-mod-used { background: linear-gradient(100deg, rgba(201,168,76,0.06), rgba(91,155,213,0.03)); border: 1px solid rgba(201,168,76,0.2); border-radius: 14px; padding: 15px 16px; margin-bottom: 16px; } #page-sales .so-mod-used h5 { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #C9A84C; font-family: 'Montserrat', sans-serif; font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; } #page-sales .so-mod-used h5 svg { width: 14px; height: 14px; stroke: #C9A84C; } #page-sales .so-mod-used .so-mu-sub { font-size: 11px; color: #8A857D; margin-bottom: 12px; line-height: 1.45; } #page-sales .so-mu-list { display: flex; flex-direction: column; gap: 9px; } #page-sales .so-mu-row { display: flex; align-items: center; gap: 11px; font-size: 11.5px; } #page-sales .so-mu-row .so-mu-ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; padding: 0; } #page-sales .so-mu-row .so-mu-ic svg { width: 14px; height: 14px; } #page-sales .so-mu-row .so-mu-ic.so-u-winback { background: rgba(63,182,168,0.12); } #page-sales .so-mu-row .so-mu-ic.so-u-winback svg { stroke: #3FB6A8; } #page-sales .so-mu-row .so-mu-ic.so-u-pos { background: rgba(201,168,76,0.12); } #page-sales .so-mu-row .so-mu-ic.so-u-pos svg { stroke: #C9A84C; } #page-sales .so-mu-row .so-mu-ic.so-u-pricing { background: rgba(91,155,213,0.12); } #page-sales .so-mu-row .so-mu-ic.so-u-pricing svg { stroke: #5B9BD5; } #page-sales .so-mu-row .so-mu-ic.so-u-retail { background: rgba(232,148,58,0.12); } #page-sales .so-mu-row .so-mu-ic.so-u-retail svg { stroke: #E8943A; } #page-sales .so-mu-row .so-mu-txt { flex: 1; min-width: 0; } #page-sales .so-mu-row .so-mu-txt b { color: #F0EBE2; font-weight: 700; } #page-sales .so-mu-row .so-mu-txt span { color: #8A857D; display: block; font-size: 10.5px; margin-top: 1px; } #page-sales .so-mu-row .so-mu-state { font-size: 9px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4CAF7D; background: rgba(76,175,125,0.12); border: 1px solid rgba(76,175,125,0.3); border-radius: 999px; padding: 3px 9px; flex: none; } #page-sales .so-mod-bars { display: flex; flex-direction: column; gap: 11px; } #page-sales .so-mbar { display: flex; align-items: center; gap: 12px; font-size: 12px; } #page-sales .so-mbar .so-mb-l { width: 120px; color: #C4BFB6; flex: none; } #page-sales .so-mbar .so-mb-track { flex: 1; height: 11px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; } #page-sales .so-mbar .so-mb-track i { display: block; height: 100%; border-radius: 6px; width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); } #page-sales .so-mbar .so-mb-v { width: 54px; text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 12.5px; } /* FIX_SALES_OFFERS_REV_S1_2026_09_05 -- standalone full-page editor host (§3.1), replacing the retired .rk-modal shell. Mirrors the shipped .vnc-back / .vnc-wrap breadcrumb-back convention (symbol anchor: .vnc-back) rather than inventing a second one. */ /* FIX_OFFERS_ELIG_RULES_2026_09_08 — §3.9, THE FOUNDER'S FULL-WIDTH DIRECTIVE, verbatim: "also make it fit the page (full width)". RETIRED: a single hardcoded `max-width: 900px` cap on this card, so the form occupied roughly the left 900px of a ~1,680px content area and the right third sat empty. That cap had NO basis in the design sample — the sample's own content shell is `.content-inner { max-width: none; ... }` and its composer is a MODAL, which S1 deliberately superseded with this standalone full-page card; the 900px literal was introduced by that conversion and never justified. REPLACED BY THE SHIPPED FULL-PAGE EDITOR-CARD IDIOM, not by a new number: symbol anchor `#page-operations .inv-editor-page`, whose own declarations read `width: 100%; max-width: none;`. ⛔ NO PX LITERAL IN EITHER DIRECTION — the card takes the width its host gives it. ⛔ Applies to Create AND Edit BY CONSTRUCTION, not by two edits: this class has exactly ONE CSS rule (here) and ONE emission site, so both dispositions of the composer are the same element under the same rule. That is the §0 A9 row's whole purpose. ⚠ A9 pins a RAW occurrence count at exact 2, and this comment block would have made it 3 by naming the class in prose — the citation-inflation shape, where a build's own required FIX comment breaks the invariant the brief pinned. The sentence above is phrased to state the SITE count (1 rule + 1 emission, both still true and both what A9 actually means) without re-emitting the raw token. ⛔ That is a correction of a claim this comment itself falsified, NOT a reword to make a number land: the retired sentence asserted "occurs exactly twice in this file", which its own presence made FALSE the moment it was written. The row's FORM is still the defect — an `exact` raw count on a symbol the FIX discipline requires citing is unsatisfiable by construction — and it is surfaced to Lane E rather than re-pinned here. ⚠ `max-width` is NOT an inherited property, so no descendant's typography changes as a consequence of this rule; the §5 expected-unchanged neighbours are measured on their own declaring rules against the base build, never predicted from the fact that those blocks were untouched. ⛔ OUT OF SCOPE HERE: the `.so-fld-row` two-column grid and every field's own width are NOT re-authored. If a field reads badly at 1920 that is a finding to surface, not a licence to redesign the form inside a brief about eligibility. */ #page-sales .so-editor-page { width: 100%; max-width: none; } /* FIX_OFFERS_ELIG_RULES_2026_09_08 — §3.4 the eligibility rule builder's own layout. Copies the shipped `.so-fld-row` grid idiom (symbol anchor, immediately below) rather than inventing a second row system; the fourth `auto` track is the remove control, which must not stretch. Every control inside inherits the existing `#page-sales .so-fld input[type=text], #page-sales .so-fld select` styling because the rows live INSIDE a `.so-fld`, which is exactly why the value inputs are type=text. */ #page-sales .so-elig-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; } #page-sales .so-elig-row select, #page-sales .so-elig-row input[type=text] { width: 100%; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.13); border-radius: 10px; color: #F0EBE2; font-family: 'Open Sans', sans-serif; font-size: 12.5px; padding: 10px 12px; transition: .16s cubic-bezier(0.4,0,0.2,1); } #page-sales .so-elig-row select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } #page-sales .so-elig-row select:focus, #page-sales .so-elig-row input:focus { outline: none; border-color: rgba(201,168,76,0.5); background: rgba(0,0,0,0.34); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); } #page-sales .so-elig-row select:disabled, #page-sales .so-elig-row input:disabled { opacity: .45; cursor: not-allowed; } #page-sales .so-elig-rm { background: none; border: 1px solid rgba(255,255,255,0.13); border-radius: 9px; color: #8A857D; font-size: 15px; line-height: 1; width: 34px; height: 34px; cursor: pointer; transition: .14s; } #page-sales .so-elig-rm:hover { color: var(--red); border-color: rgba(224,85,85,0.45); } #page-sales .so-elig-add { background: none; border: 1px dashed rgba(255,255,255,0.16); border-radius: 10px; color: #C9A84C; font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; padding: 9px 14px; cursor: pointer; transition: .14s; } #page-sales .so-elig-add:hover { border-color: rgba(201,168,76,0.5); background: rgba(201,168,76,0.06); } #page-sales .so-elig-none { font-size: 11.5px; color: #8A857D; padding: 2px 0 10px; } #page-sales .so-elig-sum { font-size: 11.5px; color: #C4BFB6; margin-top: 6px; } #page-sales .so-editor-back { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: #8A857D; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 2px; margin-bottom: 10px; transition: color .12s; } #page-sales .so-editor-back:hover { color: #C9A84C; } #page-sales .so-editor-back svg { width: 15px; height: 15px; } /* create-offer composer inner content (now the full-page card body, formerly the .rk-modal body) */ #page-sales .so-cmp-head { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; padding-right: 0; } #page-sales .so-cmp-head .so-ch-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg, rgba(201,168,76,0.22), rgba(201,168,76,0.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-sales .so-cmp-head .so-ch-ic svg { width: 20px; height: 20px; stroke: #C9A84C; } #page-sales .so-cmp-head h3 { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #F0EBE2; } #page-sales .so-cmp-head .so-ch-sub { font-size: 11px; color: #8A857D; margin-top: 2px; } #page-sales .so-cmp-body { margin-top: 16px; } #page-sales .so-fld { margin-bottom: 16px; } #page-sales .so-fld .so-fl-l { font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: #8A857D; font-weight: 700; font-family: 'Montserrat', sans-serif; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } #page-sales .so-fld .so-fl-l .so-req { color: #C9A84C; } #page-sales .so-fld input[type=text], #page-sales .so-fld select { width: 100%; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.13); border-radius: 10px; color: #F0EBE2; font-family: 'Open Sans', sans-serif; font-size: 12.5px; padding: 10px 12px; transition: .16s cubic-bezier(0.4,0,0.2,1); } #page-sales .so-fld input:focus, #page-sales .so-fld select:focus { outline: none; border-color: rgba(201,168,76,0.5); background: rgba(0,0,0,0.34); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); } #page-sales .so-fld select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } /* The OPEN dropdown popup was near-white-on-white. The rule above sets color:#F0EBE2 on the CLOSED control, which is readable because the composer modal (.rk-modal) is dark — but this surface had NO element-`option` rule at all, so the native popup inherited that near-white colour over the OS's own light popup background. The text inputs were unaffected, which is exactly the reported symptom: the two