/* FIX_MARKETING_SURFACE_REAL_2026_07_21 — end REAL Marketing write-surface CSS. */ /* ═══════════════════════════════════════════════════════════════════════════ FIX_ULTRAMARATHON_PROCUREMENT_2026_06_19 — Procurement Command Centre scoped CSS. ULTRAMARATHON surface 2, ported from design_samples/procurement/procurement_landing_command.html (.kpis / .panel / leverage-map SVG / att / popover / donut / gauge idiom) and SCOPED under #page-procurement so it cannot leak into the shipped specialist surfaces. The shell tokens (--gold/--page/--card/--border/--green/--amber/--red/--blue/--text/--dim/ --head/--inner-hi/--ease) are inherited from the portal :root — NOT re-declared. Everything renders HONEST-EMPTY by default (the procurement engine does not exist yet): the leverage-map keeps its axes + quadrant zones + legend with ZERO bubbles (structured-empty CHART, refinement 1), the donut/gauge popovers keep their ring/arc STRUCTURE with no values (refinement 1), the KPI band renders all six tiles "-" and the needs-attention panel renders its 5-row list shape as empty skeletons (refinement 2). Action affordances carry a .proc-coming disabled treatment (HONEST-COMING, never wired to fire). ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM — the established .crm-layout hazard). */ /* FIX_APPSHELL_COLLAPSE_S2C_2026_06_19 - content-offset uniformity: DELETE the legacy procurement-id-scoped crm-content padding:0 override (it zeroed the shared rail-budget offset -> content-start 0); the outer crm-content/vdd-page-railed now supplies the horizontal inset like sales. Inner proc-scroll keeps ONLY vertical rhythm (horizontal dropped) so the restored outer offset is not doubled. Procurement now inherits the shared viq-app-shell vdd-page-railed offset (76 after the -28 content-frame bleed, see L19944). ASCII-only. */ #page-procurement .proc-scroll { padding: 18px 0 26px; } /* header block */ #page-procurement .proc-head-row { display: flex; align-items: flex-end; gap: 16px; } #page-procurement .proc-head-row .proc-when { font-size: 11.5px; color: var(--text-dim); padding-bottom: 2px; } #page-procurement .proc-statusline { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; font-size: 13.5px; color: var(--text); } #page-procurement .proc-statusline .proc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); flex: none; } /* KPI band — 6 tiles */ #page-procurement .proc-kpis { display: grid; grid-template-columns: repeat(6,1fr); gap: 13px; margin-bottom: 18px; } #page-procurement .proc-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg,#262320,#1f1c19); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, var(--inner-hi); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); cursor: pointer; outline: none; } #page-procurement .proc-kpi:hover, #page-procurement .proc-kpi:focus-visible { transform: translateY(-3px); border-color: rgba(255,255,255,0.13); box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.14), 0 0 26px -12px rgba(201,168,76,0.45); } #page-procurement .proc-kpi .proc-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 7px; } #page-procurement .proc-kpi .proc-val { font-family: 'Montserrat', sans-serif; font-size: 23px; font-weight: 800; color: var(--text-bright); line-height: 1; font-variant-numeric: tabular-nums; } #page-procurement .proc-kpi .proc-val.empty { color: var(--text-dim); } #page-procurement .proc-kpi .proc-sub { font-size: 11px; margin-top: 7px; color: var(--text-dim); } #page-procurement .proc-kpi .proc-expand { position: absolute; right: 11px; bottom: 11px; width: 16px; height: 16px; opacity: .4; transition: opacity .2s var(--ease), transform .2s var(--ease); } #page-procurement .proc-kpi:hover .proc-expand, #page-procurement .proc-kpi:focus-visible .proc-expand { opacity: .85; } #page-procurement .proc-kpi.open .proc-expand { opacity: 1; transform: rotate(180deg); } #page-procurement .vk .kpi.open .k-chev { opacity: 1; transform: rotate(180deg); } /* leverage-map hero + attention layout */ #page-procurement .proc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; } #page-procurement .proc-panel { background: linear-gradient(170deg,#252220,#1e1b19); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, var(--inner-hi); } #page-procurement .proc-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-procurement .proc-panel-h .proc-hint { font-size: 11px; color: var(--text-dim); } /* FIX_VENDOR_TERM_UNIFY_2026_07_21 — inline "+ Add vendor" button on the Procurement Vendors directory (header + cold-start head-row). */ #page-procurement .proc-sup-add-btn { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; border-radius: 9px; padding: 8px 14px; cursor: pointer; white-space: nowrap; color: var(--gold); background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.45); } #page-procurement .proc-panel-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 14px; } /* ── supplier leverage map (structured-empty CHART, refinement 1) ── FIX_PROCUREMENT_LANDING_VENDOR_2026_06_29 — the larger key-visual: the wrap now flex-fills the panel and the svg goes min-height 520px / flex (was a fixed 360px), matching the correct sample (procurement_landing_command.html .lev-wrap L189 / #levSvg L190). STILL ZERO bubbles (honest-empty); only the graphic is taller. */ #page-procurement .proc-lev-panel { display: flex; flex-direction: column; min-height: 0; } #page-procurement .proc-lev-wrap { position: relative; padding: 6px 2px 2px; flex: 1; display: flex; flex-direction: column; min-height: 0; } #page-procurement .proc-lev-svg { width: 100%; height: 100%; min-height: 520px; flex: 1; display: block; overflow: visible; } /* honest empty caption overlaid on the kept plot frame (no supplier bubbles yet). FIX_PROC_OVERVIEW_RETIRE_INERT_2026_08_01 - the two legacy empty-state rules (the retired .proc-lev- prefixed pair) are replaced by the sample's kit rules below, in the SAME edit as the emission change (symbol anchor: function renderProcurementOverview) - the kit ships ZERO .lev-empty / .le-ic rules, so retiring without adding would turn an invisible no-op into a visible collapse. The retired "font-size:22px" sized the legacy EMOJI and cannot constrain the the port swapped in - hence the measured 137x137px icon; .le-ic below gives it an explicit 34x34 box. */ #page-procurement .vk .lev-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 74%; text-align: center; font-size: 11.5px; color: var(--mut); line-height: 1.5; padding: 14px 16px; border-radius: var(--r-md); background: rgba(16,14,12,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid var(--line); } #page-procurement .vk .lev-empty .le-ic { width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--blue-rgb),0.12); } #page-procurement .proc-lev-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap; align-items: center; } #page-procurement .proc-lev-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } #page-procurement .proc-lev-legend .sw-b { display: inline-block; border-radius: 50%; background: rgba(201,168,76,0.32); border: 1px solid rgba(201,168,76,0.6); } #page-procurement .proc-lev-legend .sw-b1 { width: 6px; height: 6px; } #page-procurement .proc-lev-legend .sw-b2 { width: 9px; height: 9px; } #page-procurement .proc-lev-legend .sw-b3 { width: 13px; height: 13px; } /* needs-attention — 5-row list shape preserved as empty skeletons (refinement 2) */ #page-procurement .proc-att-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #page-procurement .proc-att-head h3 .glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg,rgba(232,148,58,0.24),rgba(201,168,76,0.10)); display: grid; place-items: center; } #page-procurement .proc-att-head .proc-count { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; letter-spacing: .03em; } #page-procurement .proc-att-list { display: flex; flex-direction: column; gap: 9px; } /* empty/coming row-skeleton — preserves the list row shape (rank slot + icon slot + body lines + action slot) */ #page-procurement .proc-att-skel { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.012); border: 1px dashed var(--border); position: relative; overflow: hidden; } #page-procurement .proc-att-skel .proc-skel-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: var(--text-dim); opacity: .45; width: 16px; text-align: center; flex: none; } #page-procurement .proc-att-skel .proc-skel-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border); } #page-procurement .proc-att-skel .proc-skel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } #page-procurement .proc-att-skel .proc-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-att-skel .proc-skel-line.w1 { width: 62%; } #page-procurement .proc-att-skel .proc-skel-line.w2 { width: 84%; } #page-procurement .proc-att-skel .proc-skel-act { flex: none; } #page-procurement .proc-att-empty-note { margin-top: 13px; } /* FIX_PROC_OPS_S6A_OVERVIEW_2026_07_05 — LIVE needs-attention row (real derived content). Mirrors the sample's .att row geometry (rank + icon + body[title/amt + desc] + action), reusing the .proc-att-list flex column. Action affordance stays HONEST-COMING (.proc-coming .proc-act-btn) — display-only, never wired. */ #page-procurement .proc-att-live { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); position: relative; overflow: hidden; } #page-procurement .proc-att-live .proc-al-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: var(--text-dim); width: 16px; text-align: center; flex: none; } #page-procurement .proc-att-live .proc-al-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(232,148,58,0.14); } #page-procurement .proc-att-live.att-red .proc-al-ico { background: rgba(224,85,85,0.14); } #page-procurement .proc-att-live.att-blue .proc-al-ico { background: rgba(91,155,213,0.14); } #page-procurement .proc-att-live .proc-al-body { flex: 1; min-width: 0; } #page-procurement .proc-att-live .proc-al-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } #page-procurement .proc-att-live .proc-al-tt { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--text-bright); } #page-procurement .proc-att-live .proc-al-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11.5px; color: var(--text-dim); } #page-procurement .proc-att-live .proc-al-desc { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; } #page-procurement .proc-att-live .proc-al-act { flex: none; } /* honest-empty state (shared) */ #page-procurement .proc-empty { border: 1px dashed var(--border); border-radius: 12px; padding: 22px 18px; text-align: center; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; background: rgba(255,255,255,0.012); } #page-procurement .proc-empty .proc-empty-ic { font-size: 22px; opacity: .55; margin-bottom: 8px; } /* HONEST-COMING action affordance — visibly present, disabled, never wired */ #page-procurement .proc-coming { position: relative; cursor: not-allowed; opacity: .62; } #page-procurement .proc-coming-tag { display: inline-flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.32); border-radius: 999px; padding: 2px 8px; } #page-procurement .proc-act-btn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; border-radius: 8px; padding: 7px 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-dim); cursor: not-allowed; opacity: .62; white-space: nowrap; } /* FIX_PO_DISCOVER_WIRING_2026_07_04 — "+ Create PO" is now WIRED (proc-coming dropped); restore the enabled affordance the shared .proc-act-btn base still forces to disabled. Scoped to the one wired button so other honest-coming .proc-act-btn uses keep their disabled treatment. */ /* FIX_PO_CREATE_CTA_COLOR_2026_07_12 — the cursor/opacity-only override still inherited the muted .proc-act-btn color/background/border, so the wired button read as greyed/disabled ("can't create a PO"). Complete the enabled affordance with a gold-accent CTA treatment (gold text + gold-tinted fill + gold border) coherent with the procurement surface's gold idiom (cf. .proc-coming-tag / --gold). Still scoped to the one wired id-override; base .proc-act-btn disabled treatment unchanged. */ #page-procurement #proc-po-create { cursor: pointer; opacity: 1; color: var(--gold); background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.45); } #page-procurement #proc-po-create:hover { background: rgba(201,168,76,0.22); border-color: rgba(201,168,76,0.6); } /* FIX_PROC_EASYWINS_S1_2026_07_15 — "Draft PO" on a Procurement-Intelligence recommendation is now WIRED (opens the real PO composer prefilled from the reorder rec). Restore the enabled gold-accent affordance the shared .proc-act-btn base forces to disabled, scoped to the wired class so honest-coming .proc-act-btn uses keep their disabled treatment (mirror #proc-po-create). */ #page-procurement .proc-act-btn.proc-pi-draftpo { cursor: pointer; opacity: 1; color: var(--gold); background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.45); } /* click-reveal popover (scoped, ported from sample popover machinery) */ #page-procurement .proc-pop-scrim { position: fixed; inset: 0; z-index: 90; background: transparent; display: none; } #page-procurement .proc-pop-scrim.show { display: block; } #page-procurement .proc-popover { position: fixed; z-index: 100; display: none; width: 320px; max-width: calc(100vw - 28px); background: linear-gradient(170deg,rgba(38,35,32,0.98),rgba(28,25,22,0.98)); border: 1px solid rgba(201,168,76,0.32); border-radius: 16px; padding: 18px 20px; box-shadow: 0 36px 80px -30px #000, 0 0 0 1px rgba(201,168,76,0.1), 0 0 40px -14px rgba(201,168,76,0.4); transform-origin: top center; transform: scale(.92) translateY(-8px); opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease); } #page-procurement .proc-popover.show { display: block; } #page-procurement .proc-popover.show.in { transform: scale(1) translateY(0); opacity: 1; } #page-procurement .proc-pop-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-procurement .proc-pop-h .ph-hint { font-size: 10.5px; color: var(--text-dim); } #page-procurement .proc-pop-sub { font-size: 11px; color: var(--text-dim); margin: 2px 0 14px; } #page-procurement .proc-pop-close { position: absolute; top: 13px; right: 14px; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; } #page-procurement .proc-pop-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; text-align: center; color: var(--text-dim); font-size: 11.5px; line-height: 1.5; } /* structured-empty donut ring (refinement 1) — the ring outline kept, no segment fills */ #page-procurement .proc-pop-empty .proc-ring { width: 96px; height: 96px; border-radius: 50%; border: 11px solid rgba(255,255,255,0.06); flex: none; } /* structured-empty gauge arc track (refinement 1) — the arc track kept, no value sweep */ #page-procurement .proc-pop-empty .proc-gauge { width: 96px; height: 96px; border-radius: 50%; flex: none; border: 10px solid rgba(255,255,255,0.06); border-top-color: rgba(201,168,76,0.16); border-right-color: rgba(201,168,76,0.10); } /* the donut/gauge component rows rendered as "-" (refinement 1) */ #page-procurement .proc-pop-rows { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } #page-procurement .proc-pop-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; padding: 4px 0; border-bottom: 1px solid var(--border); } #page-procurement .proc-pop-row .pr-l { color: var(--text-dim); } #page-procurement .proc-pop-row .pr-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); font-size: 11.5px; } #page-procurement .proc-footnote { font-size: 10px; color: var(--text-dim); margin-top: 18px; text-align: center; opacity: .7; } @media (max-width: 1100px) { #page-procurement .proc-kpis { grid-template-columns: repeat(3,1fr); } #page-procurement .proc-grid { grid-template-columns: 1fr; } } /* FIX_ULTRAMARATHON_PROCUREMENT_SPEND_2026_06_19 - Spend rail sub-view scoped CSS. Ported section-by-section from design_samples/procurement/procurement_spend.html (the SPEND sample, NOT the landing). Everything renders HONEST-EMPTY / structured-empty by construction (the procurement spend engine does not exist yet): the spend-over-time trend keeps its plot frame + gridlines + y/x axis labels + legend with ZERO series (structured-empty CHART, refinement 1); the category donut keeps the empty ring + a labeled category list rendered "-" (refinement 1+2); the supplier-rank / budget / top-mover sections keep their list SHAPE as empty skeletons (refinement 2) with the budget marker kept; the 5 KPI tiles render "-". Action affordances (Total/By-category toggle, seam pointers) carry HONEST-COMING disabled treatment, never wired. ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM - the established .crm-layout / .proc-* hazard). Reuses the landing's .proc-panel / .proc-panel-h / .proc-panel-sub / .proc-att-skel / .proc-coming / .proc-footnote / .proc-head-row / .proc-statusline / .proc-kpi idioms verbatim. */ /* KPI band variant - the spend surface band is 5 tiles (landing band is 6) */ #page-procurement .proc-kpis.k5 { grid-template-columns: repeat(5,1fr); } /* two-column row (mirror of sample .two-col) */ #page-procurement .proc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } /* measured/descriptive tag + segmented control (display-only, HONEST-COMING never wired) */ #page-procurement .proc-desc-tag { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--blue); background: rgba(91,155,213,0.13); border: 1px solid rgba(91,155,213,0.3); border-radius: 7px; padding: 2px 7px; } #page-procurement .proc-panel-tools { display: flex; align-items: center; gap: 12px; } #page-procurement .proc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: rgba(255,255,255,0.02); } #page-procurement .proc-seg button:not([disabled]):hover { color: var(--text-bright); } /* -- spend-over-time hero - structured-empty CHART (refinement 1) -- */ #page-procurement .proc-trend-svg { width: 100%; height: 300px; display: block; overflow: visible; } #page-procurement .proc-hero-grid { display: grid; grid-template-columns: 1fr 230px; gap: 20px; align-items: stretch; } #page-procurement .proc-trend-wrap { position: relative; } /* honest empty caption overlaid on the kept trend plot frame (no series yet) */ #page-procurement .proc-trend-empty { position: absolute; left: 36%; top: 50%; transform: translate(-50%,-50%); text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.5; max-width: 230px; pointer-events: none; } #page-procurement .proc-trend-empty .proc-trend-empty-ic { font-size: 20px; opacity: .5; margin-bottom: 6px; } #page-procurement .proc-hero-side { display: flex; flex-direction: column; gap: 11px; } #page-procurement .proc-hs-stat { background: rgba(255,255,255,0.022); border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; box-shadow: var(--inner-hi); } #page-procurement .proc-hs-stat .proc-hs-l { font-size: 9px; letter-spacing: .9px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; } #page-procurement .proc-hs-stat .proc-hs-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 19px; color: var(--text-dim); line-height: 1; } #page-procurement .proc-hs-stat .proc-hs-d { font-size: 10.5px; color: var(--text-dim); margin-top: 5px; } #page-procurement .proc-trend-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 13px; font-size: 10.5px; color: var(--text-dim); } #page-procurement .proc-trend-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* -- category donut - structured-empty ring + labeled category list (refinement 1+2) -- */ #page-procurement .proc-donut-row { display: flex; align-items: center; gap: 18px; } #page-procurement .proc-donut-wrap { position: relative; width: 152px; height: 152px; flex: none; display: grid; place-items: center; } /* empty donut ring track - outline kept, no segment fills (refinement 1) */ #page-procurement .proc-donut-wrap .proc-ring { width: 152px; height: 152px; border-radius: 50%; border: 17px solid rgba(255,255,255,0.06); flex: none; } #page-procurement .proc-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } #page-procurement .proc-donut-center .proc-dc-lbl { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); } #page-procurement .proc-donut-center .proc-dc-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 26px; color: var(--text-dim); } #page-procurement .proc-donut-center .proc-dc-d { font-size: 8.5px; color: var(--text-dim); font-weight: 600; margin-top: 2px; } /* FIX_GTC_INLINE_COLLAPSE_2026_08_01 - the donut row's second overflow cause. A flex item defaults to min-width:auto (i.e. min-content), so a "flex: 1" child cannot shrink below its longest unbreakable word. The category list and the category-name span are both flex:1 and neither carried the zero-minimum declaration, which pinned the donut row to an incompressible floor of the 152px ring + gap + the fixed pct/amt columns + the longest category word. This scope already uses that idiom on twenty sibling flex children (.proc-skel-body, .proc-al-body, .mv-body, .ptr-body, .proc-dg-col, .proc-pi-hero-l and the rest); these two were the ones that never got it. Specificity is unchanged - both rules stay (1,1,0). ASCII-only: a non-ASCII character silently drops the rule from the CSSOM - the established .proc-* hazard. */ #page-procurement .proc-cat-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; } #page-procurement .proc-cat-item { display: flex; align-items: center; gap: 9px; font-size: 11.5px; border-radius: 8px; padding: 2px 4px; } #page-procurement .proc-cat-item .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; background: rgba(255,255,255,0.08); } #page-procurement .proc-cat-item .cname { color: var(--text); flex: 1; min-width: 0; } #page-procurement .proc-cat-item .cpct { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); width: 36px; text-align: right; } #page-procurement .proc-cat-item .camt { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--text-dim); width: 52px; text-align: right; font-size: 11px; } /* FIX_PROC_OPS_S6A_OVERVIEW_2026_07_05 — live top-suppliers bar list in the Suppliers popover; mirrors the sample's .age-row geometry (label + bar track + value). Bars fill via rAF. */ #page-procurement .proc-age-row { display: flex; align-items: center; gap: 9px; font-size: 11px; margin-bottom: 7px; } #page-procurement .proc-age-row .a-l { width: 96px; color: var(--text-dim); font-size: 10px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-procurement .proc-age-row .a-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; } #page-procurement .proc-age-row .a-v { width: 46px; text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); font-size: 11px; flex: none; } /* -- supplier ranking - structured-empty ranked bars (refinement 2) -- */ #page-procurement .proc-rank-list { display: flex; flex-direction: column; gap: 13px; margin-top: 2px; } #page-procurement .proc-rank-row { display: flex; align-items: center; gap: 11px; font-size: 12px; } #page-procurement .proc-rank-row .rk-n { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11px; color: var(--text-dim); opacity: .55; width: 13px; text-align: center; flex: none; } #page-procurement .proc-rank-row .rk-l { width: 96px; flex: none; color: var(--text-dim); font-weight: 600; display: flex; flex-direction: column; gap: 4px; } #page-procurement .proc-rank-row .rk-l .rk-skel-line { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-rank-row .rk-l .rk-skel-line.w1 { width: 70%; } #page-procurement .proc-rank-row .rk-l .rk-skel-line.w2 { width: 46%; } /* empty bar track - kept, zero-width fill (refinement 1) */ #page-procurement .proc-rank-row .rk-track { flex: 1; height: 13px; border-radius: 7px; background: rgba(255,255,255,0.06); overflow: hidden; position: relative; } #page-procurement .proc-rank-row .rk-r { flex: none; width: 108px; display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; } #page-procurement .proc-rank-row .rk-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); font-size: 12.5px; } #page-procurement .proc-rank-row .rk-share { font-size: 10px; color: var(--text-dim); } /* -- spend vs budget - structured-empty budget bars with marker kept (refinement 1+2) -- */ #page-procurement .proc-bud-list { display: flex; flex-direction: column; gap: 15px; margin-top: 4px; } #page-procurement .proc-bud-row { font-size: 12px; } #page-procurement .proc-bud-row .br-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } #page-procurement .proc-bud-row .br-cat { color: var(--text-dim); font-weight: 600; } #page-procurement .proc-bud-row .br-fig { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); font-size: 11.5px; } #page-procurement .proc-bud-track { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.05); overflow: visible; } #page-procurement .proc-bud-track .bd-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 7px; width: 0; } /* budget marker kept at a neutral position (refinement 1) */ #page-procurement .proc-bud-track .bd-mark { position: absolute; top: -3px; bottom: -3px; left: 62%; width: 2px; background: var(--text-bright); border-radius: 2px; box-shadow: 0 0 5px rgba(240,235,226,0.5); } /* -- top movers - 2-col up/down empty skeleton rows (refinement 2) -- */ #page-procurement .proc-mov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #page-procurement .proc-mov-col h4 .mc-ic { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; } #page-procurement .proc-mov-col.up h4 .mc-ic { background: rgba(232,148,58,0.16); } #page-procurement .proc-mov-col.up h4 .mc-ic svg { stroke: var(--amber); } #page-procurement .proc-mov-col.down h4 .mc-ic { background: rgba(76,175,125,0.16); } #page-procurement .proc-mov-col.down h4 .mc-ic svg { stroke: var(--green); } #page-procurement .proc-mov-list { display: flex; flex-direction: column; gap: 8px; } #page-procurement .proc-mov-skel { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,0.018); border: 1px dashed var(--border); position: relative; overflow: hidden; } #page-procurement .proc-mov-skel .mv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } #page-procurement .proc-mov-skel .mv-skel-line { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-mov-skel .mv-skel-line.w1 { width: 68%; } #page-procurement .proc-mov-skel .mv-skel-line.w2 { width: 44%; } #page-procurement .proc-mov-skel .mv-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: var(--text-dim); flex: none; } /* FIX_PROC_OPS_S5A_SPEND_2026_07_05 - LIVE-state overrides for the Spend room. The .proc-live modifier brightens the dim empty-state values to bright/live once real PO-derived data is present. Scoped under #page-procurement; touches nothing outside the spend room. ASCII-only comment (the established .proc-* hazard: a non-ASCII char can drop the rule from the CSSOM). */ #page-procurement .proc-kpis.proc-live .proc-val { color: var(--text-bright); } #page-procurement .proc-donut-svg { width: 152px; height: 152px; display: block; } #page-procurement .proc-donut-wrap.proc-live .proc-donut-center .proc-dc-val { color: var(--text-bright); } #page-procurement .proc-cat-list.proc-live .cpct { color: var(--text-bright); } #page-procurement .proc-cat-list.proc-live .camt { color: var(--text); } #page-procurement .proc-rank-row.proc-live .rk-l { color: var(--text); } #page-procurement .proc-rank-row.proc-live .rk-l small { font-size: 9.5px; color: var(--text-dim); font-weight: 400; } #page-procurement .proc-rank-row.proc-live .rk-track i { transition: width 1.05s cubic-bezier(.2,.7,.2,1); } #page-procurement .proc-rank-row.proc-live .rk-v { color: var(--text-bright); } /* live top-mover card (replaces the dashed skeleton; up=amber down=green accent bar) */ #page-procurement .proc-mov { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,0.018); border: 1px solid var(--border); position: relative; overflow: hidden; } #page-procurement .proc-mov .mv-body { flex: 1; min-width: 0; } #page-procurement .proc-mov .mv-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-bright); } #page-procurement .proc-mov .mv-d { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; } #page-procurement .proc-mov .mv-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; flex: none; } #page-procurement .proc-mov.up .mv-amt { color: var(--amber); } #page-procurement .proc-mov.down .mv-amt { color: var(--green); } #page-procurement .proc-mov-empty { font-size: 11px; color: var(--text-dim); line-height: 1.5; padding: 6px 2px; } /* -- seam pointers - 2-col HONEST-COMING cards (never wired to navigate) -- */ #page-procurement .proc-pointers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } #page-procurement .proc-ptr { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(170deg,#252220,#1e1b19); } #page-procurement .proc-ptr .ptr-ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; box-shadow: var(--inner-hi); } #page-procurement .proc-ptr.intel .ptr-ic { background: linear-gradient(150deg,rgba(201,168,76,0.22),rgba(201,168,76,0.06)); } #page-procurement .proc-ptr.price .ptr-ic { background: linear-gradient(150deg,rgba(76,175,125,0.22),rgba(76,175,125,0.06)); } #page-procurement .proc-ptr .ptr-body { flex: 1; min-width: 0; } #page-procurement .proc-ptr .pb-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-bright); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #page-procurement .proc-ptr .pb-tag { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .6px; padding: 2px 6px; border-radius: 6px; } #page-procurement .proc-ptr.intel .pb-tag { color: var(--gold); background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.3); } #page-procurement .proc-ptr.price .pb-tag { color: var(--green); background: rgba(76,175,125,0.14); border: 1px solid rgba(76,175,125,0.3); } #page-procurement .proc-ptr .pb-d { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; } #page-procurement .proc-ptr .ptr-arrow { flex: none; color: var(--text-dim); } @media (max-width: 1100px) { #page-procurement .proc-kpis.k5 { grid-template-columns: repeat(3,1fr); } #page-procurement .proc-two-col, #page-procurement .proc-pointers, #page-procurement .proc-mov-grid { grid-template-columns: 1fr; } #page-procurement .proc-hero-grid { grid-template-columns: 1fr; } /* FIX_GTC_INLINE_COLLAPSE_2026_08_01 - stack the donut above its category list below 1100px. The zero-minimum fix on .proc-cat-list/.cname alone leaves only about 4px of headroom against the narrow host, which is a coincidence rather than a fix - one font metric or a scrollbar takes it back. Stacking drops the row's floor to the ring width alone. SPECIFICITY: this selector is (1,1,0), IDENTICAL to the base rule, and a media query contributes ZERO specificity - so this wins by SOURCE ORDER alone, which is why it must live in this block (the base rule appears earlier in this stylesheet). Do NOT add an id, an !important, or a third class to "make it win": raising specificity here would force every narrow-viewport value on this selector to be restated at the new level. ASCII-only: a non-ASCII character silently drops the rule from the CSSOM - the established .proc-* hazard. */ #page-procurement .proc-donut-row { flex-direction: column; align-items: stretch; } } /* FIX_PROC_KPI_BAND_RESPONSIVE_2026_08_01 - the six legacy .proc-kpis KPI bands each shipped an INLINE grid-template-columns carrying a per-column min-width floor (6x140 + 5x13 gap = 905px; 5x140 + 4x13 = 752px; 4x150 + 3x13 = 639px). An inline declaration outranks every rule in this stylesheet and a media query contributes ZERO specificity, so the "@media (max-width: 1100px)" collapses above could never fire and the bands overflowed the viewport on a phone. Inlines removed at all seven emission sites (symbol anchors: renderProcurementSpend x2, renderProcurementPriceIntelligence, __procSupKpiBand, __procSupEmptyBody, renderProcurementContracts, __procPoKpiBand). The 6-col and 5-col inlines were REDUNDANT even when authored: "#page-procurement .proc-kpis" is (1,1,0) and already outranks kit ".vk .kpis" (0,2,0), so removing them changes nothing at a wide viewport. Only the 4-tile PO band needed a carrier, hence .k4 below. PLACEMENT IS LOAD-BEARING: this block sits AFTER the "@media (max-width: 1100px)" block that carries "#page-procurement .proc-kpis.k5", because the 600px .proc-kpis rule (1,1,0) TIES with the 1100px .proc-kpis rule (1,1,0) and later-in-source wins. For the same reason .k5 and .k4 are RESTATED inside the 600px block at (1,2,0): without them the 1100px .k5/.k4 rules would beat the 600px bare rule and those bands would stay at three columns while their siblings went to two. Column targets transcribed from design_samples/procurement/overview.html (6 -> 3 at 1080 -> 2 at 600 - the ladder the already-shipped Overview fix used) and design_samples/procurement/procurement_purchase_orders.html (4 -> 2). ASCII-only: a non-ASCII character silently drops the rule from the CSSOM - the established .proc-* hazard. */ #page-procurement .proc-kpis.k4 { grid-template-columns: repeat(4,1fr); } @media (max-width: 1100px) { #page-procurement .proc-kpis.k4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px) { #page-procurement .proc-kpis { grid-template-columns: repeat(2,1fr); } #page-procurement .proc-kpis.k5 { grid-template-columns: repeat(2,1fr); } #page-procurement .proc-kpis.k4 { grid-template-columns: repeat(2,1fr); } } /* FIX_ULTRAMARATHON_PROCUREMENT_SUPPLIERS_2026_06_19 - Suppliers rail sub-view scoped CSS. Ported section-by-section from design_samples/procurement/procurement_suppliers.html (the SUPPLIERS sample). Everything renders HONEST-EMPTY / structured-empty by construction (the suppliers engine does not exist yet): the directory toolbar keeps the search box + filter chips SHAPE (display-only, HONEST-COMING); the supplier table keeps the 8-col header + 5 empty/coming row-skeletons (refinement 2); the concentration callout keeps the empty ring TRACK + two-lens shape + a disabled Risk-Manager link (structured-empty CHART, refinement 1); the standalone detail card keeps the back-crumb + hero + 5-stat strip + 2-col dcard grid with every chart structured-empty (spend-trend axes-only, price-history tracks WITH the "mkt" marker + zero fill, on-time-history empty bar slots). The sample's bare global class names (.sup-table / .detail / .conc-callout / .dcard) are RE-PREFIXED to proc-* and scoped under #page-procurement so they cannot leak across surfaces. ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM - the established .proc-* hazard). Reuses the landing's .proc-panel / .proc-panel-h / .proc-empty / .proc-ring / .proc-coming / .proc-coming-tag / .proc-footnote / .proc-head-row / .proc-statusline / .proc-kpi / .proc-skel-line idioms verbatim. */ /* -- directory toolbar (search + filter chips, display-only HONEST-COMING) -- */ #page-procurement .proc-dir-toolbar { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 14px; } #page-procurement .proc-search { position: relative; flex: 1; min-width: 200px; max-width: 320px; } #page-procurement .proc-search input { width: 100%; font-family: 'Open Sans', sans-serif; font-size: 12px; color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px 8px 34px; } #page-procurement .proc-search input::placeholder { color: var(--text-dim); } #page-procurement .proc-search input:focus { border-color: rgba(201,168,76,0.4); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); outline: none; } #page-procurement .proc-fchips { display: flex; gap: 7px; flex-wrap: wrap; } #page-procurement .proc-fchip { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; } #page-procurement .proc-fchip .proc-fc-c { font-size: 9.5px; color: var(--text-dim); font-weight: 700; } #page-procurement .proc-fchip.active .proc-fc-c { color: var(--gold); } #page-procurement .proc-fchip.flag { border-color: rgba(232,148,58,0.3); } #page-procurement .proc-dir-spacer { flex: 1; } #page-procurement .proc-dir-count { font-size: 11px; color: var(--text-dim); white-space: nowrap; } /* -- supplier table: 8-col header + 5 empty/coming row-skeletons (refinement 2) -- */ #page-procurement .proc-sup-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; } #page-procurement .proc-sup-table th.num-col, #page-procurement .proc-sup-table td.num-col { text-align: right; } #page-procurement .proc-sup-table th.ctr-col, #page-procurement .proc-sup-table td.ctr-col { text-align: center; } #page-procurement .proc-sup-skel .proc-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); display: block; } #page-procurement .proc-sup-skel .proc-skel-line.w1 { width: 48%; } #page-procurement .proc-sup-skel .proc-skel-line.w2 { width: 72%; } #page-procurement .proc-sup-skel .proc-skel-cell { color: var(--text-dim); opacity: .5; font-family: 'Montserrat', sans-serif; font-weight: 700; } #page-procurement .proc-sup-skel-name { display: flex; align-items: center; gap: 11px; } #page-procurement .proc-sup-skel-av { width: 34px; height: 34px; border-radius: 9px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border); } #page-procurement .proc-sup-skel-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } #page-procurement .proc-sup-empty-note { margin-top: 16px; } /* FIX_PROC_OPS_S4_SUPPLIERS_2026_07_05 — LIVE directory-row classes (S4 wiring). Ported from design_samples/procurement/procurement_suppliers.html onto the .proc- prefix (never the sample's bare .sup-table/.sup-name/.lev-tag globals — those would collide across rooms). */ #page-procurement .proc-sup-table th.num-col .proc-sort-ic { margin-left: 4px; opacity: 0; } #page-procurement .proc-sup-row { cursor: pointer; transition: background .14s var(--ease); } #page-procurement .proc-sup-name { display: flex; align-items: center; gap: 11px; } #page-procurement .proc-sup-av { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #16140F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); } #page-procurement .proc-sn-t { min-width: 0; } #page-procurement .proc-cat-pill { font-size: 11px; color: var(--text); } /* FIX_REDESIGN_PROC_VENDORS_SPENDCARD_2026_07_28 — the "Total vendor spend" card between the KPI band and the directory (procurement/vendors.html L364-373). .proc-spend-card mirrors the sample's .spark-card{margin-bottom:16px} (L242); .proc-spend-pill mirrors its .cat-pill (L203) — the shipped .proc-cat-pill is a bare text style used in a table cell, not the bordered pill this card needs, so a sibling rule is added rather than overloading that one and changing every directory row. */ #page-procurement .proc-spend-card { margin-bottom: 16px; } #page-procurement .proc-spend-pill { display: inline-flex; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } /* current-month treatment (difference 4 in __procSupSpendTrendAll): the caption label for the still-accruing month is de-emphasised + starred, and the note spells the reason out in words. */ #page-procurement .proc-sup-trend-cap .proc-spend-partial { opacity: .6; font-style: italic; } #page-procurement .proc-spend-note { margin-top: 7px; font-size: 10.5px; line-height: 1.45; color: var(--text-dim); } #page-procurement .proc-sup-na { font-size: 11px; color: var(--text-dim); opacity: .7; } /* FIX_ENGWIRE_INVPROC_2026_09_01 — on-time % cell colour, reusing the SAME bare .pos/.warn modifier convention + colour values already used at the Vendor Directory's on-time cell (#page-operations .opv-sc .pos / .opv-otv.pos, index.html:21865) — never a new proc-sup-* class. */ #page-procurement .proc-sup-table .pos { color: #4CAF7D; font-weight: 700; } #page-procurement .proc-sp-amt { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); font-size: 13px; } #page-procurement .proc-sp-share { display: flex; align-items: center; gap: 7px; margin-top: 4px; } #page-procurement .proc-sp-bar { width: 54px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; flex: none; } #page-procurement .proc-sp-pct { font-size: 10px; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-procurement .proc-ct-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text); } #page-procurement .proc-ct-badge .proc-ct-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--green); box-shadow: 0 0 6px rgba(76,175,125,0.6); } #page-procurement .proc-sup-go { opacity: 0; transition: opacity .15s var(--ease), transform .15s var(--ease); stroke: var(--gold); } #page-procurement .proc-sup-row:hover .proc-sup-go { opacity: .85; transform: translateX(2px); } #page-procurement .proc-sup-empty-filter { margin-top: 16px; } /* live detail extras: spend-trend month caption; contract note; honest-empty term/contact values */ #page-procurement .proc-sup-trend-cap { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 600; } #page-procurement .proc-term-note { margin-top: 11px; font-size: 11.5px; color: var(--text-dim); line-height: 1.45; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; } #page-procurement .proc-term-row .proc-tr-v.na, #page-procurement .proc-contact-row .proc-cr-t b.na { opacity: .55; font-weight: 600; } /* -- concentration callout: structured-empty CHART (refinement 1) -- */ #page-procurement .proc-conc-callout { position: relative; overflow: hidden; margin-top: 16px; background: linear-gradient(110deg,rgba(224,85,85,0.06),rgba(91,155,213,0.035) 60%,rgba(255,255,255,0.012)); border: 1px solid var(--border); border-radius: 16px; padding: 17px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; box-shadow: 0 22px 50px -38px #000, var(--inner-hi); } #page-procurement .proc-conc-ring { position: relative; width: 88px; height: 88px; flex: none; display: grid; place-items: center; } /* empty ring TRACK kept, zero sweep (refinement 1) - reuses the landing's .proc-ring sizing override */ #page-procurement .proc-conc-ring .proc-ring { width: 88px; height: 88px; border-radius: 50%; border: 10px solid rgba(255,255,255,0.06); } #page-procurement .proc-conc-cr-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } #page-procurement .proc-conc-cr-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 21px; color: var(--text-dim); line-height: 1; } #page-procurement .proc-conc-cr-l { font-size: 8px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-top: 2px; } #page-procurement .proc-conc-body { flex: 1; min-width: 240px; } #page-procurement .proc-conc-body h4 .proc-conc-ic { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,0.04); display: grid; place-items: center; } #page-procurement .proc-conc-lenses { display: flex; gap: 10px; margin-top: 11px; flex-wrap: wrap; } #page-procurement .proc-conc-lens { flex: 1; min-width: 180px; background: rgba(255,255,255,0.022); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; } #page-procurement .proc-conc-lens .proc-lns-h { display: flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 5px; } #page-procurement .proc-conc-lens .proc-lns-h .proc-lns-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } #page-procurement .proc-conc-lens.risk .proc-lns-h { color: var(--red); } #page-procurement .proc-conc-lens.risk .proc-lns-dot { background: var(--red); } #page-procurement .proc-conc-lens.proc .proc-lns-h { color: var(--gold); } #page-procurement .proc-conc-lens.proc .proc-lns-dot { background: var(--gold); } #page-procurement .proc-conc-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: var(--text-dim); border: 1px solid var(--border); background: rgba(255,255,255,0.03); border-radius: 8px; padding: 7px 13px; } /* -- standalone supplier detail card (option i): hidden HONEST-EMPTY scaffold -- */ #page-procurement .proc-back-crumb { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; padding: 6px 0; margin-bottom: 6px; } #page-procurement .proc-det-hero { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; } #page-procurement .proc-det-av { width: 62px; height: 62px; border-radius: 15px; flex: none; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; color: var(--text-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border); } #page-procurement .proc-dh-t { flex: 1; min-width: 200px; } #page-procurement .proc-dh-t .proc-dh-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; } #page-procurement .proc-det-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-start; } #page-procurement .proc-det-btn { font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; border-radius: 9px; padding: 9px 15px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-dim); white-space: nowrap; } #page-procurement .proc-det-stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 11px; margin-bottom: 18px; } #page-procurement .proc-dstat { background: rgba(255,255,255,0.022); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; box-shadow: var(--inner-hi); position: relative; overflow: hidden; } #page-procurement .proc-dstat .proc-ds-l { font-size: 9px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; } #page-procurement .proc-dstat .proc-ds-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 19px; color: var(--text-dim); line-height: 1; } #page-procurement .proc-dstat .proc-ds-d { font-size: 10.5px; color: var(--text-dim); margin-top: 5px; } #page-procurement .proc-det-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } #page-procurement .proc-dg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } #page-procurement .proc-dcard { background: linear-gradient(170deg,#252220,#1e1b19); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 18px 44px -36px #000, var(--inner-hi); } #page-procurement .proc-dcard-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } #page-procurement .proc-dcard-h .proc-dch-hint { font-size: 10.5px; color: var(--text-dim); } #page-procurement .proc-dcard-empty { margin-top: 10px; } #page-procurement .proc-sup-trend-svg { width: 100%; height: 130px; display: block; } /* price history vs market bars: track WITH the "mkt" marker kept, ZERO fill (refinement 1) */ #page-procurement .proc-ph-row { display: flex; align-items: center; gap: 11px; font-size: 11.5px; margin-bottom: 14px; } #page-procurement .proc-ph-row .proc-ph-l { width: 74px; flex: none; display: flex; flex-direction: column; } #page-procurement .proc-ph-row .proc-ph-l .proc-skel-line { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-ph-row .proc-ph-l .proc-skel-line.w2 { width: 80%; } #page-procurement .proc-ph-track { flex: 1; height: 22px; position: relative; border-radius: 7px; background: rgba(255,255,255,0.04); overflow: visible; } #page-procurement .proc-ph-track .proc-ph-mkt { position: absolute; top: -3px; bottom: -3px; left: 58%; width: 2px; background: rgba(255,255,255,0.5); border-radius: 2px; } #page-procurement .proc-ph-track .proc-ph-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; width: 0; } /* on-time delivery history: empty bar slots (refinement 1) */ #page-procurement .proc-ot-history { display: flex; gap: 4px; align-items: flex-end; height: 54px; } #page-procurement .proc-ot-history .proc-ot-bar { flex: 1; border-radius: 4px 4px 2px 2px; background: rgba(255,255,255,0.05); height: 40%; } /* items bought + contract terms + contact rows (all "-") */ #page-procurement .proc-item-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; } #page-procurement .proc-item-row .proc-ir-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } #page-procurement .proc-item-row .proc-ir-n .proc-skel-line { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-item-row .proc-ir-n .proc-skel-line.w1 { width: 46%; } #page-procurement .proc-item-row .proc-ir-n .proc-skel-line.w2 { width: 70%; } #page-procurement .proc-item-row .proc-ir-amt { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); font-size: 12px; flex: none; } #page-procurement .proc-term-row { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; } #page-procurement .proc-term-row .proc-tr-l { color: var(--text-dim); } #page-procurement .proc-term-row .proc-tr-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); font-size: 12px; } #page-procurement .proc-contact-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; font-size: 12px; border-bottom: 1px solid var(--border); } #page-procurement .proc-contact-row .proc-cr-ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.03); } #page-procurement .proc-contact-row .proc-cr-t { flex: 1; min-width: 0; } @media (max-width: 1100px) { #page-procurement .proc-det-stats { grid-template-columns: repeat(3,1fr); } #page-procurement .proc-det-grid { grid-template-columns: 1fr; } } /* FIX_ULTRAMARATHON_PROCUREMENT_SUPPLIERS_2026_06_19 - end Suppliers rail sub-view scoped CSS. */ /* FIX_ULTRAMARATHON_PROCUREMENT_CONTRACTS_2026_06_19 - Contracts rail sub-view scoped CSS. Ported section-by-section from design_samples/procurement/procurement_contracts.html (renewal timeline L441-453, contracts table L455-496, standalone detail card L498-619). ALL selectors uniquely prefixed (.proc-ctr-* list/timeline/table, .proc-cd-* detail) so NO single-class .proc-* selector collides with a shipped landing/spend/suppliers rule (the selector-collision class caught on suppliers' .proc-trend-svg). Shared idioms (.proc-panel, .proc-empty, .proc-coming, .proc-coming-tag, .proc-footnote, .proc-kpis, .proc-kpi, .proc-head-row, .proc-statusline) are reused verbatim, NOT re-declared. Sample tokens --head -> --text-bright, --dim -> --text-dim; all colors mapped onto shared platform tokens; the sample :root is NOT re-declared. ASCII-only (CSSOM-drop hazard). */ /* ===== renewal timeline (structured-empty CHART, refinement 1) ===== */ #page-procurement .proc-ctr-tl-panel { margin-bottom: 18px; } #page-procurement .proc-ctr-tl-wrap { position: relative; padding: 26px 8px 8px; } #page-procurement .proc-ctr-tl-svg { width: 100%; height: 230px; display: block; overflow: visible; } /* honest empty caption overlaid on the kept axis/band/ticks (no contract markers yet) */ #page-procurement .proc-ctr-tl-empty { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.5; max-width: 280px; pointer-events: none; } #page-procurement .proc-ctr-tl-empty .proc-ctr-tl-empty-ic { font-size: 22px; opacity: .5; margin-bottom: 7px; } #page-procurement .proc-ctr-tl-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap; align-items: center; } #page-procurement .proc-ctr-tl-legend .proc-ctr-dotk { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* FIX_PROC_CONTRACTS_SAMPLE_FIDELITY_2026_07_08 — clickable timeline marker (sample .tl-marker: cursor + hover-lift) */ #page-procurement .proc-ctr-marker { cursor: pointer; transition: transform .2s var(--ease); transform-box: fill-box; transform-origin: center bottom; } #page-procurement .proc-ctr-marker:focus-visible circle:last-of-type { stroke: var(--gold); stroke-width: 2.4; } /* clickable agreements-table row (sample .ctbl tbody tr: cursor + hover) */ #page-procurement .proc-ctr-tbl tbody tr.proc-ctr-row { cursor: pointer; transition: background .16s var(--ease); } #page-procurement .proc-ctr-tbl tbody tr.proc-ctr-row:hover { background: rgba(255,255,255,0.03); } #page-procurement .proc-ctr-tbl tbody tr.proc-ctr-row:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; } #page-procurement .proc-ctr-tbl tbody tr.proc-ctr-row.flagged { background: linear-gradient(100deg,rgba(232,148,58,0.10),transparent 60%); } #page-procurement .proc-ctr-tbl tbody tr.proc-ctr-row.flagged:hover { background: linear-gradient(100deg,rgba(232,148,58,0.15),rgba(255,255,255,0.02) 60%); } #page-procurement .proc-ctr-tbl tbody tr.proc-ctr-row.flagged td:first-child { box-shadow: inset 3px 0 0 #E8943A; } /* status pill (sample .pill) */ #page-procurement .proc-ctr-pill { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } #page-procurement .proc-ctr-pill.expiring { color: #E8943A; background: rgba(232,148,58,0.14); border: 1px solid rgba(232,148,58,0.32); } #page-procurement .proc-ctr-pill.imminent { color: #FFD9B0; background: rgba(232,148,58,0.22); border: 1px solid rgba(255,205,150,0.5); } #page-procurement .proc-ctr-pill.dim { color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); } #page-procurement .proc-ctr-pill .proc-ctr-pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* renew cell (sample .cd) */ #page-procurement .proc-ctr-cd { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); } #page-procurement .proc-ctr-cd small { display: block; font-size: 9.5px; color: var(--text-dim); font-weight: 600; font-family: 'Open Sans', sans-serif; } /* ===== contracts table (structure-preserving empty, refinement 2) ===== */ #page-procurement .proc-ctr-tbl-panel { margin-bottom: 18px; } #page-procurement .proc-ctr-tbl-tools { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; } #page-procurement .proc-ctr-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } #page-procurement .proc-ctr-seg .proc-ctr-seg-b { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-dim); background: transparent; border: none; padding: 7px 13px; cursor: pointer; transition: .16s var(--ease); } #page-procurement .proc-ctr-tbl-spacer { flex: 1; } #page-procurement .proc-ctr-totline { font-size: 11px; color: var(--text-dim); } #page-procurement .proc-ctr-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } #page-procurement .proc-ctr-tbl tbody tr:last-child td { border-bottom: none; } /* empty/coming row-skeleton - preserves the table row shape (supplier cell + 6 value cells) */ #page-procurement .proc-ctr-skel td { color: var(--text-dim); } #page-procurement .proc-ctr-skel .proc-ctr-sup { display: flex; align-items: center; gap: 11px; } #page-procurement .proc-ctr-skel .proc-ctr-sup-av { width: 30px; height: 30px; border-radius: 9px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border); } #page-procurement .proc-ctr-skel .proc-ctr-sup-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } #page-procurement .proc-ctr-skel .proc-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-ctr-skel .proc-skel-line.w1 { width: 50%; } #page-procurement .proc-ctr-skel .proc-skel-line.w2 { width: 78%; } #page-procurement .proc-ctr-skel .proc-ctr-cell { color: var(--text-dim); } #page-procurement .proc-ctr-tbl-empty-note { margin-top: 13px; } /* ===== standalone contract detail card (honest-empty, refinement 2) ===== */ #page-procurement .proc-cd-backbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } #page-procurement .proc-cd-back { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 9px; padding: 8px 14px; cursor: pointer; transition: .16s var(--ease); } #page-procurement .proc-cd-bc { font-size: 11.5px; color: var(--text-dim); } /* detail hero */ #page-procurement .proc-cd-hero { display: flex; align-items: flex-start; gap: 18px; padding: 20px 22px; border-radius: 16px; margin-bottom: 16px; background: linear-gradient(150deg,rgba(232,148,58,0.10),rgba(37,34,32,0.6) 55%); border: 1px solid rgba(232,148,58,0.28); box-shadow: 0 22px 50px -36px #000, var(--inner-hi); } #page-procurement .proc-cd-av { width: 54px; height: 54px; border-radius: 14px; flex: none; display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); } #page-procurement .proc-cd-ht { flex: 1; min-width: 0; } #page-procurement .proc-cd-cat { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; } #page-procurement .proc-cd-count { text-align: right; flex: none; } #page-procurement .proc-cd-count .proc-cd-cv { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: var(--text-dim); } #page-procurement .proc-cd-count .proc-cd-cl { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-top: 5px; } #page-procurement .proc-cd-count .proc-cd-cdate { font-size: 11px; color: var(--text); font-family: 'Montserrat', sans-serif; font-weight: 600; margin-top: 4px; } /* lens seam */ #page-procurement .proc-cd-lens-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } #page-procurement .proc-cd-lens-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); } #page-procurement .proc-cd-lens-pill { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; padding: 7px 13px; border-radius: 9px; transition: .16s var(--ease); border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--text-dim); } #page-procurement .proc-cd-lens-pill.legal { color: var(--blue); } #page-procurement .proc-cd-lens-note { font-size: 10.5px; color: var(--text-dim); margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } /* detail body grid + cards */ #page-procurement .proc-cd-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; } #page-procurement .proc-cd-card { background: linear-gradient(170deg,#252220,#1e1b19); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, var(--inner-hi); margin-bottom: 16px; } #page-procurement .proc-cd-card .proc-cd-ch { font-size: 13px; letter-spacing: .3px; margin-bottom: 3px; display: flex; align-items: center; gap: 9px; color: var(--text-bright); font-family: 'Montserrat', sans-serif; font-weight: 700; } #page-procurement .proc-cd-card .proc-cd-ch .proc-cd-ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,0.04); border: 1px solid var(--border); } #page-procurement .proc-cd-card .proc-cd-ch .proc-cd-lenstag { font-size: 9px; color: var(--text-dim); font-weight: 600; letter-spacing: .5px; margin-left: 6px; } #page-procurement .proc-cd-card .proc-cd-csub { font-size: 11px; color: var(--text-dim); margin: 2px 0 14px; font-family: 'Open Sans', sans-serif; font-weight: 400; } /* key terms list - rows "-" */ #page-procurement .proc-cd-terms { display: flex; flex-direction: column; } #page-procurement .proc-cd-term { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); } #page-procurement .proc-cd-term .proc-cd-tk { width: 150px; flex: none; font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 7px; padding-top: 1px; } #page-procurement .proc-cd-term .proc-cd-tv { flex: 1; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); font-size: 12.5px; } /* leverage card - rows "-" */ #page-procurement .proc-cd-lev-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } #page-procurement .proc-cd-lev-item .proc-cd-li-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); } #page-procurement .proc-cd-lev-item .proc-cd-li-b { flex: 1; min-width: 0; } #page-procurement .proc-cd-lev-item .proc-cd-li-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-dim); } #page-procurement .proc-cd-lev-item .proc-cd-li-d { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; } /* actions - HONEST-COMING buttons (present, disabled, never wired) */ #page-procurement .proc-cd-actions { display: flex; flex-direction: column; gap: 9px; } #page-procurement .proc-cd-act { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; cursor: not-allowed; opacity: .7; } #page-procurement .proc-cd-act .proc-cd-ab-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); } #page-procurement .proc-cd-act .proc-cd-ab-t { flex: 1; } /* counsel-gate banner */ #page-procurement .proc-cd-counsel { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 12px; margin-top: 14px; background: linear-gradient(120deg,rgba(91,155,213,0.10),rgba(37,34,32,0.5) 60%); border: 1px solid rgba(91,155,213,0.28); } #page-procurement .proc-cd-counsel .proc-cd-cs-ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(91,155,213,0.14); } #page-procurement .proc-cd-counsel .proc-cd-cs-b { flex: 1; font-size: 11px; line-height: 1.5; color: var(--text); } #page-procurement .proc-cd-counsel .proc-cd-cs-link { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--blue); white-space: nowrap; border: 1px solid rgba(91,155,213,0.3); border-radius: 8px; padding: 6px 11px; background: rgba(91,155,213,0.06); cursor: not-allowed; opacity: .7; } /* renegotiation prep draft (HONEST-COMING empty shell - no LLM prose logic carried) */ #page-procurement .proc-cd-draft { background: rgba(255,255,255,0.022); border: 1px solid var(--border); border-radius: 13px; padding: 0; overflow: hidden; box-shadow: var(--inner-hi); } #page-procurement .proc-cd-draft-h { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--border); background: rgba(201,168,76,0.05); } #page-procurement .proc-cd-draft-h .proc-cd-dh-ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(201,168,76,0.14); display: grid; place-items: center; flex: none; } #page-procurement .proc-cd-draft-h .proc-cd-dh-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-bright); } #page-procurement .proc-cd-draft-h .proc-cd-dh-tag { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 800; letter-spacing: .5px; color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); border-radius: 7px; padding: 3px 8px; } #page-procurement .proc-cd-draft-empty { padding: 18px 17px; text-align: center; color: var(--text-dim); font-size: 11.5px; line-height: 1.5; } /* FIX_PROC_CONTRACTS_SAMPLE_FIDELITY_2026_07_08 — LIVE-STATE overrides + missing classes now the detail card is data-driven + interactive (terms carry real values, actions fire, draft renders). */ /* term value: real values read bright (was dim for the honest-empty "—" scaffold) */ #page-procurement .proc-cd-term .proc-cd-tv { color: var(--text-bright); } #page-procurement .proc-cd-term .proc-cd-tv.warn { color: #E8943A; } #page-procurement .proc-cd-term .proc-cd-tvd { font-family: 'Open Sans', sans-serif; font-weight: 400; color: var(--text-dim); font-size: 10.5px; margin-top: 3px; } #page-procurement .proc-cd-term .proc-cd-flag-chip { font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 6px; color: #FFD9B0; background: rgba(232,148,58,0.18); border: 1px solid rgba(255,205,150,0.45); margin-left: 8px; vertical-align: middle; } /* leverage icon tints (sample g-gold/g-blue/g-amber → ic-tile-*) */ #page-procurement .proc-cd-li-ic.ic-tile-gold { background: linear-gradient(150deg,rgba(201,168,76,0.22),rgba(201,168,76,0.06)); border-color: rgba(201,168,76,0.3); } #page-procurement .proc-cd-li-ic.ic-tile-amber { background: linear-gradient(150deg,rgba(232,148,58,0.22),rgba(232,148,58,0.06)); border-color: rgba(232,148,58,0.3); } #page-procurement .proc-cd-li-ic.ic-tile-blue { background: linear-gradient(150deg,rgba(91,155,213,0.22),rgba(91,155,213,0.06)); border-color: rgba(91,155,213,0.3); } #page-procurement .proc-cd-lev-item .proc-cd-li-t { color: var(--text-bright); } #page-procurement .proc-cd-lev-item .proc-cd-li-d { color: var(--text); } /* actions now LIVE (override the honest-coming not-allowed/opacity) */ #page-procurement .proc-cd-act { cursor: pointer; opacity: 1; transition: .16s var(--ease); } #page-procurement .proc-cd-act.primary .proc-cd-ab-ic { background: rgba(201,168,76,0.18); border-color: rgba(201,168,76,0.35); } #page-procurement .proc-cd-act.done { background: rgba(76,175,125,0.10); border-color: rgba(76,175,125,0.3); color: var(--green); } /* counsel link now LIVE */ #page-procurement .proc-cd-counsel .proc-cd-cs-link { cursor: pointer; opacity: 1; } /* Legal-lens pill now LIVE */ #page-procurement .proc-cd-lens-pill.legal { cursor: pointer; } /* drafted note body (renders on Prep) */ #page-procurement .proc-cd-draft-body { display: none; padding: 16px 17px; font-size: 12px; line-height: 1.6; color: var(--text); } #page-procurement .proc-cd-draft-body .proc-cd-greet { color: var(--text-bright); font-weight: 600; } #page-procurement .proc-cd-draft-body .proc-cd-ask { padding: 11px 13px; border-left: 3px solid var(--gold); background: rgba(201,168,76,0.06); border-radius: 0 9px 9px 0; color: var(--text-bright); } /* detail mount default hidden until a contract is opened */ #page-procurement .proc-ctr-detail-mount { display: none; } @media (max-width: 1080px) { #page-procurement .proc-cd-grid { grid-template-columns: 1fr; } } /* FIX_PROC_OPS_ARC_S7_CONTRACTS_2026_07_05 — scoped CSS for the two S7 partial-live sub-surfaces: the contract-documents-on-file list + the vendor payment-terms roll-up. Reuses the room's own panel / empty / live-badge idioms. */ #page-procurement .proc-ctr-docs-panel, #page-procurement .proc-ctr-terms-panel { margin-bottom: 18px; } #page-procurement .proc-ctr-docs { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; } #page-procurement .proc-ctr-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,0.02); } #page-procurement .proc-ctr-doc .proc-ctr-doc-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); } #page-procurement .proc-ctr-doc .proc-ctr-doc-b { flex: 1; min-width: 0; } #page-procurement .proc-ctr-doc .proc-ctr-doc-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-procurement .proc-ctr-doc .proc-ctr-doc-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } #page-procurement .proc-ctr-doc .proc-ctr-doc-type { color: var(--text); } #page-procurement .proc-ctr-doc .proc-ctr-doc-sep { opacity: .5; } #page-procurement .proc-ctr-doc .proc-ctr-doc-vendor { color: var(--text-dim); } #page-procurement .proc-ctr-doc .proc-ctr-doc-open { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--gold); white-space: nowrap; flex: none; border: 1px solid rgba(201,168,76,0.3); border-radius: 8px; padding: 7px 11px; background: rgba(201,168,76,0.06); cursor: pointer; transition: .16s var(--ease); } #page-procurement .proc-ctr-terms { display: flex; flex-direction: column; margin-top: 4px; } #page-procurement .proc-ctr-term-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); } #page-procurement .proc-ctr-term-row .proc-ctr-term-vendor { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-procurement .proc-ctr-term-row .proc-ctr-term-empty { font-size: 11px; color: var(--text-dim); font-style: italic; } /* FIX_ULTRAMARATHON_PROCUREMENT_CONTRACTS_2026_06_19 - end Contracts rail sub-view scoped CSS. */ /* FIX_ULTRAMARATHON_PROCUREMENT_PRICE_2026_06_19 - Price Intelligence rail sub-view scoped CSS. ULTRAMARATHON surface (rail-selectable sub-view of #page-procurement), ported section-by-section from design_samples/procurement/procurement_price_intelligence.html, re-scoped under #page-procurement and uniquely prefixed .proc-px-* (UNIQUE prefix - no bare single-class .proc-* collisions; see the dedup-scan in the close-out). Reuses the shipped .proc-scroll / .proc-head-row / .proc-when / .proc-statusline / .proc-dot / .proc-kpis / .proc-kpi / .proc-panel / .proc-panel-h / .proc-hint / .proc-att-skel / .proc-skel-* / .proc-coming / .proc-act-btn / .proc-popover / .proc-pop-* / .proc-ring / .proc-footnote / .proc-empty idioms verbatim - only the price-intelligence-specific idioms are NEW here. ASCII-only (CSSOM-drop hazard). */ /* numbered section heads (1/2/3) - sample .sec-head / .sh-no / .sh-tag */ #page-procurement .proc-px-sec { margin-top: 22px; } #page-procurement .proc-px-sec-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 4px; } #page-procurement .proc-px-sh-no { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11px; color: #16140F; background: linear-gradient(150deg,var(--gold),var(--gold-soft)); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); } #page-procurement .proc-px-sh-tag { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } #page-procurement .proc-px-sec-sub { font-size: 11.5px; color: var(--text-dim); margin: 4px 0 14px; max-width: 760px; line-height: 1.5; } /* SECTION 1 - recover-now ledger (skeletons reuse .proc-att-skel) + recap strip */ #page-procurement .proc-px-ledger { display: flex; flex-direction: column; gap: 9px; } #page-procurement .proc-px-recap { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 13px 18px; border-radius: 13px; background: linear-gradient(100deg,rgba(76,175,125,0.10),rgba(255,255,255,0.014)); border: 1px solid rgba(76,175,125,0.28); } #page-procurement .proc-px-rc-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(76,175,125,0.16); display: grid; place-items: center; flex: none; } #page-procurement .proc-px-rc-t { flex: 1; font-size: 12px; color: var(--text); } #page-procurement .proc-px-rc-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; color: var(--text-dim); } #page-procurement .proc-px-rc-v small { font-size: 10px; color: var(--text-dim); font-weight: 600; margin-left: 5px; } /* SECTION 2 - over-market benchmark cards + the benchmark band (structured-empty, refinement 1) */ #page-procurement .proc-px-omgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } #page-procurement .proc-px-omcard { background: linear-gradient(170deg,#262320,#1e1b19); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; box-shadow: 0 16px 34px -28px #000, var(--inner-hi); } #page-procurement .proc-px-om-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 3px; } #page-procurement .proc-px-om-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-bright); } #page-procurement .proc-px-om-sup { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; } #page-procurement .proc-px-om-gap { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16px; color: var(--text-dim); text-align: right; line-height: 1; } #page-procurement .proc-px-om-gap small { display: block; font-size: 8.5px; color: var(--text-dim); font-weight: 600; margin-top: 3px; letter-spacing: .03em; text-transform: uppercase; } #page-procurement .proc-px-bench { position: relative; height: 46px; margin: 14px 0 6px; } #page-procurement .proc-px-bench .bx-track { position: absolute; left: 0; right: 0; top: 20px; height: 8px; border-radius: 5px; background: linear-gradient(90deg,rgba(76,175,125,0.18),rgba(255,255,255,0.05) 55%,rgba(224,85,85,0.18)); } #page-procurement .proc-px-bench .bx-band { position: absolute; top: 18px; height: 12px; border-radius: 6px; background: rgba(76,175,125,0.22); border: 1px solid rgba(76,175,125,0.4); } #page-procurement .proc-px-bench .bx-med { position: absolute; top: 12px; width: 2px; height: 24px; background: var(--text-bright); border-radius: 2px; } #page-procurement .proc-px-bench .bx-you { position: absolute; top: 6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--amber); filter: drop-shadow(0 0 5px rgba(232,148,58,0.7)); } #page-procurement .proc-px-bench .bx-dot { position: absolute; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(232,148,58,0.7); transform: translateX(-50%); } #page-procurement .proc-px-om-figs { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 2px; } #page-procurement .proc-px-om-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); } #page-procurement .proc-px-om-src { font-size: 9.5px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; } #page-procurement .proc-px-om-act { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 7px 13px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-dim); white-space: nowrap; } /* SECTION 3 - price-trend chart (structured-empty SVG) + lever-note skeletons */ #page-procurement .proc-px-trend-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; } #page-procurement .proc-px-trend-plot { position: relative; } #page-procurement .proc-px-trend-svg { width: 100%; height: 230px; display: block; } #page-procurement .proc-px-trend-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; color: var(--text-dim); font-size: 11.5px; line-height: 1.5; max-width: 230px; pointer-events: none; } #page-procurement .proc-px-trend-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap; } #page-procurement .proc-px-trend-legend .ln { width: 16px; height: 3px; border-radius: 2px; display: inline-block; } #page-procurement .proc-px-lever-notes { display: flex; flex-direction: column; gap: 10px; } #page-procurement .proc-px-lnote { display: flex; gap: 11px; padding: 12px 13px; border-radius: 11px; background: rgba(255,255,255,0.012); border: 1px dashed var(--border); } #page-procurement .proc-px-ln-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border); } #page-procurement .proc-px-ln-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; justify-content: center; } #page-procurement .proc-px-ln-b .proc-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-px-ln-b .proc-skel-line.w1 { width: 62%; } #page-procurement .proc-px-ln-b .proc-skel-line.w2 { width: 84%; } /* FIX_PROC_OPS_S5B_PRICE_INTEL_2026_07_05 - LIVE lever-note (populated own-price-movement fact), mirror of the sample .lnote up/down/flat (procurement_price_intelligence.html L531-539). */ #page-procurement .proc-px-lnote.live { border-style: solid; } #page-procurement .proc-px-lnote.live .proc-px-ln-ic { display: grid; place-items: center; } #page-procurement .proc-px-lnote.live.up .proc-px-ln-ic { background: rgba(224,85,85,0.14); border-color: transparent; } #page-procurement .proc-px-lnote.live.up .proc-px-ln-ic svg { stroke: var(--red); } #page-procurement .proc-px-lnote.live.down .proc-px-ln-ic { background: rgba(76,175,125,0.14); border-color: transparent; } #page-procurement .proc-px-lnote.live.down .proc-px-ln-ic svg { stroke: var(--green); } #page-procurement .proc-px-lnote.live.flat .proc-px-ln-ic { background: rgba(91,155,213,0.14); border-color: transparent; } #page-procurement .proc-px-lnote.live.flat .proc-px-ln-ic svg { stroke: var(--blue); } #page-procurement .proc-px-ln-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--text-bright); } #page-procurement .proc-px-ln-d { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; } /* cross-specialist seam note (real sample content - carries no data claims) */ #page-procurement .proc-px-seam { display: flex; align-items: flex-start; gap: 13px; margin-top: 24px; padding: 15px 18px; border-radius: 13px; background: linear-gradient(100deg,rgba(91,155,213,0.07),rgba(255,255,255,0.012)); border: 1px solid rgba(91,155,213,0.24); } #page-procurement .proc-px-sm-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(91,155,213,0.14); display: grid; place-items: center; flex: none; } #page-procurement .proc-px-sm-b { font-size: 11.5px; color: var(--text); line-height: 1.55; } #page-procurement .proc-px-sm-pill { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .05em; padding: 1px 7px; border-radius: 6px; margin: 0 2px; } #page-procurement .proc-px-sm-pill.proc { color: var(--gold); background: rgba(201,168,76,0.14); } #page-procurement .proc-px-sm-pill.fin { color: var(--blue); background: rgba(91,155,213,0.16); } /* competitiveness gauge popover ring (inline-SVG, refinement 1: NOT canvas) */ #page-procurement .proc-px-gauge-svg { width: 96px; height: 96px; display: block; } /* FIX_ULTRAMARATHON_PROCUREMENT_PRICE_2026_06_19 - end Price Intelligence rail sub-view scoped CSS. */ /* ═══════════════════════════════════════════════════════════════════════════ FIX_ULTRAMARATHON_PROC_INTEL_2026_06_19 - Procurement Intelligence scoped CSS. ULTRAMARATHON surface (rail-selectable sub-view of #page-procurement), ported section-by-section from design_samples/procurement/procurement_intelligence.html, re-scoped under #page-procurement and re-prefixed .proc-pi-* (UNIQUE prefix - no bare single-class .proc-* collisions; see the dedup-scan in the close-out). The structural twin of the shipped Marketing Intelligence .mkt-i-* block. Reuses the shipped .proc-panel / .proc-empty / .proc-coming / .proc-coming-tag / .proc-att-skel / .proc-footnote / .proc-head-row / .proc-statusline / .proc-dot / .proc-grid idioms verbatim - only the Intelligence-specific idioms are NEW here. All chart/track fills are width:0 (structured-empty, refinement 1) - no seed-data widths, no count-up, no animators. ASCII-only (CSSOM-drop hazard). NO fabricated data. ═══════════════════════════════════════════════════════════════════════════ */ /* hero - AI Head of Procurement + structured-empty health gauge (CHART C1) */ #page-procurement .proc-pi-hero { display: grid; grid-template-columns: 1fr 200px; gap: 22px; align-items: center; background: linear-gradient(150deg,rgba(201,168,76,0.10),rgba(255,255,255,0.012) 60%); border: 1px solid rgba(201,168,76,0.28); border-radius: 18px; padding: 20px 22px; margin-bottom: 18px; box-shadow: 0 22px 50px -36px #000, var(--inner-hi); } #page-procurement .proc-pi-hero-l { min-width: 0; } #page-procurement .proc-pi-badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 13px; padding: 6px 13px 6px 8px; border-radius: 999px; background: linear-gradient(180deg,rgba(201,168,76,0.18),rgba(201,168,76,0.04)); border: 1px solid rgba(201,168,76,0.34); box-shadow: var(--inner-hi); } #page-procurement .proc-pi-badge .pi-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(145deg,var(--gold),var(--gold-soft)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),0 0 14px -2px var(--gold-glow); } #page-procurement .proc-pi-badge .pi-av-t { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } #page-procurement .proc-pi-say { font-size: 14px; line-height: 1.6; color: var(--text); max-width: 60ch; } #page-procurement .proc-pi-meta { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } #page-procurement .proc-pi-tag { font-size: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; } /* structured-empty hero gauge (CHART C1): empty ring track only - no progress sweep, no tip dot, no animation */ #page-procurement .proc-pi-gauge { position: relative; width: 188px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; } #page-procurement .proc-pi-hg-wrap { position: relative; width: 150px; height: 150px; } #page-procurement .proc-pi-hg-svg { width: 150px; height: 150px; display: block; overflow: visible; } #page-procurement .proc-pi-hg-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } #page-procurement .proc-pi-hg-center .pi-hg-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 42px; color: var(--text-dim); line-height: 1; } #page-procurement .proc-pi-hg-center .pi-hg-max { font-size: 10px; color: var(--text-dim); margin-top: 2px; letter-spacing: .04em; } #page-procurement .proc-pi-hg-center .pi-hg-chip { margin-top: 7px; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); font-weight: 800; border: 1px solid var(--border-strong); border-radius: 20px; padding: 2px 9px; } #page-procurement .proc-pi-hg-label { margin-top: 6px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } /* recommended action plan - 5 empty rec-card skeletons (refinement 2) */ #page-procurement .proc-pi-plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 12px; flex-wrap: wrap; } #page-procurement .proc-pi-plan-head h3 .glyph { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg,rgba(201,168,76,0.26),rgba(201,168,76,0.07)); box-shadow: var(--inner-hi); } #page-procurement .proc-pi-plan-tot { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-dim); } #page-procurement .proc-pi-plan-tot .pt-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; color: var(--text-dim); } #page-procurement .proc-pi-rec-list { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; } /* rec-card skeleton - preserves the rec row shape (rank + icon slot + 2 skeleton lines + disabled action) */ #page-procurement .proc-pi-rec-skel { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.012); border: 1px dashed var(--border); position: relative; overflow: hidden; } #page-procurement .proc-pi-rec-skel .pi-rec-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: var(--text-dim); opacity: .45; width: 18px; text-align: center; flex: none; } #page-procurement .proc-pi-rec-skel .pi-rec-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border); } #page-procurement .proc-pi-rec-skel .pi-rec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } #page-procurement .proc-pi-rec-skel .pi-rec-line { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-pi-rec-skel .pi-rec-line.w1 { width: 58%; } #page-procurement .proc-pi-rec-skel .pi-rec-line.w2 { width: 82%; } #page-procurement .proc-pi-rec-skel .pi-rec-act { flex: none; } /* FIX_PROC_OPS_S6B_INTEL_2026_07_05 - LIVE reorder-due recommendation row (real data; mirrors the sample's .rec card idiom - blue accent bar + real title/why + routes-to chip + honest-coming action). Distinct from .proc-pi-rec-skel (the empty-state skeleton kept for no-data accounts). */ #page-procurement .proc-pi-rec { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(91,155,213,0.05); border: 1px solid rgba(91,155,213,0.28); position: relative; overflow: hidden; } #page-procurement .proc-pi-rec .pi-rec-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: var(--blue); width: 18px; text-align: center; flex: none; padding-top: 5px; } #page-procurement .proc-pi-rec .pi-rec-ico.live { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(91,155,213,0.14); border: 1px solid rgba(91,155,213,0.3); } #page-procurement .proc-pi-rec .pi-rec-body { flex: 1; min-width: 0; } #page-procurement .proc-pi-rec .pi-rec-ttl { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text-bright); } #page-procurement .proc-pi-rec .pi-rec-sub { font-size: 12px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; } #page-procurement .proc-pi-rec .pi-rec-route { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 10.5px; color: var(--text-dim); } #page-procurement .proc-pi-rec .pi-rec-chip { display: inline-flex; align-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03); color: var(--text); } #page-procurement .proc-pi-rec .pi-rec-act { flex: none; align-self: center; } #page-procurement .proc-pi-plan-note { margin-top: 13px; padding: 11px 14px; border-radius: 11px; font-size: 11px; color: var(--text-dim); line-height: 1.55; background: rgba(91,155,213,0.06); border: 1px solid rgba(91,155,213,0.18); } /* peer benchmark (CHART C2) + composite (CHART C3) - named-row bar-stacks, fills width 0 */ #page-procurement .proc-pi-bench-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; gap: 10px; flex-wrap: wrap; } #page-procurement .proc-pi-bench-head h3 .glyph { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg,rgba(91,155,213,0.24),rgba(91,155,213,0.07)); } #page-procurement .proc-pi-bench-head h3 .glyph.gold { background: linear-gradient(150deg,rgba(201,168,76,0.24),rgba(201,168,76,0.07)); } #page-procurement .proc-pi-bench-head h3 .glyph.gold svg { stroke: var(--gold); } #page-procurement .proc-pi-bench-head .moat { font-size: 9.5px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .06em; color: var(--blue); background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.3); border-radius: 999px; padding: 3px 10px; } #page-procurement .proc-pi-bench-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 16px; line-height: 1.5; } #page-procurement .proc-pi-bench-list { display: flex; flex-direction: column; gap: 17px; } #page-procurement .proc-pi-bench { font-size: 12px; } #page-procurement .proc-pi-bench .pi-b-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } #page-procurement .proc-pi-bench .pi-b-l { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 7px; } #page-procurement .proc-pi-bench .pi-b-v { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; color: var(--text-dim); } /* the bar-track rail + median marker STRUCTURE kept; fill width 0 (structured-empty, refinement 1) */ #page-procurement .proc-pi-b-track { position: relative; height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); overflow: visible; } #page-procurement .proc-pi-b-track .pi-bfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; width: 0; background: rgba(255,255,255,0.12); } #page-procurement .proc-pi-b-track .pi-bmed { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 2px; border-radius: 2px; background: var(--text-dim); box-shadow: 0 0 8px rgba(240,235,226,0.4); transform: translateX(-1px); opacity: .6; } #page-procurement .proc-pi-b-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: 10.5px; } #page-procurement .proc-pi-b-foot .pi-bdelta { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); } #page-procurement .proc-pi-b-foot .pi-brank { color: var(--text-dim); } /* FIX_PROC_OPS_S6B_INTEL_2026_07_05 - LIVE composite-signal variants (the one live signal, Concentration, renders gold; the four un-fed signals keep the "-" structured-empty look). */ #page-procurement .proc-pi-bench .pi-b-v.live { color: var(--gold); } #page-procurement .proc-pi-bench .pi-b-v .pi-b-max { color: var(--text-dim); font-weight: 600; font-size: 9.5px; margin-left: 1px; } #page-procurement .proc-pi-b-track .pi-bfill.live { background: linear-gradient(90deg,#C9A84C,#e0c878); } #page-procurement .proc-pi-b-foot .pi-bdelta.live { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; font-size: 8.5px; } #page-procurement .proc-pi-bench-note { margin-top: 18px; padding: 12px 14px; border-radius: 11px; font-size: 11px; color: var(--text-dim); line-height: 1.55; background: rgba(91,155,213,0.06); border: 1px solid rgba(91,155,213,0.18); } #page-procurement .proc-pi-bench-note.green { background: rgba(76,175,125,0.06); border-color: rgba(76,175,125,0.18); } /* what I'm watching - 3 empty watch-card skeletons (refinement 2) */ #page-procurement .proc-pi-watch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; gap: 12px; flex-wrap: wrap; } #page-procurement .proc-pi-watch-head h3 .glyph { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg,rgba(91,155,213,0.24),rgba(91,155,213,0.07)); } #page-procurement .proc-pi-watch-head .wtag { font-size: 9.5px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .05em; color: var(--text-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 11px; } #page-procurement .proc-pi-watch-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 16px; line-height: 1.5; } #page-procurement .proc-pi-watch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; } #page-procurement .proc-pi-watch-skel { position: relative; overflow: hidden; border-radius: 13px; padding: 14px 15px; background: rgba(255,255,255,0.012); border: 1px dashed var(--border); } #page-procurement .proc-pi-watch-skel .pi-w-t { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } #page-procurement .proc-pi-watch-skel .pi-w-ic { width: 28px; height: 28px; border-radius: 8px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border); } #page-procurement .proc-pi-watch-skel .pi-w-lbl { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--text-dim); } #page-procurement .proc-pi-watch-skel .pi-w-sig { margin-left: auto; font-size: 8px; font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); } #page-procurement .proc-pi-watch-skel .pi-w-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); margin-bottom: 8px; } #page-procurement .proc-pi-watch-skel .pi-w-line.w1 { width: 90%; } #page-procurement .proc-pi-watch-skel .pi-w-line.w2 { width: 70%; } #page-procurement .proc-pi-watch-skel .pi-w-f { margin-top: 11px; display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-dim); } #page-procurement .proc-pi-watch-skel .pi-w-f .pi-wsrc { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); } /* autonomy dial (3 stops, display-only) + guardrails + mode preview */ #page-procurement .proc-pi-auto-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; gap: 12px; flex-wrap: wrap; } #page-procurement .proc-pi-auto-head h3 .glyph { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg,rgba(201,168,76,0.24),rgba(201,168,76,0.07)); } #page-procurement .proc-pi-auto-head .guard-on { font-size: 9.5px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .05em; color: var(--green); background: rgba(76,175,125,0.12); border: 1px solid rgba(76,175,125,0.32); border-radius: 999px; padding: 3px 11px; display: inline-flex; align-items: center; gap: 6px; } #page-procurement .proc-pi-auto-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 18px; line-height: 1.5; } #page-procurement .proc-pi-auto-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; } #page-procurement .proc-pi-dial-track { display: flex; gap: 10px; } #page-procurement .proc-pi-dial-opt { flex: 1; border-radius: 13px; padding: 15px 15px 14px; position: relative; background: rgba(255,255,255,0.02); border: 1px solid var(--border); text-align: left; } #page-procurement .proc-pi-dial-opt .do-step { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; font-family: 'Montserrat', sans-serif; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; } #page-procurement .proc-pi-dial-opt .do-num { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; color: var(--text-dim); border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03); } #page-procurement .proc-pi-dial-opt.on .do-num { color: #1a160c; background: var(--gold); border-color: transparent; } #page-procurement .proc-pi-dial-opt .do-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-bright); margin-bottom: 6px; } #page-procurement .proc-pi-dial-opt .do-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; } #page-procurement .proc-pi-dial-opt .do-def { position: absolute; bottom: 13px; right: 13px; font-size: 7.5px; font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: .08em; color: var(--text-dim); opacity: .7; } #page-procurement .proc-pi-guards { border-radius: 13px; padding: 16px 17px; background: rgba(255,255,255,0.022); border: 1px solid var(--border); box-shadow: var(--inner-hi); } #page-procurement .proc-pi-guards .gr-h { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); font-weight: 700; font-family: 'Montserrat', sans-serif; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; } #page-procurement .proc-pi-gr-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--text); line-height: 1.45; } #page-procurement .proc-pi-gr-item .gr-ck { width: 16px; height: 16px; border-radius: 5px; flex: none; display: grid; place-items: center; margin-top: 1px; background: rgba(76,175,125,0.16); } /* FIX_NO_FAKE_GUARDRAIL_PROMISE_S1_2026_08_04 — ADDITIVE ONLY; no rule above is changed or retired. Deferred-row treatment ported from __procPoApprovalPanel / FIX_PROC_PO_CREATE_S1_2026_07_05. Attribute selector gives (1,2,0)/(1,3,x) so these beat the (1,1,0)/(1,2,1) base rules in the same #page-procurement ID host. border-BOTTOM-style, not border-style: these rows carry only a bottom border, so the shorthand would give the other three sides a medium-width dashed edge. */ #page-procurement .proc-pi-gr-item[data-defer] { opacity: .5; pointer-events: none; border-bottom-style: dashed; } #page-procurement .proc-pi-gr-item[data-defer] .gr-ck { background: rgba(255,255,255,0.06); } #page-procurement .proc-pi-gr-defer { margin-left: 6px; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 700; opacity: .8; white-space: nowrap; } #page-procurement .proc-pi-gr-lock { margin-top: 13px; font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 7px; line-height: 1.4; } #page-procurement .proc-pi-mode-preview { margin-top: 16px; padding: 13px 15px; border-radius: 12px; display: flex; align-items: center; gap: 12px; background: linear-gradient(170deg,rgba(201,168,76,0.08),rgba(255,255,255,0.015)); border: 1px solid rgba(201,168,76,0.2); } #page-procurement .proc-pi-mode-preview .mp-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,rgba(201,168,76,0.24),rgba(201,168,76,0.06)); } #page-procurement .proc-pi-mode-preview .mp-t { font-size: 12px; color: var(--text); line-height: 1.5; } #page-procurement .proc-pi-sec-gap { margin-top: 18px; } @media (max-width: 1080px) { #page-procurement .proc-pi-hero { grid-template-columns: 1fr; } #page-procurement .proc-pi-gauge { justify-self: center; } #page-procurement .proc-pi-auto-grid { grid-template-columns: 1fr; } #page-procurement .proc-pi-watch-grid { grid-template-columns: 1fr; } } /* FIX_ULTRAMARATHON_PROC_INTEL_2026_06_19 - end Procurement Intelligence scoped CSS. */ /* FIX_ULTRAMARATHON_PROC_PO_2026_06_19 - Purchase Orders rail sub-view scoped CSS. All #page-procurement-scoped, ASCII-only (CSSOM-drop hazard), .proc-po- prefixed for the genuinely-new structure only (reorder-queue skeleton rows, 3-column board + empty cards, board-foot summary strip, autonomy dial track + guardrail grid + budget meter, section header). Reuses the sample's colour/radius/spacing values (procurement_purchase_orders.html L319-486) but carries ZERO seed/series. Reuses .proc-panel/.proc-empty/.proc-coming/ .proc-act-btn/.proc-att-skel/.proc-skel-* verbatim from the family. */ /* section header (sample .sec-head L300-318) */ #page-procurement .proc-po-sec { margin-bottom: 22px; } #page-procurement .proc-po-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } #page-procurement .proc-po-sec-head .proc-po-sh-sub { font-size: 11.5px; color: var(--text-dim); } #page-procurement .proc-po-sec-head .proc-po-sh-pill { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.32); border-radius: 999px; padding: 3px 10px; margin-left: auto; } /* reorder-queue banner (sample .rq-banner L321-341) */ #page-procurement .proc-po-rq-banner { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 13px; background: linear-gradient(150deg,rgba(232,148,58,0.07),rgba(255,255,255,0.012)); border: 1px solid rgba(232,148,58,0.22); margin-bottom: 14px; } #page-procurement .proc-po-rqb-glyph { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg,rgba(232,148,58,0.22),rgba(201,168,76,0.08)); } #page-procurement .proc-po-rqb-act { margin-left: auto; display: flex; gap: 9px; align-items: center; flex: none; } #page-procurement .proc-po-rqb-sel { font-size: 10.5px; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 600; } /* reorder-queue skeleton rows (sample .rq-row L342-405; honest-empty skeleton idiom) */ #page-procurement .proc-po-rq-list { display: flex; flex-direction: column; } #page-procurement .proc-po-rq-skel { position: relative; display: flex; align-items: center; gap: 13px; padding: 13px 14px 13px 16px; border-bottom: 1px solid var(--border); } #page-procurement .proc-po-rq-check { width: 20px; height: 20px; border-radius: 6px; flex: none; border: 1px solid var(--border); background: rgba(255,255,255,0.02); } #page-procurement .proc-po-rq-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } #page-procurement .proc-po-rq-body .proc-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-procurement .proc-po-rq-body .proc-skel-line.w1 { width: 54%; } #page-procurement .proc-po-rq-body .proc-skel-line.w2 { width: 78%; } #page-procurement .proc-po-rq-qty { width: 64px; flex: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } #page-procurement .proc-po-rq-qty .proc-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); width: 100%; } #page-procurement .proc-po-rq-act { flex: none; } /* PO board (sample .board L463-486) */ /* FIX_PO_CANCEL_S1_2026_08_04 — ⛔⛔ THE FOURTH LOCKSTEP PARTNER, AND IT IS NOT NAMED IN THE BRIEF. The brief pins three SINGLE-SITE anchors for the new column (__procPoColOf's return keys, __procPoBoard's `cols` literal, and the column-order array). THIS TRACK COUNT IS A FOURTH, and it fails DIFFERENTLY from the other three: they throw a TypeError that is impossible to miss, whereas leaving this at repeat(3,1fr) throws NOTHING — the fourth column silently WRAPS ONTO A SECOND ROW at full width, which no mechanical gate can see (build.js proves the bundle parses; test/run.js proves the suite is refactor-safe; neither renders anything, and the dead-selector scanner counts rules without checking cascade or geometry). Found by reading the CSS, not by any check. The 1100px override below collapses to 1fr and needs no edit. */ #page-procurement .proc-po-board { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; } #page-procurement .proc-po-col { background: linear-gradient(170deg,#222020,#1c1a18); border: 1px solid var(--border); border-radius: 14px; padding: 13px; min-height: 200px; box-shadow: 0 18px 40px -34px #000; } #page-procurement .proc-po-bc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 3px; } #page-procurement .proc-po-bc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } #page-procurement .proc-po-bc-dot.transit { background: var(--blue); } #page-procurement .proc-po-bc-dot.received { background: var(--green); } /* FIX_PO_CANCEL_S1_2026_08_04 — cancelled column dot. Deliberately MUTED, not red: a cancellation is a deliberate owner action with an intact record, not an error state, and red would read as a failure. */ #page-procurement .proc-po-bc-dot.cancelled { background: var(--text-dim); } #page-procurement .proc-po-bc-count { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; } #page-procurement .proc-po-col-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 26px 10px; text-align: center; color: var(--text-dim); font-size: 11px; line-height: 1.5; } #page-procurement .proc-po-col-empty .proc-po-col-empty-ic { font-size: 18px; opacity: .5; } /* board-foot summary strip (sample .board-foot L?) */ #page-procurement .proc-po-board-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 15px; border-radius: 13px; background: rgba(255,255,255,0.022); border: 1px solid var(--border); box-shadow: var(--inner-hi); } #page-procurement .proc-po-bf-stat { display: flex; flex-direction: column; gap: 2px; } #page-procurement .proc-po-bf-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16px; color: var(--text-dim); line-height: 1; } #page-procurement .proc-po-bf-l { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); opacity: .8; } #page-procurement .proc-po-bf-sep { width: 1px; height: 26px; background: var(--border); } #page-procurement .proc-po-bf-spacer { flex: 1; } /* autonomy dial (sample .dial L406-462) */ #page-procurement .proc-po-auto-panel { padding: 16px 17px; } #page-procurement .proc-po-auto-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } #page-procurement .proc-po-auto-head .proc-po-ah-glyph { 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)); } #page-procurement .proc-po-auto-sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 14px; } #page-procurement .proc-po-dial-track { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } #page-procurement .proc-po-dial-opt { flex: 1; padding: 13px 10px; text-align: center; position: relative; border-right: 1px solid var(--border); } #page-procurement .proc-po-dial-opt .proc-po-do-step { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; } #page-procurement .proc-po-dial-opt .proc-po-do-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text); margin-top: 5px; line-height: 1.25; } #page-procurement .proc-po-dial-opt .proc-po-do-tag { font-size: 9.5px; color: var(--text-dim); margin-top: 3px; } #page-procurement .proc-po-dial-opt.on .proc-po-do-step { color: var(--gold); } #page-procurement .proc-po-dial-opt.on .proc-po-do-name { color: var(--text-bright); } /* hard guardrails (sample .guard-grid L432-462) */ #page-procurement .proc-po-guard-h { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; font-family: 'Montserrat', sans-serif; margin: 18px 0 11px; display: flex; align-items: center; gap: 8px; } #page-procurement .proc-po-guard-h .proc-po-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 9px; letter-spacing: .04em; } #page-procurement .proc-po-guard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #page-procurement .proc-po-guard { background: rgba(255,255,255,0.022); border: 1px solid var(--border); border-radius: 11px; padding: 12px 13px; box-shadow: var(--inner-hi); position: relative; } #page-procurement .proc-po-guard.full { grid-column: 1 / -1; } #page-procurement .proc-po-guard .proc-po-g-l { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; } #page-procurement .proc-po-guard .proc-po-g-edit { font-size: 10px; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 600; margin-left: auto; opacity: .6; } #page-procurement .proc-po-guard .proc-po-g-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: var(--text-dim); line-height: 1; } #page-procurement .proc-po-guard .proc-po-g-d { font-size: 10px; color: var(--text-dim); margin-top: 5px; line-height: 1.4; } #page-procurement .proc-po-budget-meter { margin-top: 10px; } #page-procurement .proc-po-bm-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); overflow: hidden; } #page-procurement .proc-po-bm-cap { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-dim); margin-top: 6px; } #page-procurement .proc-po-g-toggle-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--text); line-height: 1.4; } #page-procurement .proc-po-g-toggle-row:not(:last-child) { margin-bottom: 8px; } #page-procurement .proc-po-g-tog { width: 30px; height: 17px; border-radius: 999px; flex: none; background: rgba(76,175,125,0.22); border: 1px solid rgba(76,175,125,0.4); position: relative; display: grid; place-items: center; } #page-procurement .proc-po-guard .proc-po-g-cap { display: flex; align-items: baseline; gap: 7px; } /* FIX_PROC_PO_CREATE_S1_2026_07_05 — deferred/locked guardrail state (caps + preferred-supplier + undo-24h arrive with the autonomy-level engine, D1a). Sample .guard layout, greyed + non-interactive. */ #page-procurement .proc-po-guard-deferred .proc-po-guard.is-locked { opacity: .5; pointer-events: none; background: rgba(255,255,255,0.014); border-style: dashed; } #page-procurement .proc-po-guard.is-locked .proc-po-g-tog { background: rgba(255,255,255,0.06); border-color: var(--border); } #page-procurement .proc-po-g-defer { margin-left: auto; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 700; opacity: .8; white-space: nowrap; } #page-procurement .proc-po-auto-terms { font-size: 10px; color: var(--text-dim); margin-top: 14px; line-height: 1.5; opacity: .8; } /* FIX_PROC_PO_CREATE_S1_2026_07_05 — LIT reorder-queue rows (sample .rq-row L342-405), LIT board cards (sample .po-card L474-500), create-PO modal (sample .cp-* L502-588), PO-detail timeline (sample .pod-* L591-603), toast (sample .toast L606-615), and the simplified approval toggle (sample dial → ON/OFF this session). All #page-procurement- scoped, ASCII-only, proc-po-/proc-cp- prefixed. */ /* lit reorder rows */ #page-procurement .proc-po-rq-row { display: grid; grid-template-columns: 34px 1.7fr 1.5fr 0.9fr 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); position: relative; transition: background .18s ease; } #page-procurement .proc-po-rq-row.done { opacity: .5; } #page-procurement .proc-po-rq-row.skipped { opacity: .45; } #page-procurement .proc-po-rq-row.skipped .proc-po-rqi-name { text-decoration: line-through; } #page-procurement .proc-po-rq-chk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: rgba(255,255,255,0.03); cursor: pointer; display: grid; place-items: center; transition: .15s; } #page-procurement .proc-po-rqi-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-bright); display: flex; align-items: center; gap: 8px; } #page-procurement .proc-po-rqi-stock { font-size: 11px; color: var(--text-dim); margin-top: 3px; display: flex; align-items: center; gap: 6px; } #page-procurement .proc-po-inv-tag { font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; padding: 1px 6px; border-radius: 6px; color: var(--blue); background: rgba(91,155,213,0.13); border: 1px solid rgba(91,155,213,0.3); text-transform: uppercase; } #page-procurement .proc-po-inv-tag.low { color: var(--red); background: rgba(224,85,85,0.13); border-color: rgba(224,85,85,0.32); } #page-procurement .proc-po-inv-tag.crit { color: #fff; background: rgba(224,85,85,0.55); border-color: rgba(224,85,85,0.7); } #page-procurement .proc-po-rq-rec .proc-po-rr-qty { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: var(--text-bright); } #page-procurement .proc-po-rr-why { font-size: 10px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; cursor: help; border-bottom: 1px dotted rgba(201,168,76,0.4); display: inline-block; } #page-procurement .proc-po-rq-sup .proc-po-rs-name { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); font-size: 12px; } #page-procurement .proc-po-rs-pref { font-size: 9px; color: var(--green); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; } #page-procurement .proc-po-rs-price { font-size: 11px; color: var(--text-dim); margin-top: 2px; } #page-procurement .proc-po-rq-when .proc-po-rw-by { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-bright); } #page-procurement .proc-po-rq-when.urgent .proc-po-rw-by { color: var(--red); } #page-procurement .proc-po-rw-lead { font-size: 10px; color: var(--text-dim); margin-top: 3px; } #page-procurement .proc-po-rq-act2 { display: flex; gap: 7px; align-items: center; justify-self: end; } #page-procurement .proc-po-a-approve { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 8px; padding: 8px 13px; border: none; color: #16140F; background: linear-gradient(180deg,var(--green),#3c9568); box-shadow: 0 5px 14px -6px rgba(76,175,125,0.55); transition: .16s; white-space: nowrap; } #page-procurement .proc-po-a-adjust { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.04); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; transition: .16s; } #page-procurement .proc-po-a-skip { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; cursor: pointer; color: var(--text-dim); background: none; border: none; padding: 6px; transition: .16s; } #page-procurement .proc-po-rq-state { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--green); display: none; align-items: center; gap: 5px; } #page-procurement .proc-po-rq-row.done .proc-po-rq-state { display: flex; } #page-procurement .proc-po-rq-row.skipped .proc-po-rq-state { display: flex; color: var(--text-dim); } #page-procurement .proc-po-qty-edit { display: none; align-items: center; gap: 6px; margin-top: 6px; } #page-procurement .proc-po-qty-step { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.04); color: var(--text-bright); font-family: 'Montserrat', sans-serif; font-weight: 700; cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; } #page-procurement .proc-po-qty-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: var(--gold); min-width: 34px; text-align: center; } #page-procurement .proc-po-qty-unit { font-size: 10px; color: var(--text-dim); } /* lit board cards */ #page-procurement .proc-po-card { background: rgba(255,255,255,0.022); border: 1px solid var(--border); border-radius: 11px; padding: 12px 13px; margin-bottom: 10px; cursor: pointer; transition: .16s ease; position: relative; overflow: hidden; } #page-procurement .proc-po-c-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } #page-procurement .proc-po-c-id { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11.5px; color: var(--text-bright); letter-spacing: .02em; } #page-procurement .proc-po-c-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: var(--text-bright); } #page-procurement .proc-po-c-supp { font-size: 11px; color: var(--text); margin-top: 4px; font-weight: 600; } #page-procurement .proc-po-c-meta { font-size: 10px; color: var(--text-dim); margin-top: 3px; } #page-procurement .proc-po-c-foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; } #page-procurement .proc-po-c-chip { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; } #page-procurement .proc-po-c-chip.draft { color: var(--gold); background: rgba(201,168,76,0.13); border: 1px solid rgba(201,168,76,0.3); } #page-procurement .proc-po-c-chip.eta { color: var(--blue); background: rgba(91,155,213,0.13); border: 1px solid rgba(91,155,213,0.3); } #page-procurement .proc-po-c-chip.ontime { color: var(--green); background: rgba(76,175,125,0.13); border: 1px solid rgba(76,175,125,0.3); } /* FIX_PO_CANCEL_S1_2026_08_04 — cancelled status pill + the cancelled card's own muted treatment, so a terminal order reads as settled rather than as an active one. Same muted rationale as the column dot. */ #page-procurement .proc-po-c-chip.cancelled { color: var(--text-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); text-decoration: line-through; } /* FIX_PO_CLOSE_SHORT_S1_2026_08_27 — the closed-short pill: settled, NOT voided. Same muted treatment as the cancelled sibling directly above and DELIBERATELY WITHOUT its line-through — a short-closed order was really placed, goods really arrived against it and money really moved, so striking it through would assert the opposite. ⛔ The sibling rule is BYTE-UNCHANGED and no new colour literal is introduced: every value here resolves from the variables that rule already uses. */ #page-procurement .proc-po-c-chip.closed { color: var(--text-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); } #page-procurement .proc-po-card.cancelled .proc-po-c-id { text-decoration: line-through; } #page-procurement .proc-po-card.cancelled { opacity: .72; } /* FIX_PO_CLOSEDSHORT_CARDSTYLE_2026_08_31 — a closed-short order's card id was struck through because it shares the terminal column's CLASS with a genuinely cancelled order (the two rules directly above bind on .proc-po-card.cancelled, and the routing that puts both statuses in that column is deliberate — see __procPoColOf's FIX_PO_CLOSE_SHORT_S1_2026_08_27 header). The terminal chip rule two rules above already applies the same principle to the pill (closed-short: muted, NOT struck through — "a closed order is not a voided one: it was really placed, goods really arrived against it, and the money really moved"); the card id was the sibling left behind. Specificity is load-bearing: the rule directly above, #page-procurement .proc-po-card.cancelled .proc-po-c-id, is (1 id, 3 classes). This rule carries BOTH card classes — (1 id, 4 classes) — so it out-specifies the rule above REGARDLESS OF SOURCE ORDER. A rule carrying only the modifier (.proc-po-card.closed-short .proc-po-c-id) would TIE at (1 id, 3 classes) and win only by source order — the exact fragility the FIX_PROC_CP_MODAL_SPECIFICITY_2026_07_12 comment in this same stylesheet records as a real shipped failure; do not narrow this selector to the tying form. Only text-decoration-line changes, to none. opacity: .72 on the card (rule directly above) is UNTOUCHED and deliberately so, mirroring the chip's split exactly: a short-closed order IS settled (muting is true) but is NOT voided (striking it through is not). Both rules directly above are byte-unchanged. */ #page-procurement .proc-po-card.cancelled.closed-short .proc-po-c-id { text-decoration: none; } #page-procurement .proc-po-c-approve { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; cursor: pointer; border-radius: 7px; padding: 4px 10px; border: none; color: #16140F; background: linear-gradient(180deg,var(--green),#3c9568); margin-left: auto; } /* create-PO + detail modal (own scrim/modal so it never collides with the KPI popover) */ /* FIX_PROC_CP_MODAL_SPECIFICITY_2026_07_12 — the hide rule below is #page-procurement-scoped (specificity 1 id + 1 class); the .on show rules were bare 2-class selectors (LOWER specificity), so the id-scoped display:none ALWAYS won and __procPoShowModal's .on class never showed the modal ("+ Create PO" opened nothing). Fix: raise the .on show rules to the SAME #page-procurement scope tier (1 id + 2 classes) so they out-specify the hide rule WITHOUT broadening the hide rule's scope. .proc-cp-scrim/.proc-cp-modal are procurement-only (injected inside #page-procurement); the PO-send gate uses its own .po-gate-* containers, so this is zero-collateral. */ /* FIX_PROC_PR_CLIENT_S1_2026_08_27 (v1.25) — Procurement ▸ Requests surface. ⛔ SCOPED AT #page-procurement, MATCHING THE SIBLING .proc-po-* / .proc-cp-* RULES ABOVE, AND THAT IS A SPECIFICITY DECISION RATHER THAN A HOUSE-STYLE ONE. The surrounding rules are (1,1,0); an unscoped (0,1,0) rule alongside them loses to any id-scoped rule that happens to reach the same element, and the failure mode is silent — the markup greps as present and renders unstyled. Every class below is NET-NEW to this build (no legacy .proc-pr-* rule exists to collide with), so this scoping is about surviving the cascade in this room, not about overriding anything. ⛔ NO MECHANICAL GATE COVERS CSS. Neither build gate renders anything and the dead-selector scanner is explicitly not a general is-this-used checker, so these rules are settled by looking at them. */ #page-procurement .proc-pr-bar { margin: 14px 0 4px; } #page-procurement .proc-pr-raise, #page-procurement .proc-pr-approve, #page-procurement .proc-pr-reject, #page-procurement .proc-pr-resubmit, #page-procurement .proc-pr-promote, #page-procurement .proc-pr-form button { background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.42); color: var(--text); border-radius: 9px; padding: 8px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s ease; } #page-procurement .proc-pr-raise:hover, #page-procurement .proc-pr-approve:hover, #page-procurement .proc-pr-reject:hover, #page-procurement .proc-pr-resubmit:hover, #page-procurement .proc-pr-promote:hover { background: rgba(201,168,76,0.24); } #page-procurement .proc-pr-reject { background: rgba(255,255,255,0.03); border-color: var(--border); } #page-procurement .vn-write-locked { opacity: .45; cursor: not-allowed; filter: grayscale(0.5); } #page-procurement .proc-pr-list { margin-top: 12px; } #page-procurement .proc-pr-card { background: rgba(255,255,255,0.022); border: 1px solid var(--border); border-radius: 12px; padding: 14px 15px; margin-bottom: 12px; position: relative; overflow: hidden; } #page-procurement .proc-pr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; } #page-procurement .proc-pr-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); } #page-procurement .proc-pr-pill.done { background: rgba(201,168,76,0.16); border-color: rgba(201,168,76,0.45); } #page-procurement .proc-pr-req { font-size: 12.5px; font-weight: 600; } #page-procurement .proc-pr-when { font-size: 11px; color: var(--faint); } #page-procurement .proc-pr-rev { font-size: 11px; color: var(--gold); border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; padding: 2px 8px; } #page-procurement .proc-pr-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--faint); margin-bottom: 6px; } #page-procurement .proc-pr-meta .faintish, #page-procurement .faintish { opacity: .7; font-style: italic; } #page-procurement .proc-pr-just { font-size: 12.5px; line-height: 1.55; margin-bottom: 8px; } #page-procurement .proc-pr-prior { font-size: 12px; line-height: 1.5; color: var(--text); background: rgba(214,120,110,0.08); border-left: 3px solid rgba(214,120,110,0.45); border-radius: 0 8px 8px 0; padding: 8px 11px; margin: 8px 0; } #page-procurement .proc-pr-prior.big { font-size: 13px; margin: 14px 0 18px; } #page-procurement .proc-pr-lines { border-top: 1px solid var(--border); margin-top: 9px; padding-top: 8px; } #page-procurement .proc-pr-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding: 4px 0; color: var(--text); } #page-procurement .proc-pr-rmline { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; } #page-procurement .proc-pr-total { text-align: right; font-size: 12.5px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 6px; } #page-procurement .proc-pr-hist { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; } #page-procurement .proc-pr-hist-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } #page-procurement .proc-pr-hrow { padding: 8px 0; border-bottom: 1px dashed var(--border); } #page-procurement .proc-pr-hrow.sup { opacity: .62; } #page-procurement .proc-pr-hhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12px; } #page-procurement .proc-pr-sup { font-size: 10.5px; color: var(--faint); font-style: italic; } #page-procurement .proc-pr-hreason { font-size: 12.5px; line-height: 1.5; margin: 5px 0 3px; } #page-procurement .proc-pr-hsnap { font-size: 11px; color: var(--faint); } #page-procurement .proc-pr-act { margin-top: 11px; } #page-procurement .proc-pr-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 7px; } #page-procurement .proc-pr-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 6px; } #page-procurement .proc-pr-rlbl { display: block; font-size: 11px; color: var(--faint); margin-bottom: 4px; } #page-procurement .proc-pr-reason { width: 100%; max-width: 520px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 7px 10px; font-size: 12.5px; } #page-procurement .proc-pr-form { max-width: 860px; } #page-procurement .proc-pr-back { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 12px; padding: 0 0 12px; } #page-procurement .proc-pr-fgrid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; } #page-procurement .proc-pr-flbl { display: block; font-size: 11.5px; color: var(--faint); margin-bottom: 14px; } #page-procurement .proc-pr-flbl select, #page-procurement .proc-pr-flbl input, #page-procurement .proc-pr-flbl textarea { display: block; width: 100%; margin-top: 5px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 12.5px; font-family: inherit; } #page-procurement .proc-pr-addrow { border: 1px solid var(--border); border-radius: 11px; padding: 12px 13px; margin-bottom: 14px; display: grid; grid-template-columns: 2fr 2fr 0.7fr 0.9fr auto; gap: 9px; align-items: center; } #page-procurement .proc-pr-addh { grid-column: 1 / -1; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } #page-procurement .proc-pr-addrow select, #page-procurement .proc-pr-addrow input { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 12.5px; font-family: inherit; min-width: 0; } #page-procurement .proc-pr-err { grid-column: 1 / -1; display: none; font-size: 11.5px; color: rgba(226,140,130,0.95); } #page-procurement .proc-pr-toast { position: fixed; right: 24px; bottom: 24px; z-index: 140; display: none; background: linear-gradient(168deg,rgba(40,37,33,0.99),rgba(27,24,21,0.99)); border: 1px solid rgba(201,168,76,0.3); border-radius: 12px; padding: 12px 16px; box-shadow: 0 30px 70px -20px #000; max-width: 340px; } #page-procurement .proc-pr-toast .t-tx { display: flex; flex-direction: column; gap: 3px; } /* FIX_PURCHREQ_QUOTES_S1_2026_08_28 (v1.25) — the quotes compare surface, inside the approved request's card. ⛔ SCOPED AT #page-procurement FOR THE REASON STATED ON THE SIBLING BLOCK ABOVE, and it is a specificity decision rather than a house-style one: the surrounding rules are (1,1,0), so an unscoped (0,1,0) rule alongside them loses to any id-scoped rule reaching the same element, and the failure is SILENT — the markup greps as present and renders unstyled. ⛔ Every class below is NET-NEW to this build (verified: no legacy .proc-pr-q* rule exists), so this is about surviving the cascade in this room rather than overriding anything. ⛔ NO MECHANICAL GATE COVERS CSS. Neither build gate renders anything, and the dead-selector scanner is explicitly not a general is-this-used checker, so these rules are settled by rendering them and looking. */ #page-procurement .proc-pr-q { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 11px; } #page-procurement .proc-pr-q-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; } #page-procurement .proc-pr-q-empty { font-size: 12.5px; line-height: 1.6; color: var(--text); background: rgba(255,255,255,0.022); border: 1px dashed var(--border); border-radius: 10px; padding: 11px 13px; } #page-procurement .proc-pr-q-tbl { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; } /* FIX_PROC_QUOTE_LANDED_S1_2026_09_15 — grid-template-columns widened from 6 to 7 TRACKS to match the new Landed column inserted between Quoted and Lead time (§3.10(b)) — caught at render-verify: the header row and every data row already emit a 7th , and an unmatched track count left the grid mis-laying-out its own pick-button column into an implicit auto track rather than the intended right-aligned slot. */ #page-procurement .proc-pr-q-row { display: grid; grid-template-columns: 2fr 0.9fr 1.3fr 1fr 1.1fr 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; font-size: 12px; border-bottom: 1px solid var(--border); } #page-procurement .proc-pr-q-row.notsel { opacity: .6; } #page-procurement .proc-pr-q-vn { font-weight: 600; display: flex; flex-direction: column; gap: 2px; min-width: 0; } #page-procurement .proc-pr-q-unreg { font-size: 10.5px; color: var(--faint); font-style: italic; font-weight: 400; } #page-procurement .proc-pr-q-amt { font-weight: 700; } #page-procurement .proc-pr-q-exp { font-size: 10.5px; color: rgba(226,140,130,0.95); font-style: italic; } #page-procurement .proc-pr-q-st { font-size: 11px; color: var(--faint); } #page-procurement .proc-pr-q-chosen { font-size: 11px; color: var(--gold); letter-spacing: .04em; text-transform: uppercase; } /* FIX_PROC_QUOTE_LANDED_S1_2026_09_15 — §3.10(b)/(c)/(d) new classes, all scoped under #page-procurement matching every sibling rule in this block. .proc-pr-q-landed is the cell; .proc-pr-q-incomplete is the honest-incomplete state (italic, dimmer — visually distinct from a measured figure, never a fabricated one); .proc-pr-q-bestlanded is the marker, styled like the existing .proc-pr-q-chosen badge for visual consistency; .proc-pr-q-peek is the one-line breakdown sitting BELOW the grid row (not a grid child — a full-width sibling block, so it does not participate in the 7-track layout above). */ #page-procurement .proc-pr-q-landed { font-weight: 700; } #page-procurement .proc-pr-q-incomplete { font-weight: 400; font-style: italic; color: var(--faint); } #page-procurement .proc-pr-q-bestlanded { font-size: 10px; color: var(--gold); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; display: block; margin-top: 2px; } #page-procurement .proc-pr-q-peek { font-size: 10.5px; color: var(--faint); padding: 0 12px 8px; line-height: 1.5; } /* the record-form's optional link input, styled like every sibling .proc-pr-linechip anchor */ #page-procurement .proc-pr-linechip { font-size: 10.5px; color: var(--gold); margin-left: 6px; text-decoration: none; } #page-procurement .proc-pr-q-sub { font-size: 11.5px; color: var(--faint); line-height: 1.5; padding: 0 12px 9px; border-bottom: 1px solid var(--border); } #page-procurement .proc-pr-q-select { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: .15s ease; } #page-procurement .proc-pr-q-note { font-size: 11.5px; color: var(--faint); line-height: 1.55; margin-top: 8px; } #page-procurement .proc-pr-q-form, #page-procurement .proc-pr-q-skip { margin-top: 12px; border: 1px solid var(--border); border-radius: 11px; padding: 12px 13px; } #page-procurement .proc-pr-q-fh { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; } /* FIX_PROC_QUOTE_DOCTYPE_S2_2026_09_16 (§3.7) — "From a document" row layout. New rules, added because no existing shape fits: .proc-pr-q-row is a FIXED 7-column grid (grid-template-columns: 2fr 0.9fr 1.3fr 1fr 1.1fr 1fr auto) sized for the comparison table, and this row carries only vendor/amount/two buttons — reusing it would leave three empty grid cells rather than a broken render, but a visibly wrong one. The buttons themselves need NO new CSS: they carry the shipped .proc-pr-q-add / .proc-pr-q-skipbtn classes alongside their JS hook classes, the same render-verify-proven pairing this file already uses for the invite/revoke controls immediately below. */ #page-procurement .proc-pr-q-fdrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } #page-procurement .proc-pr-q-fdvn { font-weight: 600; flex: 1; min-width: 0; } #page-procurement .proc-pr-q-fdamt { font-weight: 700; white-space: nowrap; } #page-procurement .proc-pr-q-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } #page-procurement .proc-pr-q-lbl { display: block; font-size: 11px; color: var(--faint); margin-bottom: 8px; } #page-procurement .proc-pr-q-lbl input, #page-procurement .proc-pr-q-lbl select { display: block; width: 100%; margin-top: 5px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 7px 10px; font-size: 12.5px; font-family: inherit; min-width: 0; } #page-procurement .proc-pr-q-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; } #page-procurement .proc-pr-q-add, #page-procurement .proc-pr-q-skipbtn { background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.42); color: var(--text); border-radius: 9px; padding: 8px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s ease; } #page-procurement .proc-pr-q-add:hover, #page-procurement .proc-pr-q-skipbtn:hover { background: rgba(201,168,76,0.24); } #page-procurement .proc-pr-q-skipbtn { background: rgba(255,255,255,0.03); border-color: var(--border); } #page-procurement .proc-pr-q-skipwhy { width: 100%; max-width: 520px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 7px 10px; font-size: 12.5px; margin-bottom: 9px; } @media (max-width: 780px) { #page-procurement .proc-pr-fgrid { grid-template-columns: 1fr; } #page-procurement .proc-pr-addrow { grid-template-columns: 1fr 1fr; } #page-procurement .proc-pr-q-fgrid { grid-template-columns: 1fr; } /* the comparison table stops being a grid on narrow widths — each quote becomes a stacked block rather than six columns crushed to unreadable widths */ #page-procurement .proc-pr-q-row { grid-template-columns: 1fr 1fr; gap: 6px; } #page-procurement .proc-pr-q-row.hd { display: none; } } #page-procurement .proc-cp-scrim, #page-procurement .proc-cp-modal { display: none; } #page-procurement .proc-po-c-send { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; cursor: pointer; border-radius: 7px; padding: 4px 10px; border: none; color: #16140F; background: linear-gradient(180deg,var(--gold),#9c7f33); margin-left: auto; } /* FIX_PO_CANCEL_S1_2026_08_04 — the Cancel affordance. A GHOST/outline treatment on purpose: it sits beside the gold Send and green Approve buttons, and a terminal money action must not compete visually with the two forward actions or it invites a mis-click. `margin-left:auto` is deliberately OMITTED — its two siblings each claim it, and a third claimant would fight them for the same free space. */ #page-procurement .proc-po-c-cancel { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; cursor: pointer; border-radius: 7px; padding: 4px 10px; background: transparent; color: var(--text-dim); border: 1px solid var(--border-strong); } /* FIX_PROC_SAVE_INERT_HONEST_2026_09_18 (cursor half — see the rule above for the full history). #page-procurement-scoped so its specificity (1,2,0) decisively beats `.vk .btn-primary`'s (0,2,0) for #proc-cp-save, without altering cursor anywhere else: #po-gate-send is outside #page-procurement (body-appended modal) so this never reaches it, matching the .proc-coming idiom's own ID-anchored scope (same file, #page-procurement .proc-coming) — deliberately narrower than that rule's base selector, precisely so it changes nothing beyond the one site this brief targets. */ #page-procurement .proc-cp-save.is-off { cursor: not-allowed; } /* simplified approval toggle (sample dial → ON/OFF this session) */ #page-procurement .proc-po-appr-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: rgba(255,255,255,0.022); border: 1px solid var(--border); border-radius: 11px; padding: 14px 15px; margin-bottom: 14px; } #page-procurement .proc-po-appr-txt { font-size: 13px; color: var(--text-bright); font-weight: 600; font-family: 'Montserrat', sans-serif; } #page-procurement .proc-po-appr-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 1.45; } #page-procurement .proc-po-appr-switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; cursor: pointer; } #page-procurement .proc-po-appr-switch input { opacity: 0; width: 0; height: 0; position: absolute; } #page-procurement .proc-po-appr-slider { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.14); transition: .18s; } /* two-column board + autonomy row (sample .grid L?) */ #page-procurement .proc-po-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; } @media (max-width: 1100px) { #page-procurement .proc-po-board { grid-template-columns: 1fr; } #page-procurement .proc-po-grid { grid-template-columns: 1fr; } #page-procurement .proc-po-guard-grid { grid-template-columns: 1fr; } } /* FIX_VENDORCARD_UNIFIED_ADD_2026_07_21 (Cut A) — #page-procurement mirror of the vendor-popup modal + field vocabulary. The Create-PO modal (proc-cp-supplier "+ Add new vendor") opens the vendor popup while #page-procurement is the visible page; the popup mounts into that page (opts.hostPageId), so the otherwise #page-operations-only modal shell + .inv-field/.inv-btn/.inv-vsec styles are re-declared here so it renders styled over procurement. Copied verbatim from the #page-operations definitions (grep FIX_PROCUREMENT_LANDING_VENDOR_2026_06_29 / the 18660-region .inv-field vocabulary). ASCII-only. */ #page-procurement .inv-scrim { position: fixed; inset: 0; background: rgba(8,7,5,.62); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 10090; /* FIX_VENDOR_MODAL_ZINDEX_2026_07_21 raise above #page-staff-app shell (z-index:1000); match .mko top-level convention (scrim 10090) */ } #page-procurement .inv-scrim.show { opacity: 1; pointer-events: auto; } #page-procurement .inv-vmodal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 10100; opacity: 0; pointer-events: none; transition: opacity .2s; padding: 24px; box-sizing: border-box; /* FIX_VENDOR_MODAL_ZINDEX_2026_07_21 raise above #page-staff-app shell (z-index:1000); match .mko top-level convention (modal 10100) */ } #page-procurement .inv-vmodal.show { opacity: 1; pointer-events: auto; } #page-procurement .inv-vmodal-card { width: min(640px, calc(100vw - 40px)); max-height: 88vh; overflow: hidden; background: #232120; border: 1px solid rgba(255,255,255,0.13); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.55); display: flex; flex-direction: column; transform: translateY(10px) scale(.99); transition: transform .2s; } #page-procurement .inv-vmodal.show .inv-vmodal-card { transform: translateY(0) scale(1); } #page-procurement .inv-dr-head { padding: 22px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: flex-start; justify-content: space-between; } #page-procurement .inv-dr-head h2 { font-family: 'Montserrat', sans-serif; font-size: 19px; color: #F0EBE2; margin: 0; } #page-procurement .inv-dr-head p { margin: 5px 0 0; font-size: 12.5px; color: #8A857D; } #page-procurement .inv-dr-close { font-size: 22px; color: #8A857D; width: 32px; height: 32px; border-radius: 8px; border: none; background: none; cursor: pointer; } #page-procurement .inv-dr-close:hover { background: rgba(255,255,255,.06); color: #F0EBE2; } #page-procurement .inv-dr-body { padding: 20px 24px; overflow-y: auto; flex: 1; } #page-procurement .inv-dr-foot { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: flex-end; gap: 10px; } #page-procurement .inv-field { margin-bottom: 16px; } #page-procurement .inv-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #8A857D; margin-bottom: 7px; font-family: 'Montserrat', sans-serif; } #page-procurement .inv-field input, #page-procurement .inv-field select { width: 100%; box-sizing: border-box; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 7px; color: #F0EBE2; padding: 10px 12px; font-size: 13.5px; outline: none; transition: border-color .12s, box-shadow .12s; } #page-procurement .inv-field input:focus, #page-procurement .inv-field select:focus { border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.28); } #page-procurement .inv-field-row { display: flex; gap: 14px; } #page-procurement .inv-field-row .inv-field { flex: 1; } #page-procurement .inv-vsec { margin: 4px 0 2px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); } #page-procurement .inv-vsec:first-child { border-top: none; padding-top: 0; } #page-procurement .inv-vsec-h { font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: #C9A84C; margin: 0 0 12px; } #page-procurement .inv-vmodal textarea.inv-vd-area { width: 100%; box-sizing: border-box; min-height: 72px; resize: vertical; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 7px; color: #F0EBE2; padding: 10px 12px; font-size: 13.5px; font-family: 'Open Sans', sans-serif; outline: none; } #page-procurement .inv-vmodal textarea.inv-vd-area:focus { border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.28); } #page-procurement .inv-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; border: 1px solid rgba(255,255,255,0.13); background: #232120; color: #C4BFB6; transition: background .15s, border-color .15s; white-space: nowrap; cursor: pointer; } #page-procurement .inv-btn:hover { background: #2a2825; color: #F0EBE2; } #page-procurement .inv-btn.gold { background: #C9A84C; color: #1a160c; border-color: #C9A84C; box-shadow: 0 0 0 1px rgba(201,168,76,.3), 0 6px 20px -8px rgba(201,168,76,0.28); } #page-procurement .inv-btn.gold:hover { background: #d8b85e; color: #1a160c; } #page-procurement .inv-btn.ghost { background: transparent; } #page-procurement .vnc-kv .inv-field { margin-bottom: 0; }