/* ============================================================ StirlingOS — BACK OFFICE neutral chrome (tier 2b) BACKOFFICE_NEUTRAL_PROPOSAL (Cowork-approved 2026-06-13): staff back office = neutral LIGHT; brand (gold/black) lives ONLY in the member app + print. styles.css is fully CSS-variable-driven, so this scope RE-MAPS the brand tokens to light-neutral and overrides the few hardcoded gold/dark decorations — the existing .card/.kpi/.bar/.table components become the neutral kit, no markup rewrite. color = SEMANTIC ONLY: green up · amber attention · red alert · blue primary. NO gold. Applied via data-chrome="neutral" on .app for CONVERTED back-office routes only (POS/KDS + member app untouched). Light-primary (office env, data density); POS floor stays dark. ============================================================ */ .app[data-chrome="neutral"]{ --ink:#ffffff; --ink2:#f7f8fa; --panel:#ffffff; --panel-2:#eef1f4; --bg-base:#f5f6f8; --surface-1:#ffffff; --surface-2:#eef1f4; --cream:#1c1f24; --white:#1c1f24; --text-2:#4f565f; --text-3:#71787f; --muted:#5b626b; --muted-2:#878e96; --line:#e4e7eb; --line-soft:#eceef1; --sep:#e4e7eb; --sep-strong:#d4d8dd; /* "gold" slot is re-pointed to BLUE primary so every gold-keyed element becomes neutral-primary */ --gold:#2f6fd0; --gold-soft:#2f6fd0; --gold-deep:#2059b3; --gold-strong:#2f6fd0; --gold-tint:rgba(47,111,208,.10); --gold-subtle:rgba(47,111,208,.08); --ok:#1f9d57; --ok-bg:#e8f6ee; --warn:#b9770f; --warn-bg:#fbf0db; --danger:#c23b3b; --danger-bg:#fbe7e7; --info:#2f6fd0; --info-bg:#e7f0fa; --green:#1f9d57; --amber:#b9770f; --red:#c23b3b; --shadow:0 4px 14px rgba(20,24,30,.08); --elev-1:0 1px 3px rgba(20,24,30,.07); --focus:0 0 0 3px rgba(47,111,208,.30); background:var(--bg-base); /* Explicit dark ink so INHERITED text (e.g. `.le b` values, `.le-d` names) is dark on white. Remapping the --cream VARIABLE isn't enough: already computed its `color` from the brand cream and inherits that literal down; this overrides it for the whole neutral subtree. Explicitly-colored elements (tables, nav, .muted, the gold Brand-Preview inline styles) keep their own colors. */ color:var(--cream); } /* kill the brand dark/cream body bg from peeking behind the neutral .app (data-chrome is on .app) */ body:has(.app[data-chrome="neutral"]){background:#f5f6f8} /* shell → light neutral (kill dark/gold chrome) */ .app[data-chrome="neutral"] .sidebar{background:#ffffff;border-right:1px solid var(--line)} .app[data-chrome="neutral"] .topbar{background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--line)} .app[data-chrome="neutral"] .topbar h1{color:var(--cream)} .app[data-chrome="neutral"] .brand .wm{color:var(--cream)} .app[data-chrome="neutral"] .brand .wm small{color:var(--muted-2)} /* the SC mark is a gold brand asset — desaturate to a neutral monochrome mark for the staff tool */ .app[data-chrome="neutral"] .brand img{filter:grayscale(1) brightness(.55)} /* ===== Apple-rail redesign 2026-07-26 (Josh: back office felt clunky/cluttered) ===== Quiet warm-gray rail beside white content; 32px rounded-pill rows; one icon voice (16px stroke SVGs, .nicon); blue reserved for the ACTIVE pill only (semantic system — no gold in staff chrome); unshipped departments = muted label + 'soon' chip, never fake rows. Neutral scope ONLY — the dark POS rail and member app are untouched. */ .app[data-chrome="neutral"] .sidebar{background:#f6f7f8;padding:20px 10px 14px} .app[data-chrome="neutral"] .nav-item{padding:7px 10px;margin:1px 2px;border-radius:8px;font-size:13px;gap:10px;color:#3c4046;font-weight:450} .app[data-chrome="neutral"] .nav-item .ico{width:20px;display:inline-flex;align-items:center;justify-content:center;opacity:.6} .app[data-chrome="neutral"] .nav-item .nicon{display:block} .app[data-chrome="neutral"] .nav-item:hover{background:rgba(28,31,36,.05);color:#1c1f24} .app[data-chrome="neutral"] .nav-item.active{background:var(--gold-tint);color:var(--gold);box-shadow:none;font-weight:550} .app[data-chrome="neutral"] .nav-item.active .ico{opacity:1} .app[data-chrome="neutral"] .nav-sec{font-size:10.5px;letter-spacing:.9px;color:#6f757d;padding:18px 12px 5px;font-weight:600} .app[data-chrome="neutral"] .nav-div{height:1px;background:var(--sep-strong);opacity:.6;margin:16px 12px 4px} .app[data-chrome="neutral"] .nav-foot{border-top:1px solid var(--line-soft);padding:10px 2px 2px} .app[data-chrome="neutral"] .nav-foot .nav-item{color:#71787f} .app[data-chrome="neutral"] .nav-pos-enter{color:#1c1f24} .app[data-chrome="neutral"] .nav-pos-enter .ico{color:var(--gold);opacity:1} .app[data-chrome="neutral"] .eyebrow,.app[data-chrome="neutral"] .grouplabel{color:var(--muted)} /* cards → flat white, no gradient; KPI value neutral (kill the gold flag) */ .app[data-chrome="neutral"] .card{background:#ffffff;border:1px solid var(--line);box-shadow:var(--elev-1)} .app[data-chrome="neutral"] .table-wrap{background:#ffffff} .app[data-chrome="neutral"] .kpi .val,.app[data-chrome="neutral"] .kpi .val.gold{color:var(--cream)} /* data bars → solid blue primary (semantic), not the gold gradient */ .app[data-chrome="neutral"] .bar-fill{background:var(--gold)} .app[data-chrome="neutral"] .bar-track{background:#eceef1} /* form fields: .input/select/textarea are hardcoded #101015 (only lightened under [data-theme=light]) */ .app[data-chrome="neutral"] .input,.app[data-chrome="neutral"] select,.app[data-chrome="neutral"] textarea{background:#fff;border:1px solid var(--line);color:var(--cream)} .app[data-chrome="neutral"] .input::placeholder,.app[data-chrome="neutral"] textarea::placeholder{color:var(--muted-2)} .app[data-chrome="neutral"] a{color:var(--info)} .app[data-chrome="neutral"] ::selection{background:rgba(47,111,208,.22);color:#1c1f24} /* cleaner back-office type: sans headings, lighter weight */ .app[data-chrome="neutral"] .topbar h1,.app[data-chrome="neutral"] .section-title{font-family:var(--sans);font-weight:500;letter-spacing:.2px} .app[data-chrome="neutral"] .kpi .val{font-family:var(--sans);font-weight:600} /* brand buttons → flat neutral. .btn-gold is a gold GRADIENT + hardcoded gold shadow + near-black text; .btn-ghost/.btn-goldline have hardcoded gold-rgba bg/border the var re-map can't reach. Flatten to solid blue primary / neutral outline (the "gold" var already points to blue under this scope). */ .app[data-chrome="neutral"] .btn-gold{background:var(--gold);color:#fff;box-shadow:none} .app[data-chrome="neutral"] .btn-gold:hover{filter:brightness(1.04)} .app[data-chrome="neutral"] .btn-ghost,.app[data-chrome="neutral"] .btn-goldline{background:rgba(47,111,208,.06);border:1px solid var(--sep-strong);color:var(--gold)} .app[data-chrome="neutral"] .btn-ghost:hover,.app[data-chrome="neutral"] .btn-goldline:hover{border-color:var(--gold);color:var(--gold)} .app[data-chrome="neutral"] .b-gold{border:1px solid var(--gold);color:var(--gold);background:transparent} .app[data-chrome="neutral"] .founders-star,.app[data-chrome="neutral"] .amt-pos{color:var(--gold)} /* ---- kit affordances (new components) ---- */ .bo-cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .app[data-chrome="neutral"] .bo-link{font-size:13px;color:var(--info);font-weight:500;white-space:nowrap} .app[data-chrome="neutral"] .bo-link:hover{text-decoration:underline} .app[data-chrome="neutral"] .bo-delta{font-size:11.5px;margin-top:6px;display:inline-flex;align-items:center;gap:4px;font-weight:500} .app[data-chrome="neutral"] .bo-delta.up{color:var(--green)} .app[data-chrome="neutral"] .bo-delta.down{color:var(--red)} .app[data-chrome="neutral"] .bo-delta.warn{color:var(--amber)} /* ---- sales scoreboard (D3) ---- */ .app[data-chrome="neutral"] .bo-delta.ok{color:var(--info)} /* on-track 60–99% — readable, not the faint default */ .app[data-chrome="neutral"] .bar-fill.sb-up{background:var(--green)} .app[data-chrome="neutral"] .bar-fill.sb-warn{background:var(--amber)} .app[data-chrome="neutral"] .bar-fill.sb-ok{background:var(--gold)} .sb-gva{align-items:center} .sb-quick{display:inline-flex;gap:6px;margin-left:12px;flex:0 0 auto} .sb-quick .btn{padding:3px 11px;font-size:12.5px;line-height:1.5;min-width:0} /* ===== STRIP residual gold from the staff shell — accent-only (STRIP_STAFF_GOLD, 2026-06-15) ===== bo.css already re-points --gold -> blue INSIDE .app[data-chrome="neutral"] (L18) and neutralizes the body bg (L33), so the staff shell is neutral. These kill the LAST gold that lives OUTSIDE the .app variable scope: the body-level toast (#toast — gold gradient in styles.css) and the literal-gold scrollbar thumb, plus neutral overscroll. Scoped to a neutral staff route, so the LOGIN brand, the POS service-floor (data-chrome="pos"), and the member app (never loads bo.css) all stay untouched. Gold tokens remain for explicit accents (the POS-mode chip/pill, .btn-gold primary, Settings Brand-Preview). */ html:has(.app[data-chrome="neutral"]){background:#f5f6f8} body:has(.app[data-chrome="neutral"]) .toast{background:#23232a;color:#fff;box-shadow:0 10px 34px rgba(20,24,30,.22)} body:has(.app[data-chrome="neutral"]) ::selection{background:rgba(47,111,208,.22);color:#0f1216} body:has(.app[data-chrome="neutral"]) ::-webkit-scrollbar-thumb{background:rgba(22,22,30,.22)} /* ===== STRIP gold from STAFF POPUPS — modals & drawers (STRIP_STAFF_GOLD, follow-up) ===== #modal / #drawer are BODY-LEVEL (siblings of .app), so bo.css's neutral remap (L11, scoped to .app[data-chrome="neutral"]) never reaches them — they render the styles.css dark/gold base (dark gradient bg, gold-tinted borders, dark #101015 form fields). Re-apply the SAME neutral token map to these popups when a neutral staff route is active. Scoped via body:has() so the LOGIN brand, POS popups (data-chrome="pos" + pos.css service-floor), and the member app (never loads bo.css) stay untouched. */ body:has(.app[data-chrome="neutral"]) .modal-box, body:has(.app[data-chrome="neutral"]) .drawer{ --ink:#ffffff;--ink2:#f7f8fa;--panel:#ffffff;--panel-2:#eef1f4;--bg-base:#f5f6f8;--surface-1:#ffffff;--surface-2:#eef1f4; --cream:#1c1f24;--white:#1c1f24;--text-2:#4f565f;--text-3:#71787f;--muted:#5b626b;--muted-2:#878e96; --line:#e4e7eb;--line-soft:#eceef1;--sep:#e4e7eb;--sep-strong:#d4d8dd; --gold:#2f6fd0;--gold-soft:#2f6fd0;--gold-deep:#2059b3;--gold-strong:#2f6fd0;--gold-tint:rgba(47,111,208,.10);--gold-subtle:rgba(47,111,208,.08); --ok:#1f9d57;--warn:#b9770f;--danger:#c23b3b;--info:#2f6fd0;--green:#1f9d57;--amber:#b9770f;--red:#c23b3b; color:#1c1f24; } body:has(.app[data-chrome="neutral"]) .modal-box{background:#ffffff;border:1px solid #e4e7eb} body:has(.app[data-chrome="neutral"]) .drawer{background:#ffffff;border-left:1px solid #e4e7eb} body:has(.app[data-chrome="neutral"]) .drawer-head, body:has(.app[data-chrome="neutral"]) .modal-head{background:#ffffff;border-color:#e4e7eb;color:#1c1f24} /* form fields inside popups: base is a LITERAL #101015 dark — neutralize to white (mirrors bo.css L53) */ body:has(.app[data-chrome="neutral"]) .modal-box .input, body:has(.app[data-chrome="neutral"]) .modal-box select, body:has(.app[data-chrome="neutral"]) .modal-box textarea, body:has(.app[data-chrome="neutral"]) .drawer .input, body:has(.app[data-chrome="neutral"]) .drawer select, body:has(.app[data-chrome="neutral"]) .drawer textarea{background:#ffffff;border:1px solid #e4e7eb;color:#1c1f24} /* ---- Exceptions report action tags ---- semantic, scoped to the neutral staff chrome so the tokens are the light-remapped set and nothing leaks to the POS floor / member app. Buckets: voids=alert(red), comps=positive give-away(green), discounts=primary(blue), tax-exempt=attention(amber), the rest neutral. */ .app[data-chrome="neutral"] .exc-tag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap} .app[data-chrome="neutral"] .exc-void{background:var(--danger-bg);color:var(--danger)} .app[data-chrome="neutral"] .exc-comp{background:var(--ok-bg);color:var(--ok)} .app[data-chrome="neutral"] .exc-disc{background:var(--info-bg);color:var(--info)} .app[data-chrome="neutral"] .exc-tax{background:var(--warn-bg);color:var(--warn)} .app[data-chrome="neutral"] .exc-reopen, .app[data-chrome="neutral"] .exc-drawer, .app[data-chrome="neutral"] .exc-gift{background:var(--panel-2);color:var(--text-2)} /* ===== MX-S1 work-order console (hub MX-1; MaintainX-anchored) ===== */ .wo-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px;margin:8px 0} .wo-meta>div>span{display:block;font-size:11px} .wo-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:10px 0} .wo-photo{width:100%;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line)} .wo-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} .wo-timeline{border-left:2px solid var(--line);padding-left:12px;display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto} .wo-ev{font-size:13px} .wo-ev-ts{color:var(--muted-2);font-size:11px;margin-right:6px;font-variant-numeric:tabular-nums} .wo-chip{font-size:12px;padding:5px 10px} .wo-appr .btn{margin-left:6px} @media (max-width:640px){ .drawer .wo-meta{grid-template-columns:1fr 1fr} }