/* ════════════════════════════════════════════════════════════════════════════ FIX_WWK_OPS_S1_2026_06_10 — Operations Command Centre (Overview) styles, scoped under #page-operations. Built TO design_samples/operations/operations_landing_command.html at ultra-HD fidelity (the founder sample is the spec). Literal hex values mirror the sample's :root tokens (the platform's own :root names differ; inlining the sample's exact palette preserves the sample aesthetic). ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM — the established L18.8 lesson). S1a (landing): KPI band + capacity heatmap hero + needs-attention. The KPI expand-chevron + hover-hint affordances render for VISUAL FIDELITY but their click/hover handlers are UNWIRED (the hover-peek popovers + click-expand modals are WWK-Operations S1b — their CSS lands with S1b too). The heatmap cell hover-tooltip is intrinsic to the hero visual and IS in S1a. ════════════════════════════════════════════════════════════════════════════ */ #page-operations .op-head-row { display: flex; align-items: flex-end; gap: 16px; } #page-operations .op-head-row h1 { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: #F0EBE2; margin: 0; } #page-operations .op-head-row .op-when { font-size: 11.5px; color: #8A857D; padding-bottom: 2px; } /* FIX_KPIWIN_P2_ROLLOUT_2026_07_01 — Operations header: .op-head-spacer pushes the reusable window control to the top-right (the header has no space-between); .op-asof is the snapshot "as of today" marker. The Ops Overview KPIs (Utilisation / Inventory / Equipment / Maint. due / Deliveries / Ops Health) are ALL point-in-time on-hand SNAPSHOT counts — none is a period sum — so the control mounts for consistency + resolves the range, but every tile carries the marker under a non-MTD window rather than re-deriving a (nonexistent) period figure. */ #page-operations .op-head-row .op-head-spacer { flex: 1 1 auto; } #page-operations .op-asof { font-size: 10px; color: #8A857D; font-style: italic; margin-left: 4px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } #page-operations .op-statusline { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; font-size: 13.5px; color: #C4BFB6; } #page-operations .op-statusline .op-dot { width: 10px; height: 10px; border-radius: 50%; background: #E8943A; box-shadow: 0 0 11px #E8943A; position: relative; flex: 0 0 auto; } #page-operations .op-statusline .op-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(232,148,58,0.4); animation: opPulse 2.6s ease-out infinite; } #page-operations .op-statusline b { color: #F0EBE2; font-weight: 700; } #page-operations .op-statusline .op-fix { color: #E8943A; font-weight: 600; } /* KPI band — 6 tiles */ #page-operations .op-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; margin-bottom: 18px; } #page-operations .op-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg, #262320, #1f1c19); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1); } #page-operations .op-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #C9A84C; opacity: .55; } #page-operations .op-kpi.op-k-util::before { background: #C9A84C; } #page-operations .op-kpi.op-k-inv::before { background: #E8943A; } #page-operations .op-kpi.op-k-equip::before { background: #E8943A; } #page-operations .op-kpi.op-k-maint::before { background: #E05555; } #page-operations .op-kpi.op-k-deliv::before { background: #4CAF7D; } #page-operations .op-kpi.op-k-health::before { background: #C9A84C; } #page-operations .op-kpi:hover { 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-operations .op-kpi .op-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; } #page-operations .op-kpi .op-val { font-family: 'Montserrat', sans-serif; font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; font-variant-numeric: tabular-nums; } #page-operations .op-kpi .op-sub { font-size: 11.5px; margin-top: 7px; color: #8A857D; display: flex; align-items: center; gap: 5px; } #page-operations .op-kpi .op-sub .op-delta { font-weight: 700; } #page-operations .op-kpi .op-sub .op-pos { color: #4CAF7D; } #page-operations .op-kpi .op-sub .op-warn { color: #E8943A; } #page-operations .op-kpi .op-sub .op-neg { color: #E05555; } #page-operations .op-kpi .op-sub .op-blue { color: #5B9BD5; } /* expand affordance chevron (S1a inert — visual fidelity only; click/hover wiring is S1b) */ #page-operations .op-kpi .op-expand { position: absolute; right: 11px; bottom: 11px; width: 16px; height: 16px; opacity: .38; transition: opacity .2s cubic-bezier(0.4,0,0.2,1), transform .2s cubic-bezier(0.4,0,0.2,1); } #page-operations .op-kpi:hover .op-expand { opacity: .9; transform: scale(1.12); } #page-operations .op-kpi .op-expand svg { width: 16px; height: 16px; stroke: #C9A84C; } #page-operations .op-kpi .op-hint-i { position: absolute; left: 16px; bottom: 11px; font-size: 8.5px; letter-spacing: .04em; color: #8A857D; opacity: 0; transition: opacity .2s cubic-bezier(0.4,0,0.2,1); font-weight: 600; white-space: nowrap; pointer-events: none; } #page-operations .op-kpi:hover .op-hint-i { opacity: .7; } #page-operations .op-kpi .op-hint-i b { color: #C9A84C; font-weight: 700; } /* layout: heatmap hero + attention */ #page-operations .op-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; } #page-operations .op-panel { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); } #page-operations .op-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } #page-operations .op-panel-h h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: .4px; color: #F0EBE2; font-weight: 700; margin: 0; } #page-operations .op-panel-h .op-hint { font-size: 11px; color: #8A857D; } #page-operations .op-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 14px; } /* capacity heatmap key visual */ #page-operations .op-heat-wrap { position: relative; padding: 4px 2px 2px; } #page-operations #op-heatSvg { width: 100%; height: 268px; display: block; overflow: visible; } #page-operations .op-heat-cell { cursor: pointer; transition: filter .18s cubic-bezier(0.4,0,0.2,1), opacity .42s cubic-bezier(0.4,0,0.2,1), transform .42s cubic-bezier(0.4,0,0.2,1); transform-box: fill-box; transform-origin: center; } #page-operations .op-heat-cell .op-hc-body { transition: filter .18s cubic-bezier(0.4,0,0.2,1); } #page-operations .op-heat-cell:hover .op-hc-body { filter: brightness(1.16) saturate(1.08); } #page-operations .op-heat-cell:hover .op-hc-glow { opacity: .9; } #page-operations .op-heat-cell .op-hc-glow { transition: opacity .2s cubic-bezier(0.4,0,0.2,1); } #page-operations .op-heat-legend { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 10.5px; color: #8A857D; flex-wrap: wrap; } #page-operations .op-heat-legend .op-scale { display: inline-flex; align-items: center; gap: 8px; } #page-operations .op-heat-legend .op-scale .op-bar { width: 120px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #3a6f56, #4CAF7D, #E8943A, #E05555); border: 1px solid rgba(255,255,255,0.07); } #page-operations .op-heat-legend b { color: #C4BFB6; font-weight: 600; } /* needs-attention list */ #page-operations .op-att-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #page-operations .op-att-head h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: .4px; display: flex; align-items: center; gap: 9px; color: #F0EBE2; font-weight: 700; margin: 0; } #page-operations .op-att-head h3 .op-glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg, rgba(224,85,85,0.24), rgba(232,148,58,0.12)); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } #page-operations .op-att-head h3 .op-glyph svg { width: 14px; height: 14px; } #page-operations .op-att-head .op-count { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: #F0EBE2; background: rgba(232,148,58,0.16); border: 1px solid rgba(232,148,58,0.36); border-radius: 999px; padding: 3px 11px; letter-spacing: .03em; } #page-operations .op-att-list { display: flex; flex-direction: column; gap: 9px; } #page-operations .op-att { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); transition: .18s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; } #page-operations .op-att::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--op-lvl, #C9A84C); } #page-operations .op-att:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.13); transform: translateX(2px); } #page-operations .op-att.op-p1 { --op-lvl: #E05555; border-color: rgba(224,85,85,0.36); background: linear-gradient(108deg, rgba(224,85,85,0.12), rgba(255,255,255,0.018) 46%); padding: 14px 15px; } #page-operations .op-att.op-p1::before { box-shadow: 0 0 18px rgba(224,85,85,0.5); } #page-operations .op-att.op-p1::after { content: ""; position: absolute; inset: 0; background: radial-gradient(360px 140px at 0% 50%, rgba(224,85,85,0.10), transparent 70%); pointer-events: none; } #page-operations .op-att.op-amber { --op-lvl: #E8943A; } #page-operations .op-att.op-red { --op-lvl: #E05555; } #page-operations .op-att.op-blue { --op-lvl: #5B9BD5; } #page-operations .op-att .op-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #8A857D; width: 16px; text-align: center; flex-shrink: 0; z-index: 1; } #page-operations .op-att.op-p1 .op-rank { font-size: 17px; color: #E05555; width: 20px; } #page-operations .op-att .op-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; z-index: 1; } #page-operations .op-att.op-p1 .op-ico { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 18px -4px rgba(224,85,85,0.45); } #page-operations .op-att .op-ico svg { width: 16px; height: 16px; } #page-operations .op-att.op-p1 .op-ico svg { width: 20px; height: 20px; } #page-operations .op-att .op-ic-amber { background: rgba(232,148,58,0.14); } #page-operations .op-att .op-ic-amber svg { stroke: #E8943A; } #page-operations .op-att .op-ic-gold { background: rgba(201,168,76,0.14); } #page-operations .op-att .op-ic-gold svg { stroke: #C9A84C; } #page-operations .op-att .op-ic-red { background: rgba(224,85,85,0.14); } #page-operations .op-att .op-ic-red svg { stroke: #E05555; } #page-operations .op-att .op-ic-blue { background: rgba(91,155,213,0.14); } #page-operations .op-att .op-ic-blue svg { stroke: #5B9BD5; } #page-operations .op-att-body { flex: 1; min-width: 0; z-index: 1; } #page-operations .op-att-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } #page-operations .op-att-top .op-tt { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; } #page-operations .op-att.op-p1 .op-att-top .op-tt { font-size: 14.5px; } #page-operations .op-att-top .op-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; } #page-operations .op-att .op-desc { font-size: 11.5px; color: #8A857D; margin-top: 3px; line-height: 1.4; } #page-operations .op-att.op-p1 .op-desc { font-size: 12px; color: #C4BFB6; } #page-operations .op-att .op-desc b { color: #C4BFB6; font-weight: 600; } #page-operations .op-att .op-att-act { flex: none; z-index: 1; } #page-operations .op-att .op-att-act .op-btn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 7px 14px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; transition: all .18s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } #page-operations .op-att .op-att-act .op-btn:hover { background: rgba(255,255,255,0.09); color: #F0EBE2; transform: translateY(-1px); border-color: #C9A84C; } #page-operations .op-att.op-p1 .op-att-act .op-btn { background: linear-gradient(180deg, #E05555, #b94545); border-color: transparent; color: #fff; font-weight: 700; padding: 9px 18px; box-shadow: 0 4px 16px -5px rgba(224,85,85,0.5); } /* heatmap cell tooltip (intrinsic to the hero visual; in S1a) */ #page-operations .op-heat-tip { position: fixed; z-index: 90; pointer-events: none; display: none; 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: 10px; padding: 8px 11px; box-shadow: 0 18px 44px -16px #000, 0 0 0 1px rgba(201,168,76,0.1); backdrop-filter: blur(10px); font-size: 11px; color: #C4BFB6; white-space: nowrap; transform: translate(-50%, -118%); } #page-operations .op-heat-tip b { color: #F0EBE2; font-family: 'Montserrat', sans-serif; font-weight: 700; } #page-operations .op-heat-tip .op-ht-pct { font-family: 'Montserrat', sans-serif; font-weight: 800; } /* FIX_HONEST_EMPTY_PRESERVE_STRUCTURE_S3_2026_06_20 — honest-empty needs-attention skeleton (Operations-scoped mirror of #page-risk .rk-att-skel / .rk-skel-* L10578). ⛔ FIX_OPS_ORPHAN_SKEL_CSS_2026_09_08 — #page-operations .op-att-skel: THIS RULESET IS NO LONGER EMITTED BY ANY JS PATH. The original note's claim about what a real account renders is SUPERSEDED and is paraphrased rather than quoted here so a sweep for the retired wording does not match the note correcting it: it described a five-row loading skeleton plus an honest empty note for real accounts, wired by this same comment's own marker on 2026-06-20. The code that emitted it was removed by FIX_STAGING_PROVEOUT_BATCH2_2026_07_08 (2026-07-08) — a real account now reaches the live-derivation path (symbol anchor renderOperationsAttention, src/render_operations.js:3657) with no skeleton stage at all. The rules below are RETAINED, not deleted, for the same reason stated in the Risk sibling's own addendum: they are the styling a future honest-empty skeleton would reuse, and removing live CSS on the strength of a grep is the class of change no mechanical gate in this project can check. Sibling: the Risk mirror (#page-risk .rk-att-skel) carries the matching addendum at FIX_RISK_DEMOGATE_SWEEP_S2M3_2026_09_08, which independently converged on the same RETAIN-and-document disposition three days earlier. */ #page-operations .op-att-skel { display: flex; align-items: center; gap: 12px; position: relative; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); } #page-operations .op-att-skel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: rgba(255,255,255,0.06); } #page-operations .op-att-skel .op-skel-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #8A857D; opacity: .45; width: 16px; text-align: center; flex: none; } #page-operations .op-att-skel .op-skel-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); } #page-operations .op-att-skel .op-skel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } #page-operations .op-att-skel .op-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); } #page-operations .op-att-skel .op-skel-line.w1 { width: 62%; } #page-operations .op-att-skel .op-skel-line.w2 { width: 84%; } #page-operations .op-att-skel .op-skel-act { flex: none; } #page-operations .op-att-empty-note { font-size: 11.5px; color: #8A857D; line-height: 1.5; margin-top: 4px; padding: 2px 4px; } #page-operations .op-att-empty-note b { color: #C4BFB6; font-weight: 600; } #page-operations .op-footnote { font-size: 10px; color: #8A857D; margin-top: 18px; text-align: center; opacity: .7; } /* interactive-tile affordance (S1b-1 wired: data-pop tiles are keyboard-reachable buttons) */ #page-operations .op-kpi[data-pop] { cursor: pointer; } #page-operations .op-kpi[data-pop]:focus-visible { outline: 2px solid rgba(201,168,76,0.6); outline-offset: 2px; } #page-operations .op-kpi.op-pop-open { border-color: rgba(201,168,76,0.32); box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.22), 0 0 30px -10px rgba(201,168,76,0.5); } /* interactive-tile affordance (S1b-1 wired: data-pop tiles are keyboard-reachable buttons) */ #page-operations .opo-kpi[data-pop] { cursor: pointer; } #page-operations .opo-kpi[data-pop]:focus-visible { outline: 2px solid rgba(201,168,76,0.6); outline-offset: 2px; } #page-operations .opo-kpi.opo-pop-open { border-color: rgba(201,168,76,0.32); box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.22), 0 0 30px -10px rgba(201,168,76,0.5); } @media (max-width: 920px) { #page-operations .op-kpis { grid-template-columns: repeat(3, 1fr); } #page-operations .op-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { #page-operations .op-statusline .op-dot::after { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ FIX_OPS_INVENTORY_S1_2026_06_16 — Operations Inventory room styles, scoped under #page-operations .inv-*. Built TO design_samples/operations_inventory/ inventory_management_combined.html (Items tab + item dossier + add-item drawer) at ultra-HD fidelity. Literal hex values mirror the sample's :root tokens. ASCII-only comments throughout (a non-ASCII char silently drops the rule from the CSSOM — the established L18.8 lesson). The persistent Operations rail is untouched; these styles govern only the in-#operations-content room surface (tab bar + Items panel + dossier). ════════════════════════════════════════════════════════════════════════════ */ /* room header */ #page-operations .inv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; } #page-operations .inv-head h1 { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: #F0EBE2; margin: 0 0 5px; } #page-operations .inv-head .inv-sub { font-size: 13px; color: #8A857D; max-width: 620px; } /* in-page tab bar (rooms-as-in-page-tabs; never a competing rail) */ #page-operations .inv-tabs { display: flex; gap: 4px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 5px; margin-bottom: 22px; flex-wrap: wrap; } #page-operations .inv-tab { flex: 1 1 0; min-width: 110px; border: 0; background: transparent; color: #8A857D; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; padding: 11px 14px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .18s, color .18s; cursor: pointer; } #page-operations .inv-tab .inv-tdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; } #page-operations .inv-tab:hover { color: #C4BFB6; } #page-operations .inv-tab.on { background: #232120; color: #F0EBE2; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13); } #page-operations .inv-tab.on .inv-tdot { opacity: 1; color: #C9A84C; } #page-operations .inv-tab.inv-tab-coming { opacity: .8; } /* toolbar + status-filter chips */ #page-operations .inv-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } #page-operations .inv-chips { display: flex; gap: 7px; flex-wrap: wrap; } #page-operations .inv-chip { font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; font-family: 'Montserrat', sans-serif; border: 1px solid rgba(255,255,255,0.07); color: #8A857D; background: #1C1A17; transition: all .12s; white-space: nowrap; cursor: pointer; } #page-operations .inv-chip:hover { color: #C4BFB6; border-color: rgba(255,255,255,0.13); } #page-operations .inv-chip.on { background: #C9A84C; color: #1a160c; border-color: #C9A84C; box-shadow: 0 0 14px -4px rgba(201,168,76,0.28); } #page-operations .inv-chip .inv-ct { opacity: .6; margin-left: 5px; } /* item-master table */ #page-operations .inv-card { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; overflow: hidden; } #page-operations .inv-table { width: 100%; border-collapse: collapse; } #page-operations .inv-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #8A857D; text-align: left; padding: 13px 14px; background: rgba(255,255,255,0.015); border-bottom: 1px solid rgba(255,255,255,0.07); white-space: nowrap; font-family: 'Montserrat', sans-serif; } #page-operations .inv-table thead th.num { text-align: right; } #page-operations .inv-table tbody td { padding: 13px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); vertical-align: middle; font-size: 13.5px; color: #C4BFB6; } #page-operations .inv-table tbody tr:last-child td { border-bottom: none; } #page-operations .inv-table td.num { text-align: right; font-variant-numeric: tabular-nums; } #page-operations .inv-table tbody tr.inv-clickable { transition: background .12s; cursor: pointer; } #page-operations .inv-table tbody tr.inv-clickable:hover { background: rgba(255,255,255,.02); } #page-operations .inv-thumb { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #16140F; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); } #page-operations .inv-iname { color: #F0EBE2; font-weight: 600; } #page-operations .inv-sku { color: #8A857D; font-size: 12.5px; letter-spacing: .02em; } #page-operations .inv-muted { color: #8A857D; } #page-operations .inv-tbadge { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; white-space: nowrap; font-family: 'Montserrat', sans-serif; } #page-operations .inv-tbadge.composed { background: rgba(91,155,213,.14); color: #5B9BD5; } #page-operations .inv-tbadge.simple { background: rgba(255,255,255,.05); color: #8A857D; } /* FIX_INV_INGEST_VARIANTS_2026_08_09 (v1.25) — the tracking-grain badges beside the two shipped item_type badges above. ⛔ AUTHORED INSIDE THE SAME ID-SCOPED BLOCK DELIBERATELY: the sibling rules are #page-operations-scoped, so a bare .inv-tbadge.variants rule would be out-specified by them and the badge would silently paint as the default grey — visible only on screen, which no source-verification or mechanical gate can catch. Gold for variants (the grain this build surfaces), muted distinct tones for the two grains that exist on the record but have no ingestion path yet. */ #page-operations .inv-tbadge.variants { background: rgba(201,168,76,.16); color: #C9A84C; } #page-operations .inv-tbadge.lots { background: rgba(122,162,132,.14); color: #7AA284; } #page-operations .inv-tbadge.serial { background: rgba(160,130,190,.14); color: #A082BE; } #page-operations .inv-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; font-family: 'Montserrat', sans-serif; } #page-operations .inv-pill .inv-pd { width: 6px; height: 6px; border-radius: 50%; } #page-operations .inv-pill.ok { background: rgba(76,175,125,.12); color: #4CAF7D; } #page-operations .inv-pill.ok .inv-pd { background: #4CAF7D; } #page-operations .inv-pill.low { background: rgba(232,148,58,.13); color: #E8943A; } #page-operations .inv-pill.low .inv-pd { background: #E8943A; } #page-operations .inv-pill.out { background: rgba(224,85,85,.13); color: #E05555; } #page-operations .inv-pill.out .inv-pd { background: #E05555; } /* FIX_OPS_ASSETS_S1_2026_06_16 — asset-register delta. The Register tab reuses the inv- table/drawer/field/button/detail/kv classes verbatim; only these ast- additions diverge: a table-cell category icon (vs inv-thumb monogram), a make/model sub-line, an asset-status pill (Active/In repair/Retired — distinct statuses from inventory's ok/low/out), and a condition/notes block. */ #page-operations .ast-ic { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } #page-operations .ast-make { color: #8A857D; font-size: 12px; } #page-operations .ast-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; font-family: 'Montserrat', sans-serif; } #page-operations .ast-pill .ast-pd { width: 6px; height: 6px; border-radius: 50%; } #page-operations .ast-pill.active { background: rgba(76,175,125,.12); color: #4CAF7D; } #page-operations .ast-pill.active .ast-pd { background: #4CAF7D; } #page-operations .ast-pill.repair { background: rgba(232,148,58,.13); color: #E8943A; } #page-operations .ast-pill.repair .ast-pd { background: #E8943A; } #page-operations .ast-pill.retired { background: rgba(138,133,125,.16); color: #8A857D; } #page-operations .ast-pill.retired .ast-pd { background: #8A857D; } #page-operations .ast-note { color: #C4BFB6; font-size: 13px; line-height: 1.55; padding: 4px 0 8px; } /* FIX_AST_EDITOR_S1_2026_06_16 — rich industry-adaptive asset editor delta. The editor reuses the FIX_INV_EDITOR_S1/_S2/_S3 vocabulary VERBATIM (inv-drawer-2pane, inv-istrip, inv-typegrid, inv-acc, inv-mcalc/inv-mc-*, inv-rail, inv-completeness, inv-cm-tip-*, inv-cf-row, inv-tagchips, inv-foot-echo/actions, inv-seg) — all already #page-operations- scoped, so the asset editor (rendered inside #page-operations) inherits them with NO duplication. Only these ast- additions diverge from the inventory pattern: a register per-row Edit affordance (icon-button + actions cell) and a derived-readout help colour for the "computed, never stored" depreciation note. Built TO design_samples/operations_assets/ asset_5_asset_detail.html (spec groups L335-L353) + asset_1_register.html; ASCII-only comments; literal hex mirror the inv-* tokens. NOT an import of a sample sheet. */ #page-operations .ast-edit-btn { background: none; border: 1px solid rgba(255,255,255,0.10); color: #8A857D; cursor: pointer; font-size: 13px; line-height: 1; padding: 6px 9px; border-radius: 8px; font-family: 'Montserrat', sans-serif; transition: all .12s; } #page-operations .ast-edit-btn:hover { color: #C9A84C; border-color: rgba(201,168,76,0.35); background: rgba(201,168,76,0.06); } #page-operations td.ast-actions { width: 64px; text-align: right; white-space: nowrap; } /* derived-readout "computed, never stored" emphasis (sits in an inv-help slot under the depreciation calculator) */ #page-operations .ast-derived-note { font-size: 11px; color: #C9A84C; margin-top: 7px; font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: .02em; } /* FIX_AST_REGISTER_S3A_2026_06_16 — Register instrumentation delta (built TO design_samples/ operations_assets/asset_1_register.html): the 5-card KPI summary strip (.ast-summary / .ast-scard / .ast-scard.hero + sparkline canvas), the in-toolbar search (.ast-search), the group-by-category toggle (.ast-grp), sortable-header arrows (th.ast-sortable / .ast-arrow), condition mini-bars in rows (.ast-cond), and the added Book value / Next maintenance / Warranty columns (.ast-money.book / .ast-maint / .ast-warr). Literal hex mirrors the existing inv-* /ast-* tokens (no :root redefinition); geometry ports the sample's .summary/.scard/ FIX_CSS_COMMENT_GLOB_SWALLOW_2026_07_29 - glob slashes spaced so this comment cannot self-close. .toolbar/.cond/.maint/.warr blocks adapted to the #page-operations scope. */ #page-operations .ast-summary { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } @media (max-width: 1100px) { #page-operations .ast-summary { grid-template-columns: 1fr 1fr 1fr; } #page-operations .ast-scard.hero { grid-column: 1 / -1; } } #page-operations .ast-scard { position: relative; background: linear-gradient(168deg, #232120, #1d1b18); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px 16px; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(0,0,0,.8); } #page-operations .ast-scard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); } #page-operations .ast-scard.hero { background: linear-gradient(160deg, rgba(201,168,76,0.13), rgba(35,33,32,0.6) 46%); } #page-operations .ast-scard.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.20), transparent 68%); pointer-events: none; } #page-operations .ast-scard .ast-sclbl { font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: #8A857D; margin-bottom: 9px; } #page-operations .ast-scard .ast-scval { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -.5px; color: #F0EBE2; line-height: 1; font-variant-numeric: tabular-nums; } #page-operations .ast-scard.hero .ast-scval { font-size: 34px; color: #C9A84C; text-shadow: 0 0 26px rgba(201,168,76,.30); } #page-operations .ast-scard .ast-scmeta { font-size: 11.5px; color: #8A857D; margin-top: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } #page-operations .ast-scard .ast-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; } #page-operations .ast-scard canvas.ast-spark { display: block; width: 100%; height: 34px; margin-top: 10px; } #page-operations .ast-chip-mini { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; font-family: 'Montserrat', sans-serif; } #page-operations .ast-chip-mini.green { color: #4CAF7D; background: rgba(76,175,125,.13); } #page-operations .ast-chip-mini.amber { color: #E8943A; background: rgba(232,148,58,.13); } #page-operations .ast-chip-mini.red { color: #E05555; background: rgba(224,85,85,.14); } #page-operations .ast-chip-mini.blue { color: #5B9BD5; background: rgba(91,155,213,.13); } /* FIX_ASTPANEL_SHIMBOUNDARY_2026_08_07 (v1.25) 3.1 - chip-mini hoisted to ambient. Its only definition lived inside __astRenderRegisterPanel's inline shim, mounted into #ast-panel and destroyed whenever a sibling tab-render replaced that host. Overview emits the same chip but __astOvKitShim never defined it, so a cold entry to the Overview tab painted it at UA defaults on every paint. COPY, not move - the shim rules stay; Register still wins by source order at identical specificity and its declarations match these byte for byte, so Register's rendering is unchanged. Ambient rules no innerHTML write can destroy. */ #page-operations .vk .chip-mini{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1.4;} #page-operations .vk .chip-mini.blue{background:rgba(94,155,208,0.16);color:#8FB8DA;border:1px solid rgba(94,155,208,0.28);} #page-operations .vk .chip-mini.amber{background:rgba(232,148,58,0.14);color:#E8943A;border:1px solid rgba(232,148,58,0.28);} #page-operations .vk .chip-mini.red{background:rgba(224,85,85,0.14);color:#E05555;border:1px solid rgba(224,85,85,0.28);} /* FIX_ASTPANEL_SHIMBOUNDARY_2026_08_07 (v1.25) 3.2 - s-hint hoisted to ambient. Its only definition lived inside __astOvKitShim, so __astRenderMaintenancePanel - which emits the hint at three sechead sites and prepends __astMntKitShim, a shim that never defined it - rendered it at inherited size and colour on every paint. COPY, not move; the shim copy is a single-site preserve with no redundancy, so it is left byte-identical. */ #page-operations .vk .sechead .s-hint{font-size:11.5px;color:var(--mut,#A9A398);} /* in-toolbar search + group toggle */ #page-operations .ast-search { position: relative; flex: 0 0 auto; } #page-operations .ast-search input { width: 260px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #F0EBE2; font-family: 'Open Sans', sans-serif; font-size: 13.5px; padding: 9px 14px 9px 36px; outline: none; transition: border-color .25s, box-shadow .25s, width .3s cubic-bezier(.22,.61,.36,1); } #page-operations .ast-search input::placeholder { color: #8A857D; } #page-operations .ast-search input:focus { border-color: rgba(201,168,76,.55); box-shadow: 0 0 0 3px rgba(201,168,76,.12); width: 300px; } #page-operations .ast-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8A857D; } #page-operations .ast-spacer { flex: 1 1 auto; } #page-operations .ast-grp { display: inline-flex; background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 3px; gap: 2px; } #page-operations .ast-grp button { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11.5px; color: #8A857D; background: transparent; border: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: color .2s, background .2s; } #page-operations .ast-grp button.on { color: #F0EBE2; background: #232120; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); } /* sortable header arrows */ #page-operations .inv-table thead th.ast-sortable { cursor: pointer; transition: color .2s; user-select: none; } #page-operations .inv-table thead th.ast-sortable:hover { color: #C4BFB6; } #page-operations .inv-table thead th .ast-arrow { display: inline-block; margin-left: 5px; opacity: 0; transform: translateY(1px); transition: opacity .2s; color: #C9A84C; } #page-operations .inv-table thead th.ast-sorted .ast-arrow { opacity: 1; } /* group header row */ #page-operations .inv-table tr.ast-group-row td { padding: 12px 14px 7px; font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #C9A84C; background: rgba(201,168,76,.04); border-bottom: 1px solid rgba(255,255,255,0.07); } /* status-stripe on in-repair / overdue rows */ #page-operations .inv-table tr.ast-st-repair td:first-child, #page-operations .inv-table tr.ast-st-overdue td:first-child { position: relative; } #page-operations .inv-table tr.ast-st-repair td:first-child::before, #page-operations .inv-table tr.ast-st-overdue td:first-child::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; } #page-operations .inv-table tr.ast-st-repair { background: rgba(224,85,85,.045); } #page-operations .inv-table tr.ast-st-repair td:first-child::before { background: #E05555; box-shadow: 0 0 12px rgba(224,85,85,.6); } #page-operations .inv-table tr.ast-st-overdue { background: rgba(232,148,58,.04); } #page-operations .inv-table tr.ast-st-overdue td:first-child::before { background: #E8943A; box-shadow: 0 0 12px rgba(232,148,58,.55); } /* condition mini-bar cell */ #page-operations .ast-cond { min-width: 96px; } #page-operations .ast-cond .ast-ctxt { font-size: 11.5px; font-weight: 600; margin-bottom: 5px; } #page-operations .ast-cond .ast-cbar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; position: relative; } #page-operations .ast-cond .ast-cfill { height: 100%; border-radius: 4px; width: 0; transition: width 1s cubic-bezier(.22,.61,.36,1); } #page-operations .ast-cond .ast-cnote { font-size: 10px; color: #8A857D; margin-top: 3px; } /* money / book / maintenance / warranty columns */ #page-operations .inv-table td.ast-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #C4BFB6; white-space: nowrap; } #page-operations .inv-table td.ast-money.book { color: #F0EBE2; } #page-operations .ast-maint { white-space: nowrap; font-size: 12.5px; } #page-operations .ast-maint.soon { color: #E8943A; font-weight: 600; } #page-operations .ast-maint.over { color: #E05555; font-weight: 700; } #page-operations .ast-maint.none { color: #8A857D; } #page-operations .ast-maint .ast-mdot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } #page-operations .ast-maint.soon .ast-mdot { background: #E8943A; box-shadow: 0 0 7px #E8943A; } #page-operations .ast-maint.over .ast-mdot { background: #E05555; box-shadow: 0 0 7px #E05555; } #page-operations .ast-warr { white-space: nowrap; font-size: 12.5px; color: #C4BFB6; } #page-operations .ast-warr.exp { color: #E05555; font-weight: 700; } @media (prefers-reduced-motion: reduce) { #page-operations .ast-cond .ast-cfill { transition: none !important; } } /* FIX_OPS_ASSETS_S2_2026_06_16 — Maintenance (work-order) delta: hero, in-repair callout, work-order card with left status-stripe, type badges, due-state colours, history rows. */ #page-operations .mnt-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; background: radial-gradient(640px 260px at 0% 0%, rgba(201,168,76,0.08), transparent 60%), linear-gradient(150deg,#262320,#1A1815); border: 1px solid rgba(255,255,255,0.13); border-radius: 16px; padding: 26px 28px; margin-bottom: 26px; } @media (max-width: 760px) { #page-operations .mnt-hero { grid-template-columns: 1fr; } } #page-operations .mnt-hero-stats { display: flex; gap: 34px; flex-wrap: wrap; align-self: center; } #page-operations .mnt-stat .mnt-num { font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: .95; font-size: clamp(30px,4.4vw,48px); letter-spacing: -.02em; color: #C9A84C; font-variant-numeric: tabular-nums; } #page-operations .mnt-stat.red .mnt-num { color: #E05555; } #page-operations .mnt-stat .mnt-lbl { margin-top: 8px; font-size: 12px; color: #8A857D; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; } #page-operations .mnt-callout { align-self: center; border: 1px solid rgba(232,148,58,0.34); border-radius: 10px; background: radial-gradient(240px 110px at 100% 0%, rgba(232,148,58,0.16), transparent 65%), linear-gradient(150deg, rgba(232,148,58,0.10), rgba(232,148,58,0.02)); padding: 17px 19px; } #page-operations .mnt-callout-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E8943A; } #page-operations .mnt-callout-tag .mnt-gd { width: 8px; height: 8px; border-radius: 50%; background: #E8943A; box-shadow: 0 0 0 3px rgba(232,148,58,0.18), 0 0 10px rgba(232,148,58,0.85); } #page-operations .mnt-callout-asset { margin-top: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 18px; } #page-operations .mnt-callout-sub { margin-top: 4px; font-size: 13px; color: #C4BFB6; } #page-operations .mnt-callout-meta { margin-top: 9px; font-size: 12px; color: #8A857D; } #page-operations .mnt-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } #page-operations .mnt-sec-h h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 17px; letter-spacing: .02em; } #page-operations .mnt-hint { font-size: 12.5px; color: #8A857D; } #page-operations .mnt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 760px) { #page-operations .mnt-grid { grid-template-columns: 1fr; } } #page-operations .mnt-wo { position: relative; overflow: hidden; background: linear-gradient(155deg,#262320,#1E1B18); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 17px 19px 15px; } #page-operations .mnt-wo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #5B9BD5; } #page-operations .mnt-wo.overdue::before { background: #E05555; box-shadow: 0 0 18px rgba(224,85,85,0.55); } #page-operations .mnt-wo.soon::before { background: #E8943A; box-shadow: 0 0 14px rgba(232,148,58,0.45); } #page-operations .mnt-wo.scheduled::before { background: #5B9BD5; } #page-operations .mnt-wo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #page-operations .mnt-wo-asset { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 15px; } #page-operations .mnt-inrep { color: #E8943A; font-size: 11px; font-weight: 700; } #page-operations .mnt-wo-code { font-size: 11px; color: #8A857D; letter-spacing: .05em; margin-top: 2px; } #page-operations .mnt-wo-task { margin-top: 10px; font-size: 14px; color: #C4BFB6; } #page-operations .mnt-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; font-family: 'Montserrat', sans-serif; } #page-operations .mnt-badge.prev { background: rgba(76,175,125,0.12); color: #7FCFA6; border: 1px solid rgba(76,175,125,0.3); } #page-operations .mnt-badge.rep { background: rgba(224,85,85,0.12); color: #F08C8C; border: 1px solid rgba(224,85,85,0.3); } #page-operations .mnt-badge.insp { background: rgba(91,155,213,0.12); color: #8FC0EA; border: 1px solid rgba(91,155,213,0.3); } #page-operations .mnt-wo-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; } #page-operations .mnt-m { display: flex; flex-direction: column; gap: 2px; } #page-operations .mnt-m .mnt-k { font-size: 10px; color: #8A857D; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } #page-operations .mnt-m .mnt-v { font-size: 13px; color: #C4BFB6; font-weight: 600; } #page-operations .mnt-m .mnt-v.red { color: #F08C8C; } #page-operations .mnt-m .mnt-v.amber { color: #E8943A; } #page-operations .mnt-m .mnt-v.gold { color: #C9A84C; } #page-operations .mnt-wo-actions { display: flex; gap: 8px; margin-top: 15px; } #page-operations .mnt-newbar { display: flex; justify-content: flex-end; margin-top: 16px; } #page-operations .mnt-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: #8A857D; font-size: 13.5px; } #page-operations .mnt-hist-item { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } #page-operations .mnt-hist-item:last-child { border-bottom: none; } #page-operations .mnt-hist-check { width: 26px; height: 26px; border-radius: 50%; flex: none; background: rgba(76,175,125,0.14); border: 1px solid rgba(76,175,125,0.36); color: #4CAF7D; display: grid; place-items: center; font-size: 13px; } #page-operations .mnt-hist-body { flex: 1; min-width: 0; } #page-operations .mnt-hist-top { font-size: 13.5px; color: #F0EBE2; font-weight: 600; } #page-operations .mnt-hist-bot { font-size: 11.5px; color: #8A857D; margin-top: 2px; } #page-operations .mnt-hist-cost { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #C4BFB6; } #page-operations .mnt-hist-empty { padding: 18px; text-align: center; color: #8A857D; font-size: 13px; } /* FIX_ASSET_AUTOMAINT_P1_2026_07_21 — data-driven PM-schedules panel (reintroduced from design_samples/operations_assets/asset_2_maintenance.html; per-plan next-due + overdue + source badge). */ #page-operations .ast-pm-wrap { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; } #page-operations .ast-pm-head, #page-operations .ast-pm-row { display: grid; grid-template-columns: 2fr .7fr 1.1fr 1.2fr 1.4fr; gap: 14px; align-items: center; padding: 12px 18px; } #page-operations .ast-pm-head { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8A857D; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.07); } #page-operations .ast-pm-row { position: relative; border-bottom: 1px solid rgba(255,255,255,0.045); font-size: 13px; color: #C4BFB6; } #page-operations .ast-pm-row:last-child { border-bottom: none; } #page-operations .ast-pm-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #5B9BD5; } #page-operations .ast-pm-row.overdue::before { background: #E05555; box-shadow: 0 0 14px rgba(224,85,85,0.5); } #page-operations .ast-pm-row.soon::before { background: #E8943A; } #page-operations .ast-pm-asset { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #F0EBE2; font-size: 14px; } #page-operations .ast-pm-task { font-size: 12px; color: #8A857D; margin-top: 2px; } #page-operations .ast-pm-due.red { color: #F08C8C; font-weight: 600; } #page-operations .ast-pm-due.amber { color: #E8943A; font-weight: 600; } #page-operations .ast-pm-basis { display: inline-flex; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; font-family: 'Montserrat', sans-serif; } #page-operations .ast-pm-basis.time { background: rgba(91,155,213,0.12); color: #8FC0EA; border: 1px solid rgba(91,155,213,0.3); } #page-operations .ast-pm-basis.usage { background: rgba(201,168,76,0.12); color: #D8BE72; border: 1px solid rgba(201,168,76,0.3); } #page-operations .ast-pm-src { display: inline-flex; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.3; } #page-operations .ast-pm-src.def { background: rgba(255,255,255,0.05); color: #8A857D; border: 1px solid rgba(255,255,255,0.09); } #page-operations .ast-pm-src.mfr { background: rgba(76,175,125,0.12); color: #7FCFA6; border: 1px solid rgba(76,175,125,0.3); } /* FIX_ASSET_AUTO_MAINT_PLAN_2026_07_21 — category-default + owner-adjusted provenance badges. */ #page-operations .ast-pm-src.cat { background: rgba(91,155,213,0.10); color: #9CC2E6; border: 1px solid rgba(91,155,213,0.28); } #page-operations .ast-pm-src.man { background: rgba(201,168,76,0.12); color: #D8BE72; border: 1px solid rgba(201,168,76,0.3); } /* FIX_FACILITIES_PLANT_DELETE_SERVICE_2026_09_04 -- regulatory-source badge; colour reuses the existing #E05555 "overdue" accent (see .opfac-plant-row b.overdue) at the same opacity convention as the other three badges above. */ #page-operations .ast-pm-src.reg { background: rgba(224,85,85,0.12); color: #E88888; border: 1px solid rgba(224,85,85,0.3); } /* FIX_FIRESAFETY_CADENCE_RECORD_2026_09_04 -- advisory-source badge (CCOHS-class OHS guidance, never a BC regulatory citation). Reuses this codebase's established violet/lavender informational hue (rgba(155,127,212,*), matching e.g. #page-accountant-lens .al-ye-tag / #page-people .bn-elig.team / #financial-content .fpay-pill.refunded) at the same 0.12-bg / 0.3-border opacity convention as the other five badges above, rather than inventing a new hue for a sixth badge. */ #page-operations .ast-pm-src.adv { background: rgba(155,127,212,0.12); color: #B39DDB; border: 1px solid rgba(155,127,212,0.3); } @media (max-width: 760px) { #page-operations .ast-pm-head { display: none; } #page-operations .ast-pm-row { grid-template-columns: 1fr 1fr; row-gap: 8px; } } /* FIX_ASSET_AUTO_MAINT_PLAN_2026_07_21 — asset-card recommended maintenance-plan block. */ #page-operations .ast-planwrap { background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; margin-top: 4px; } #page-operations .ast-planrow { display: grid; grid-template-columns: 1.7fr 1fr 1.8fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.045); font-size: 13px; color: #C4BFB6; } #page-operations .ast-planrow:last-child { border-bottom: none; } #page-operations .ast-plantask { color: #F0EBE2; font-weight: 600; } #page-operations .ast-planiv { color: #C4BFB6; font-variant-numeric: tabular-nums; } #page-operations .ast-planiv input { width: 78px; background: #1a1815; border: 1px solid rgba(201,168,76,0.4); color: #F0EBE2; border-radius: 7px; padding: 4px 7px; font-size: 12.5px; font-family: inherit; } #page-operations .ast-planedit, #page-operations .ast-planivsave, #page-operations .ast-planivcancel { background: none; border: 1px solid rgba(255,255,255,0.12); color: #8A857D; font-size: 11.5px; font-family: 'Montserrat', sans-serif; font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer; } #page-operations .ast-planedit:hover, #page-operations .ast-planivsave:hover { border-color: #C9A84C; color: #C9A84C; } #page-operations .ast-planivsave { border-color: rgba(201,168,76,0.5); color: #C9A84C; } #page-operations .ast-plancaveat { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: #8A857D; padding: 10px 14px; background: rgba(232,148,58,0.06); border: 1px solid rgba(232,148,58,0.18); border-radius: 10px; } @media (max-width: 760px) { #page-operations .ast-planrow { grid-template-columns: 1fr 1fr; row-gap: 6px; } } #page-operations .inv-empty { padding: 46px; text-align: center; color: #8A857D; } #page-operations .inv-empty .inv-empty-cta { margin-top: 16px; } /* coming panel (the 4 non-S1 tabs) */ #page-operations .inv-coming { padding: 40px; text-align: center; color: #8A857D; font-size: 13px; line-height: 1.6; background: #232120; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; } #page-operations .inv-coming b { color: #C4BFB6; font-weight: 600; } /* item dossier overlay (in-place over the room content) */ #page-operations .inv-detail { animation: fade .26s ease; } #page-operations .inv-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #8A857D; font-family: 'Montserrat', sans-serif; font-weight: 600; margin-bottom: 16px; cursor: pointer; } #page-operations .inv-back:hover { color: #C9A84C; } #page-operations .inv-dphead { background: linear-gradient(180deg,#232120,#201e1b); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 22px 24px; margin-bottom: 18px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } #page-operations .inv-dphead .inv-dpic { width: 56px; height: 56px; border-radius: 14px; flex: none; background: radial-gradient(circle at 30% 25%,rgba(201,168,76,.3),rgba(201,168,76,.08)); border: 1px solid rgba(201,168,76,.32); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; color: #C9A84C; } #page-operations .inv-dphead .inv-dpmain { flex: 1 1 280px; min-width: 0; } #page-operations .inv-dphead h1 { font-family: 'Montserrat', sans-serif; font-size: 23px; letter-spacing: .1px; color: #F0EBE2; margin: 0; } #page-operations .inv-dphead .inv-dpmeta { font-size: 12.5px; color: #8A857D; margin-top: 6px; } #page-operations .inv-dphead .inv-dpmeta code { color: #C9A84C; background: rgba(201,168,76,.08); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; } #page-operations .inv-dppills { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } #page-operations .inv-dpstats { display: flex; gap: 13px; flex-wrap: wrap; } #page-operations .inv-dpstat { background: #1C1A17; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 11px 15px; min-width: 104px; } #page-operations .inv-dpstat .inv-dpk { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #8A857D; font-weight: 600; font-family: 'Montserrat', sans-serif; } #page-operations .inv-dpstat .inv-dpv { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #F0EBE2; margin-top: 4px; font-variant-numeric: tabular-nums; } #page-operations .inv-dpstat.gold .inv-dpv { color: #C9A84C; } #page-operations .inv-kv-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 30px; } #page-operations .inv-kv { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 13.5px; } #page-operations .inv-kv .inv-kvk { color: #8A857D; } #page-operations .inv-kv .inv-kvv { color: #F0EBE2; font-weight: 600; font-family: 'Montserrat', sans-serif; } #page-operations .inv-sect-h { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #F0EBE2; margin: 20px 0 10px; } #page-operations .inv-mhist { display: flex; flex-direction: column; } #page-operations .inv-mh-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 13px; } #page-operations .inv-mh-row:last-child { border-bottom: none; } #page-operations .inv-mh-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; } #page-operations .inv-mh-name { color: #F0EBE2; font-weight: 600; flex: 1; } #page-operations .inv-mh-when { color: #8A857D; font-size: 12px; } #page-operations .inv-mh-q { font-family: 'Montserrat', sans-serif; font-weight: 700; } #page-operations .inv-mh-q.pos { color: #4CAF7D; } #page-operations .inv-mh-q.neg { color: #E05555; } @media (max-width: 680px) { #page-operations .inv-kv-grid { grid-template-columns: 1fr; } } /* add-item drawer (right-slide) */ #page-operations .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-operations .inv-scrim.show { opacity: 1; pointer-events: auto; } #page-operations .inv-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 520px; max-width: 94vw; z-index: 10100; background: #232120; border-left: 1px solid rgba(255,255,255,0.13); box-shadow: -20px 0 60px -20px rgba(0,0,0,.7); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; /* FIX_DRAWER_RENDER_AUDIT_2026_07_21 was z-index:100 -> below #page-staff-app shell (z-index:1000) AND below the shared .inv-scrim (raised to 10090 by the vendor fix), so the mnt-drawer rendered BEHIND its own scrim; raise to top-layer (drawer 10100, above scrim 10090) matching the .inv-vmodal/.mko convention */ } #page-operations .inv-drawer.show { transform: translateX(0); } #page-operations .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-operations .inv-dr-head h2 { font-family: 'Montserrat', sans-serif; font-size: 19px; color: #F0EBE2; margin: 0; } #page-operations .inv-dr-head p { margin: 5px 0 0; font-size: 12.5px; color: #8A857D; } #page-operations .inv-dr-close { font-size: 22px; color: #8A857D; width: 32px; height: 32px; border-radius: 8px; border: none; background: none; cursor: pointer; } #page-operations .inv-dr-close:hover { background: rgba(255,255,255,.06); color: #F0EBE2; } #page-operations .inv-dr-body { padding: 20px 24px; overflow-y: auto; flex: 1; } #page-operations .inv-field { margin-bottom: 16px; } #page-operations .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-operations .inv-field input, #page-operations .inv-field select { width: 100%; 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-operations .inv-field input:focus, #page-operations .inv-field select:focus { border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.28); } #page-operations .inv-field-row { display: flex; gap: 14px; } #page-operations .inv-field-row .inv-field { flex: 1; } #page-operations .inv-seg { display: flex; gap: 6px; } #page-operations .inv-seg button { flex: 1; padding: 10px 8px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.07); background: #1C1A17; color: #8A857D; font-size: 12.5px; font-weight: 600; font-family: 'Montserrat', sans-serif; transition: all .12s; cursor: pointer; } #page-operations .inv-seg button.on { border-color: #C9A84C; color: #C9A84C; background: rgba(201,168,76,.08); box-shadow: inset 0 0 0 1px #C9A84C; } #page-operations .inv-help { font-size: 11.5px; color: #8A857D; margin-top: 6px; } #page-operations .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-operations .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-operations .inv-btn:hover { background: #2a2825; color: #F0EBE2; } #page-operations .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-operations .inv-btn.gold:hover { background: #d8b85e; color: #1a160c; } #page-operations .inv-btn.ghost { background: transparent; } /* FIX_CLEANING_ALIAS_S2_RESOLVE_2026_07_08 — Look-up (Resolve) surface: standalone full-page card mounted into #inv-panel (mirrors __invOpenDetail). Three states: empty/pre-scan, resolved big-answer, no-match. Tokens mirror design_samples/operations_inventory/inventory_lookup_resolve.html. */ #page-operations .lkr-head { margin-bottom: 20px; } #page-operations .lkr-title { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700; color: #F0EBE2; letter-spacing: -.3px; } #page-operations .lkr-sub { margin: 6px 0 0; font-size: 13px; color: #8A857D; max-width: 640px; } #page-operations .lkr-resolve { display: flex; flex-direction: column; gap: 12px; } #page-operations .lkr-lbl { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #8A857D; font-family: 'Montserrat', sans-serif; } #page-operations .lkr-inwrap { position: relative; display: flex; align-items: center; } #page-operations .lkr-inwrap .bc { position: absolute; left: 16px; color: #C9A84C; display: flex; pointer-events: none; } #page-operations .lkr-inwrap input { width: 100%; background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; color: #F0EBE2; font-family: 'Open Sans', sans-serif; font-size: 16px; padding: 16px 130px 16px 52px; transition: border-color .15s, box-shadow .15s; } #page-operations .lkr-inwrap input::placeholder { color: #5d574d; } #page-operations .lkr-inwrap input:focus { outline: none; border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.14); } #page-operations .lkr-scan { position: absolute; right: 6px; top: 6px; bottom: 6px; display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg,rgba(201,168,76,0.13),rgba(201,168,76,0.04)); border: 1px dashed rgba(201,168,76,0.5); border-radius: 9px; color: #C9A84C; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; padding: 0 14px; cursor: pointer; transition: border-color .15s, background .15s; } #page-operations .lkr-scan:hover { border-color: rgba(201,168,76,0.8); background: linear-gradient(180deg,rgba(201,168,76,0.2),rgba(201,168,76,0.06)); } #page-operations .lkr-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8A857D; flex-wrap: wrap; } #page-operations .lkr-hint b { color: #C4BFB6; font-weight: 600; } #page-operations .lkr-hint .k { display: inline-flex; gap: 5px; flex-wrap: wrap; } #page-operations .lkr-tag { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .3px; color: #C9A84C; background: rgba(201,168,76,0.14); border-radius: 5px; padding: 2px 7px; } #page-operations .lkr-explainer { display: flex; gap: 14px; align-items: flex-start; background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.25); border-radius: 10px; padding: 16px 18px; margin-top: 18px; } #page-operations .lkr-explainer svg { flex: 0 0 auto; color: #5B9BD5; margin-top: 2px; } #page-operations .lkr-explainer b { color: #F0EBE2; font-family: 'Montserrat', sans-serif; } #page-operations .lkr-explainer p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: #C4BFB6; } /* result card */ #page-operations .lkr-result { background: radial-gradient(120% 80% at 50% -20%, rgba(201,168,76,0.10), transparent 62%), #232120; border: 1px solid rgba(201,168,76,0.30); border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 18px 48px rgba(0,0,0,0.45); } #page-operations .lkr-mstrip { display: flex; align-items: center; gap: 10px; background: rgba(76,175,125,0.14); border-bottom: 1px solid rgba(76,175,125,0.3); padding: 12px 24px; font-size: 13px; color: #F0EBE2; } #page-operations .lkr-mstrip svg { color: #4CAF7D; flex: 0 0 auto; } #page-operations .lkr-mstrip b { font-family: 'Montserrat', sans-serif; } #page-operations .lkr-mstrip code { font-family: 'Montserrat', sans-serif; color: #4CAF7D; font-weight: 700; } #page-operations .lkr-rbody { display: flex; gap: 24px; padding: 24px; flex-wrap: wrap; } #page-operations .lkr-rimg { width: 120px; height: 120px; flex: 0 0 120px; border-radius: 10px; background: linear-gradient(135deg,#2f2b25,#1b1814); border: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: center; color: #5a534a; font-size: 34px; } #page-operations .lkr-rmain { flex: 1; min-width: 260px; } #page-operations .lkr-rname { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; color: #F0EBE2; margin: 0; letter-spacing: -.2px; } #page-operations .lkr-rcat { font-size: 12px; color: #8A857D; margin: 4px 0 0; } #page-operations .lkr-answer { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; } #page-operations .lkr-bigstat { flex: 1 1 200px; background: linear-gradient(180deg,rgba(201,168,76,0.10),rgba(201,168,76,0.02)); border: 1px solid rgba(201,168,76,0.3); border-radius: 10px; padding: 16px 18px; } #page-operations .lkr-bigstat .k { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: #C9A84C; margin-bottom: 6px; } #page-operations .lkr-bigstat .v { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #F0EBE2; letter-spacing: -.5px; line-height: 1; } #page-operations .lkr-bigstat.internal .v { font-size: 38px; color: #C9A84C; } #page-operations .lkr-bigstat.onhand .v { font-size: 38px; } #page-operations .lkr-bigstat .v .u { font-size: 16px; font-weight: 600; color: #8A857D; letter-spacing: 0; } #page-operations .lkr-bigstat .loc { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: #C4BFB6; margin-top: 8px; display: flex; align-items: center; gap: 6px; } #page-operations .lkr-bigstat .loc svg { color: #C9A84C; flex: 0 0 auto; } #page-operations .lkr-bigstat .loc.unset { color: #8A857D; } #page-operations .lkr-idstrip { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 18px; } #page-operations .lkr-idstrip .cap { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #8A857D; margin-bottom: 12px; } #page-operations .lkr-idgrid { display: flex; flex-wrap: wrap; gap: 10px; } #page-operations .lkr-idpill { background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; padding: 9px 12px; min-width: 150px; } #page-operations .lkr-idpill.matched { border-color: rgba(76,175,125,0.5); background: rgba(76,175,125,0.14); } #page-operations .lkr-idpill .ik { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #8A857D; display: flex; align-items: center; gap: 6px; } #page-operations .lkr-idpill.matched .ik { color: #4CAF7D; } #page-operations .lkr-idpill .iv { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: #F0EBE2; margin-top: 3px; word-break: break-word; } #page-operations .lkr-idpill .ivsub { font-size: 11px; color: #8A857D; margin-top: 1px; } #page-operations .lkr-mdot { width: 6px; height: 6px; border-radius: 50%; background: #4CAF7D; } #page-operations .lkr-ractions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 18px; } /* no-match card */ #page-operations .lkr-nomatch { background: #232120; border: 1px solid rgba(232,148,58,0.35); border-radius: 16px; padding: 0; overflow: hidden; } #page-operations .lkr-nmstrip { display: flex; align-items: center; gap: 10px; background: rgba(232,148,58,0.14); border-bottom: 1px solid rgba(232,148,58,0.3); padding: 12px 24px; font-size: 13px; color: #F0EBE2; } #page-operations .lkr-nmstrip svg { color: #E8943A; flex: 0 0 auto; } #page-operations .lkr-nmstrip b { font-family: 'Montserrat', sans-serif; } #page-operations .lkr-nmstrip code { font-family: 'Montserrat', sans-serif; color: #E8943A; font-weight: 700; word-break: break-word; } #page-operations .lkr-nmbody { padding: 24px; } #page-operations .lkr-nmbody h3 { margin: 0 0 6px; font-size: 17px; color: #F0EBE2; font-family: 'Montserrat', sans-serif; } #page-operations .lkr-nmbody p { margin: 0; font-size: 13px; color: #8A857D; max-width: 520px; line-height: 1.55; } #page-operations .lkr-nmactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } #page-operations .lkr-note { font-size: 12px; color: #8A857D; margin-top: 14px; } /* FIX_CLEANING_ALIAS_S4_REGISTRY_2026_07_08 — the alias registry on the item editor (cleaning-alias arc S4). The expanded "Identifiers & aliases" accordion __invRenderAliasRegistry mounts inside the __invOpenDetail item-detail card: canonical internal-# block (wires DAL.updateItemInternalNumber), a PLURAL vendor-codes table with a provenance column (from-invoice vs by-hand, add via DAL.addItemAlias / remove via DAL.removeItemAlias), UPC(s), name/alt-name aliases, a "how lookups resolve" rail, and an .iar-elsewhere pointer distinguishing resolution from purchasing (Suppliers). Two states: populated + new-item empty. Tokens mirror design_samples/operations_inventory/inventory_alias_registry.html. Scoped under #page-operations to match the inventory hub host (#inv-panel). */ #page-operations .iar-acc { background: #232120; border: 1px solid rgba(201,168,76,0.35); border-radius: 16px; box-shadow: 0 0 0 1px rgba(201,168,76,0.08); margin-top: 18px; overflow: hidden; } #page-operations .iar-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; } @media (max-width: 940px) { #page-operations .iar-grid { grid-template-columns: 1fr; } } #page-operations .iar-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); } #page-operations .iar-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: rgba(201,168,76,0.14); color: #C9A84C; display: flex; align-items: center; justify-content: center; } #page-operations .iar-titles { flex: 1; min-width: 0; } #page-operations .iar-title { display: block; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: #F0EBE2; } #page-operations .iar-summary { display: block; font-size: 12px; color: #8A857D; margin-top: 2px; } #page-operations .iar-body { padding: 20px 22px 22px; } #page-operations .iar-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 12.5px; color: #C4BFB6; line-height: 1.5; } #page-operations .iar-note svg { flex: 0 0 auto; margin-top: 1px; } #page-operations .iar-note.blue { background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.25); } #page-operations .iar-note.blue svg { color: #5B9BD5; } #page-operations .iar-note.amber { background: rgba(232,148,58,0.07); border: 1px solid rgba(232,148,58,0.22); } #page-operations .iar-note.amber svg { color: #E8943A; } #page-operations .iar-note b { color: #F0EBE2; } /* canonical internal-number block */ #page-operations .iar-canon { display: flex; gap: 16px; align-items: center; background: linear-gradient(180deg,rgba(201,168,76,0.10),rgba(201,168,76,0.02)); border: 1px solid rgba(201,168,76,0.3); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; flex-wrap: wrap; } #page-operations .iar-canon .cico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: rgba(201,168,76,0.14); color: #C9A84C; display: flex; align-items: center; justify-content: center; } #page-operations .iar-canon .cmeta { flex: 1; min-width: 160px; } #page-operations .iar-canon .ck { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #C9A84C; } #page-operations .iar-canon .cv { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 700; color: #F0EBE2; letter-spacing: -.3px; line-height: 1.1; margin-top: 2px; } #page-operations .iar-canon .csub { font-size: 12px; color: #8A857D; margin-top: 2px; } #page-operations .iar-canon .cinput { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; } #page-operations .iar-canon input { width: 150px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; color: #F0EBE2; font-family: 'Montserrat', sans-serif; font-size: 14px; padding: 9px 11px; } #page-operations .iar-canon input:focus { outline: none; border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.14); } /* alias sub-section */ #page-operations .iar-sec { margin-bottom: 22px; } #page-operations .iar-sec:last-child { margin-bottom: 0; } #page-operations .iar-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } #page-operations .iar-sh .t { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #C4BFB6; } #page-operations .iar-sh .badge { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: #C9A84C; background: rgba(201,168,76,0.14); } #page-operations .iar-sh .badge.none { color: #8A857D; background: #232120; } #page-operations .iar-sh .spacer { flex: 1; } #page-operations .iar-ghost { background: none; border: none; color: #C9A84C; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; } /* tables */ #page-operations .iar-tw { border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; overflow: hidden; overflow-x: auto; } #page-operations .iar-tw table { width: 100%; border-collapse: collapse; font-size: 13px; } #page-operations .iar-tw thead th { text-align: left; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #8A857D; background: #1C1A17; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.10); white-space: nowrap; } #page-operations .iar-tw tbody td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: middle; } #page-operations .iar-tw tbody tr:last-child td { border-bottom: none; } #page-operations .iar-tw .code { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: #F0EBE2; letter-spacing: .3px; } #page-operations .iar-tw .vendor { font-family: 'Montserrat', sans-serif; font-weight: 600; color: #F0EBE2; } #page-operations .iar-prov { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #8A857D; flex-wrap: wrap; } #page-operations .iar-prov .badge { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; } #page-operations .iar-prov .badge.invoice { color: #4CAF7D; background: rgba(76,175,125,0.14); } #page-operations .iar-prov .badge.hand { color: #5B9BD5; background: rgba(91,155,213,0.12); } #page-operations .iar-prov code { font-family: 'Montserrat', sans-serif; color: #C4BFB6; } #page-operations .iar-xbtn { background: none; border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; width: 30px; height: 30px; color: #8A857D; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #page-operations .iar-xbtn:hover { color: #E05555; border-color: #E05555; } #page-operations .iar-empty { border: 1px dashed rgba(255,255,255,0.10); border-radius: 10px; padding: 14px 16px; font-size: 12.5px; color: #8A857D; } /* upc row */ #page-operations .iar-upc { display: flex; align-items: center; gap: 12px; background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; flex-wrap: wrap; } #page-operations .iar-upc .bc { color: #C9A84C; flex: 0 0 auto; } #page-operations .iar-upc .um { flex: 1; min-width: 120px; } #page-operations .iar-upc .uv { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: #F0EBE2; letter-spacing: .5px; } #page-operations .iar-upc .uv.none { color: #8A857D; } #page-operations .iar-upc .us { font-size: 11.5px; color: #8A857D; margin-top: 1px; } /* name/alt fields */ #page-operations .iar-ng { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 620px) { #page-operations .iar-ng { grid-template-columns: 1fr; } } #page-operations .iar-field label { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #8A857D; margin-bottom: 7px; } #page-operations .iar-field .rowin { display: flex; gap: 8px; align-items: center; } #page-operations .iar-field input { width: 100%; background: #1C1A17; border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; color: #F0EBE2; font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 10px 12px; } #page-operations .iar-field input:focus { outline: none; border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.14); } #page-operations .iar-field .hint { font-size: 11px; color: #8A857D; margin-top: 6px; } /* add-row inline forms (revealed on Add-click) */ #page-operations .iar-addform { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; padding: 12px 14px; background: #1C1A17; border: 1px dashed rgba(201,168,76,0.4); border-radius: 10px; } #page-operations .iar-addform input, #page-operations .iar-addform select { background: #232120; border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; color: #F0EBE2; font-family: 'Open Sans', sans-serif; font-size: 13px; padding: 8px 10px; } #page-operations .iar-addform input:focus, #page-operations .iar-addform select:focus { outline: none; border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.14); } #page-operations .iar-addform .grow { flex: 1; min-width: 120px; } #page-operations .iar-msg { font-size: 12px; margin-top: 8px; display: none; } #page-operations .iar-msg.show { display: block; } #page-operations .iar-msg.err { color: #E05555; } #page-operations .iar-msg.ok { color: #4CAF7D; } /* elsewhere pointer (distinguish from Suppliers & purchasing) */ #page-operations .iar-elsewhere { display: flex; align-items: center; gap: 12px; background: #232120; border: 1px dashed rgba(255,255,255,0.10); border-radius: 10px; padding: 12px 16px; margin-top: 6px; flex-wrap: wrap; } #page-operations .iar-elsewhere svg { color: #8A857D; flex: 0 0 auto; } #page-operations .iar-elsewhere .et { flex: 1; min-width: 200px; font-size: 12px; color: #8A857D; } #page-operations .iar-elsewhere .et b { color: #C4BFB6; font-weight: 600; } #page-operations .iar-elsewhere .go { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: #C9A84C; white-space: nowrap; } /* how-lookups-resolve rail */ #page-operations .iar-rail { background: #232120; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 18px 20px; } #page-operations .iar-rail .rt { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #F0EBE2; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; } #page-operations .iar-rail .rt svg { color: #C9A84C; } #page-operations .iar-rail .rsub { font-size: 12px; color: #8A857D; margin: 0 0 16px; line-height: 1.5; } #page-operations .iar-flow { list-style: none; margin: 0; padding: 0; } #page-operations .iar-flow li { display: flex; gap: 12px; padding: 0 0 16px; position: relative; } #page-operations .iar-flow li:last-child { padding-bottom: 0; } #page-operations .iar-flow li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: -4px; width: 1px; background: rgba(255,255,255,0.10); } #page-operations .iar-flow li:last-child::before { display: none; } #page-operations .iar-flow .dot { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; background: rgba(201,168,76,0.14); color: #C9A84C; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; z-index: 1; } #page-operations .iar-flow .fx b { display: block; font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: #F0EBE2; } #page-operations .iar-flow .fx span { font-size: 11.5px; color: #8A857D; line-height: 1.45; } #page-operations .iar-railnote { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 11.5px; color: #8A857D; line-height: 1.5; } #page-operations .iar-railnote b { color: #C4BFB6; } /* FIX_VISION_COUNT_PART1_2026_06_30 — camera-vision inventory-count capture surface (Part 1 of 3: the shared live camera-capture component + file-upload fallback). These .vcap-* classes style the capture screen __renderCaptureSurface mounts: the live