/* ============================================================================= LIVING SYSTEM · design-system primitives ----------------------------------------------------------------------------- Topology-oriented dashboard. The dashboard is the flagship surface; these primitives (node, detail-panel, brief-bar, pulsebar, heart, play-the-day, edge flow, toast caption) are intended to propagate out to Project Management, Estimating, Service, CRM as they're reshaped for uniformity. Scoping: - All selectors sit under `.ls-root` so adopting the styles is opt-in and the class can be added to any page shell (Project Management, Estimating) without leaking into legacy screens. - Tokens are declared on `:root` so existing --ink / --amber usage elsewhere keeps working, but they use `--ls-` prefix to avoid collisions. Heritage note: the toroidal gauge at the center of the topology replaces the prior cmd-arc SVG gauge. See `feedback_dashboard_gauge_keep.md` in memory — that feedback was explicitly overridden by Will on 2026-04-13. ============================================================================= */ :root { --ls-bg: #08090C; --ls-bg-2: #0E0F13; --ls-bg-3: #14161C; --ls-bg-4: #1B1E27; --ls-line: rgba(255,255,255,0.06); --ls-line-2: rgba(255,255,255,0.10); --ls-line-3: rgba(255,255,255,0.16); --ls-ink: #EEF0F6; --ls-ink-2: #A6ABB8; --ls-ink-3: #6A7082; --ls-ink-4: #3E4454; --ls-amber: #F5A524; --ls-amber-2: #FFC560; --ls-amber-3: #FFE1A3; --ls-amber-deep:#8A5A0F; --ls-green: #2DD4BF; --ls-green-2: #86F1E1; --ls-red: #F87171; --ls-red-2: #FCA5A5; --ls-violet: #A78BFA; --ls-violet-2: #D3C4FF; --ls-sans: 'Inter',ui-sans-serif,system-ui,sans-serif; --ls-mono: 'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ls-display: 'Fraunces',Georgia,serif; /* --- shared chrome tokens (overridden in classic/light) ------------------ These exist so pieces that previously hardcoded rgba(255,255,255,*) or rgba(20,22,28,*) can cleanly invert under data-site-theme="classic". */ --ls-world-bg: radial-gradient(900px 600px at 50% 50%, rgba(245,165,36,0.07), transparent 60%), radial-gradient(600px 400px at 10% 10%, rgba(167,139,250,0.06), transparent 60%), radial-gradient(600px 400px at 90% 90%, rgba(45,212,191,0.05), transparent 60%), var(--ls-bg-2); --ls-world-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 40px 80px rgba(0,0,0,0.45); --ls-grid-color: rgba(255,255,255,0.025); --ls-chip-bg: rgba(255,255,255,0.02); --ls-caption-bg: rgba(20,22,28,0.85); --ls-node-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px -20px rgba(0,0,0,0.6); --ls-node-bg: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); } /* ============================================================================= LIGHT THEME / CLASSIC MODE OVERRIDES ----------------------------------------------------------------------------- Applied when SpinTheme.setMode('light') runs — which sets BOTH body[data-mode="light"] (modern) and body[data-site-theme="classic"] (legacy compat). Match both so the theme kicks in regardless of which attribute path the engine is using in a given build. ============================================================================= */ html[data-site-theme="classic"] .ls-root, body[data-site-theme="classic"] .ls-root, html[data-mode="light"] .ls-root, body[data-mode="light"] .ls-root { /* Paper variant — warm cream paper, burnt amber, ambient shadows. Picked 2026-04-15 after mockup iteration (see living_system_light_v3_mockup.html). */ --ls-bg: #F3F0E8; /* warm paper, not cold slate */ --ls-bg-2: #FBF9F3; /* raised surface */ --ls-bg-3: #EFEBDF; --ls-bg-4: #E5E0D1; --ls-line: rgba(24,18,8,0.08); --ls-line-2: rgba(24,18,8,0.12); --ls-line-3: rgba(24,18,8,0.22); --ls-ink: #1A1812; /* near-black warm */ --ls-ink-2: #4A4338; --ls-ink-3: #766D5E; --ls-ink-4: #B5AD9D; --ls-amber: #B45309; /* burnt amber — AAA on paper */ --ls-amber-2: #92400E; /* amber text grade */ --ls-amber-3: #D97706; /* packet/CTA grade */ --ls-amber-deep:#78350F; --ls-green: #047857; --ls-green-2: #059669; --ls-red: #B91C1C; --ls-red-2: #DC2626; --ls-violet: #6D28D9; --ls-violet-2: #7C3AED; /* Paper-mode chrome: shadows do the work glow does in dark. */ --ls-world-bg: radial-gradient(1100px 720px at 50% 50%, rgba(180,83,9,0.055), transparent 60%), radial-gradient(620px 420px at 12% 18%, rgba(109,40,217,0.035), transparent 60%), radial-gradient(620px 420px at 88% 82%, rgba(4,120,87,0.030), transparent 60%), linear-gradient(180deg, #FDFBF5 0%, #F6F2E7 100%); --ls-world-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(24,18,8,0.04), 0 30px 60px -20px rgba(24,18,8,0.18), 0 60px 120px -40px rgba(180,83,9,0.12); --ls-grid-color: rgba(24,18,8,0.045); --ls-chip-bg: rgba(24,18,8,0.025); --ls-caption-bg: rgba(253,251,245,0.90); --ls-node-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 2px 4px rgba(24,18,8,0.05), 0 10px 24px -8px rgba(24,18,8,0.18); --ls-node-bg: #FBF9F3; /* raised paper, opaque */ } /* ----------------------------------------------------------------------------- SHELL · the `.ls-root` is the single-page canvas. It is sized to fit the entire viewport minus the ERP topbar; the dashboard is deliberately no-scroll on desktop (mockup contract — "everything fits in one viewport"). --------------------------------------------------------------------------- */ .ls-root { position: relative; color: var(--ls-ink); font-family: var(--ls-sans); background: var(--ls-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: calc(100vh - 68px); padding: 16px 22px 14px; overflow: visible; } .ls-root *, .ls-root *::before, .ls-root *::after { box-sizing: border-box; } .ls-root .ls-wrap { position: relative; max-width: 1520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; min-height: calc(100vh - 96px); } /* ----------------------------------------------------------------------------- TOPLINE · eyebrow row above the brief: mode label + live clock --------------------------------------------------------------------------- */ .ls-root .ls-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .ls-root .ls-topline .lab { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--ls-ink-3); } .ls-root .ls-topline .now { font-family: var(--ls-mono); font-size: 11px; color: var(--ls-ink-3); letter-spacing: .3px; } /* ----------------------------------------------------------------------------- BRIEF · editorial single-sentence AI briefing above the topology --------------------------------------------------------------------------- */ .ls-root .ls-brief { font-family: var(--ls-display); font-weight: 400; font-size: 26px; line-height: 1.22; letter-spacing: -.6px; margin: 0; max-width: 1160px; color: var(--ls-ink); } .ls-root .ls-brief em { font-style: italic; color: var(--ls-amber-2); font-weight: 300; } .ls-root .ls-brief b { font-weight: 600; background: linear-gradient(180deg, #FFE1A3, var(--ls-amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ----------------------------------------------------------------------------- WORLD · the topology canvas --------------------------------------------------------------------------- */ .ls-root .ls-world { position: relative; flex: 1 1 auto; min-height: 720px; border-radius: 24px; border: 1px solid var(--ls-line); background: var(--ls-world-bg); box-shadow: var(--ls-world-shadow); overflow: hidden; isolation: isolate; } .ls-root .ls-world .grid { position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(var(--ls-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--ls-grid-color) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%); } /* legend + zoom + play controls */ .ls-root .ls-legend-top { position: absolute; top: 16px; left: 18px; display: flex; gap: 10px; z-index: 4; } .ls-root .ls-legend-top .chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ls-line-2); background: var(--ls-chip-bg); font-size: 10.5px; color: var(--ls-ink-2); letter-spacing: .3px; } .ls-root .ls-legend-top .sw { width: 8px; height: 8px; border-radius: 99px; } .ls-root .ls-legend-top .sw.flow { background: var(--ls-amber); box-shadow: 0 0 10px var(--ls-amber); } .ls-root .ls-legend-top .sw.hot { background: var(--ls-red); box-shadow: 0 0 10px var(--ls-red); } .ls-root .ls-legend-top .sw.ok { background: var(--ls-green); box-shadow: 0 0 10px var(--ls-green); } .ls-root .ls-zoom { position: absolute; top: 16px; right: 18px; z-index: 4; display: flex; gap: 6px; } .ls-root .ls-zoom .z { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--ls-line-2); background: var(--ls-chip-bg); color: var(--ls-ink-2); font-size: 14px; cursor: default; } .ls-root .ls-play-ctl { position: absolute; bottom: 18px; left: 18px; z-index: 4; display: flex; align-items: center; gap: 10px; } .ls-root .ls-play-btn { appearance: none; font: inherit; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: linear-gradient(180deg, rgba(245,165,36,0.22), rgba(245,165,36,0.10)); border: 1px solid rgba(245,165,36,0.45); color: var(--ls-amber-2); font-size: 12px; font-weight: 600; letter-spacing: .2px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .ls-root .ls-play-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(245,165,36,0.65); } .ls-root .ls-play-btn .ico { font-size: 12px; line-height: 1; } .ls-root .ls-day-clock { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--ls-chip-bg); border: 1px solid var(--ls-line-2); font-family: var(--ls-mono); font-size: 11px; color: var(--ls-ink-2); } .ls-root .ls-day-clock .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--ls-violet); box-shadow: 0 0 8px var(--ls-violet); } .ls-root .ls-demo-caption { position: absolute; bottom: 18px; left: 50%; transform: translate(-50%, 12px); z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--ls-caption-bg); border: 1px solid var(--ls-line-2); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); color: var(--ls-ink); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .ls-root .ls-demo-caption.show { opacity: 1; transform: translate(-50%, 0); } .ls-root .ls-demo-caption em { font-style: normal; color: var(--ls-amber-2); font-weight: 600; } .ls-root .ls-demo-caption .tod { font-family: var(--ls-mono); font-size: 10.5px; color: var(--ls-ink-3); letter-spacing: .4px; } .ls-root .ls-demo-caption.hot { border-color: rgba(248,113,113,0.35); } .ls-root .ls-demo-caption.hot em { color: var(--ls-red-2); } .ls-root .ls-demo-caption.ok { border-color: rgba(45,212,191,0.35); } .ls-root .ls-demo-caption.ok em { color: var(--ls-green-2); } .ls-root .ls-demo-caption.ai { border-color: rgba(167,139,250,0.45); } .ls-root .ls-demo-caption.ai em { color: var(--ls-violet-2); } /* ----------------------------------------------------------------------------- FLOW LAYER (SVG) · edges, packets, march animation --------------------------------------------------------------------------- */ .ls-root svg.ls-flows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } .ls-root svg.ls-flows .edge { transition: opacity .2s ease, stroke-width .2s ease; } .ls-root svg.ls-flows .edge-label { transition: opacity .2s ease; opacity: .75; } /* ── LS Animation Custom Properties (defaults; overridden by SpindenTheme) ── */ :root { --ls-dash-speed: 1; --ls-pulse-intensity: 1; --ls-packet-glow: 1; } /* marching ants — dashes flow outward from sphere to nodes Duration is base / speed multiplier, so higher speed = faster animation */ @keyframes lsMarchAmber { to { stroke-dashoffset: -24; } } @keyframes lsMarchHot { to { stroke-dashoffset: -28; } } @keyframes lsMarchOk { to { stroke-dashoffset: -20; } } @keyframes lsMarchViolet { to { stroke-dashoffset: -18; } } .ls-root .march-amber { animation: lsMarchAmber calc(1.8s / var(--ls-dash-speed)) linear infinite; } .ls-root .march-hot { animation: lsMarchHot calc(1.2s / var(--ls-dash-speed)) linear infinite; } .ls-root .march-ok { animation: lsMarchOk calc(2.4s / var(--ls-dash-speed)) linear infinite; } .ls-root .march-violet { animation: lsMarchViolet calc(1.6s / var(--ls-dash-speed)) linear infinite; } /* ── Variant: museum — static edges, no marching, no packets ── */ body[data-ls-variant="museum"] .ls-root .march-amber, body[data-ls-variant="museum"] .ls-root .march-hot, body[data-ls-variant="museum"] .ls-root .march-ok, body[data-ls-variant="museum"] .ls-root .march-violet { animation: none; } body[data-ls-variant="museum"] .ls-root svg.ls-flows circle { display: none; } /* ── Variant: minimal — no dashes, thin edges, no glow ── */ body[data-ls-variant="minimal"] .ls-root .march-amber, body[data-ls-variant="minimal"] .ls-root .march-hot, body[data-ls-variant="minimal"] .ls-root .march-ok, body[data-ls-variant="minimal"] .ls-root .march-violet { animation: none; stroke-dasharray: none; stroke-width: 1; } body[data-ls-variant="minimal"] .ls-root svg.ls-flows circle { display: none; } body[data-ls-variant="minimal"] .ls-root .edge-label { display: none; } /* ── Master animation kill switch ── */ body[data-ls-anim="off"] .ls-root .march-amber, body[data-ls-anim="off"] .ls-root .march-hot, body[data-ls-anim="off"] .ls-root .march-ok, body[data-ls-anim="off"] .ls-root .march-violet { animation: none; } body[data-ls-anim="off"] .ls-root svg.ls-flows circle { display: none; } body[data-ls-anim="off"] .ls-root .ls-node { animation: none !important; transition: none !important; } body[data-ls-anim="off"] .ls-root .ls-torus-halo { animation: none !important; } /* Packet glow is controlled by JS via --ls-packet-glow (0 or 1); firePacket() reads the var and conditionally applies the SVG filter. */ /* focus state: dim the non-focused edges + labels */ .ls-root .ls-world.focused svg.ls-flows .edge-group:not(.is-focus) .edge, .ls-root .ls-world.focused svg.ls-flows .edge-group:not(.is-focus) .edge-label { opacity: .2; } .ls-root .ls-world.focused svg.ls-flows .edge-group.is-focus .edge { filter: drop-shadow(0 0 6px currentColor); } /* ----------------------------------------------------------------------------- NODE · a module surface floating in the topology --------------------------------------------------------------------------- */ .ls-root .ls-node { position: absolute; width: 196px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--ls-line-2); background: var(--ls-node-bg); box-shadow: var(--ls-node-shadow); color: var(--ls-ink); z-index: 3; /* --kpi-scale (default 1) is the adaptive-KPI weight hook. Only the dashboard adaptive-KPI prototype sets it; everywhere else it resolves to 1 (no-op). transition includes opacity so de-emphasised (rarely-used) nodes fade. */ transform: scale(var(--kpi-scale, 1)); transform-origin: center center; transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, border-color .2s ease, opacity .28s ease; cursor: pointer; outline: none; } .ls-root .ls-node:hover, .ls-root .ls-node:focus-visible { transform: translateY(-2px) scale(var(--kpi-scale, 1)); border-color: var(--ls-line-3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 50px -18px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05); } .ls-root .ls-node .k { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ls-ink-3); font-weight: 600; } .ls-root .ls-node .t { font-family: var(--ls-display); font-weight: 300; font-size: 28px; line-height: 1.05; margin-top: 4px; letter-spacing: -.8px; } .ls-root .ls-node .t em { font-style: normal; font-size: 14px; color: var(--ls-ink-3); font-family: var(--ls-sans); font-weight: 500; margin-left: 2px; } .ls-root .ls-node .v { font-size: 11.5px; color: var(--ls-ink-2); margin-top: 2px; } /* node state: ok / warn / hot */ .ls-root .ls-node.ok { border-color: rgba(45,212,191,0.25); background: linear-gradient(180deg, rgba(45,212,191,0.09), rgba(45,212,191,0.02)); } .ls-root .ls-node.ok .v { color: var(--ls-green-2); } .ls-root .ls-node.warn { border-color: rgba(245,165,36,0.32); background: linear-gradient(180deg, rgba(245,165,36,0.10), rgba(245,165,36,0.02)); } .ls-root .ls-node.warn .v { color: var(--ls-amber-2); } .ls-root .ls-node.hot { border-color: rgba(248,113,113,0.35); background: linear-gradient(180deg, rgba(248,113,113,0.10), rgba(248,113,113,0.02)); } .ls-root .ls-node.hot .v { color: var(--ls-red-2); } /* positions — 7 nodes in a hexagonal ring around the heart */ .ls-root .ls-node.n-ap { top: 56px; left: 98px; } .ls-root .ls-node.n-fin { top: 284px; left: 24px; } .ls-root .ls-node.n-ar { top: 512px; left: 98px; } .ls-root .ls-node.n-ops { top: 56px; right: 98px; } .ls-root .ls-node.n-hr { top: 284px; right: 24px; } .ls-root .ls-node.n-crm { top: 512px; right: 98px; } .ls-root .ls-node.n-ai { left: 50%; bottom: 38px; transform: translateX(-50%) scale(var(--kpi-scale, 1)); transform-origin: center bottom; width: 218px; border-color: rgba(167,139,250,0.35); background: linear-gradient(180deg, rgba(167,139,250,0.14), rgba(167,139,250,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 52px -14px rgba(167,139,250,0.4); } .ls-root .ls-node.n-ai .k { color: var(--ls-violet-2); } .ls-root .ls-node.n-ai .v { color: var(--ls-violet-2); } .ls-root .ls-node.n-ai:hover, .ls-root .ls-node.n-ai:focus-visible { transform: translateX(-50%) translateY(-2px) scale(var(--kpi-scale, 1)); } /* actionable CTA row inside each node — the thing that makes the card more than a passive KPI. Button sits beneath .v and inherits node state color via currentColor on the arrow. */ .ls-root .ls-node .ls-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035); color: var(--ls-ink); font-family: var(--ls-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .2px; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease; text-align: left; } .ls-root .ls-node .ls-act:hover, .ls-root .ls-node .ls-act:focus-visible { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); outline: none; } .ls-root .ls-node .ls-act:active { transform: translateY(1px); } .ls-root .ls-node .ls-act .ls-act-arrow { font-size: 13px; line-height: 1; transition: transform .2s ease; opacity: .85; } .ls-root .ls-node .ls-act:hover .ls-act-arrow { transform: translateX(3px); opacity: 1; } /* state tint — tracks node color so the CTA reads as part of the card */ .ls-root .ls-node.ok .ls-act { border-color: rgba(45,212,191,0.28); color: var(--ls-green-2); background: rgba(45,212,191,0.08); } .ls-root .ls-node.ok .ls-act:hover { background: rgba(45,212,191,0.16); border-color: rgba(45,212,191,0.45); } .ls-root .ls-node.warn .ls-act { border-color: rgba(245,165,36,0.35); color: var(--ls-amber-2); background: rgba(245,165,36,0.09); } .ls-root .ls-node.warn .ls-act:hover { background: rgba(245,165,36,0.18); border-color: rgba(245,165,36,0.55); } .ls-root .ls-node.hot .ls-act { border-color: rgba(248,113,113,0.38); color: var(--ls-red-2); background: rgba(248,113,113,0.10); } .ls-root .ls-node.hot .ls-act:hover { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.58); } .ls-root .ls-node.n-ai .ls-act.ls-act-ai { border-color: rgba(167,139,250,0.4); color: var(--ls-violet-2); background: rgba(167,139,250,0.12); } .ls-root .ls-node.n-ai .ls-act.ls-act-ai:hover { background: rgba(167,139,250,0.22); border-color: rgba(167,139,250,0.6); } /* hit pulses — used during play-the-day */ @keyframes lsNodeHit { 0%{box-shadow:0 0 0 0 rgba(255,255,255,0.25);} 100%{box-shadow:0 0 0 18px rgba(255,255,255,0);} } @keyframes lsNodeHitHot { 0%{box-shadow:0 0 0 0 rgba(248,113,113,0.45);} 100%{box-shadow:0 0 0 22px rgba(248,113,113,0);} } @keyframes lsNodeHitOk { 0%{box-shadow:0 0 0 0 rgba(45,212,191,0.45);} 100%{box-shadow:0 0 0 22px rgba(45,212,191,0);} } @keyframes lsNodeHitAi { 0%{box-shadow:0 0 0 0 rgba(167,139,250,0.55);} 100%{box-shadow:0 0 0 24px rgba(167,139,250,0);} } .ls-root .ls-node.hit { animation: lsNodeHit calc(.9s / var(--ls-pulse-intensity)) ease-out; } .ls-root .ls-node.hot-hit { animation: lsNodeHitHot calc(.9s / var(--ls-pulse-intensity)) ease-out; } .ls-root .ls-node.ok-hit { animation: lsNodeHitOk calc(.9s / var(--ls-pulse-intensity)) ease-out; } .ls-root .ls-node.ai-hit { animation: lsNodeHitAi calc(.9s / var(--ls-pulse-intensity)) ease-out; } /* focus dim */ .ls-root .ls-world.focused .ls-node:not(.is-focus) { opacity: .35; } .ls-root .ls-world.focused .ls-node.is-focus { opacity: 1; transform: translateY(-3px) scale(var(--kpi-scale, 1)); } .ls-root .ls-world.focused .ls-node.n-ai.is-focus { transform: translateX(-50%) translateY(-3px) scale(var(--kpi-scale, 1)); } @keyframes lsConducting { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 52px -14px rgba(167,139,250,0.4); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 52px -8px rgba(167,139,250,0.8); } } .ls-root .ls-node.n-ai.conducting { animation: lsConducting 1.4s ease-in-out 2; } /* ----------------------------------------------------------------------------- ADAPTIVE KPIs (prototype) --------------------------------------------------------------------------- Nodes grow/shrink with how often the operator actually engages them. The raw scale is driven by `--kpi-scale` (set inline by dashboard_adaptive_kpi.js and composed into every node transform above). The tier classes below add the supporting cues so the size change reads as intent, not jitter: · kpi-lg — frequently-used: brighter label, faint amber halo · kpi-sm — rarely-touched: receded, lower contrast (still legible) Pure visual layer; no telemetry is wired yet. --------------------------------------------------------------------------- */ .ls-root .ls-node.kpi-lg { z-index: 4; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 26px 60px -20px rgba(0,0,0,0.72), 0 0 0 1px rgba(245,165,36,0.18); } .ls-root .ls-node.kpi-lg .k { color: var(--ls-amber-2); } .ls-root .ls-node.kpi-sm { opacity: .74; border-color: var(--ls-line-2); } .ls-root .ls-node.kpi-sm:hover, .ls-root .ls-node.kpi-sm:focus-visible { opacity: 1; } /* legend / control pill — bottom-right, scoped to the topology world */ .ls-root .ls-adaptive-pill { position: absolute; right: 16px; bottom: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 999px; background: var(--ls-bg-2); border: 1px solid var(--ls-line-2); box-shadow: 0 14px 34px -18px rgba(0,0,0,0.7); font: 500 11px/1 var(--ls-mono); letter-spacing: .04em; color: var(--ls-ink-2); user-select: none; } .ls-root .ls-adaptive-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ls-amber); box-shadow: 0 0 0 3px rgba(245,165,36,0.18); } .ls-root .ls-adaptive-pill.off { opacity: .55; } .ls-root .ls-adaptive-pill.off .dot { background: var(--ls-ink-3); box-shadow: none; } .ls-root .ls-adaptive-pill button { appearance: none; background: transparent; border: 1px solid var(--ls-line-2); border-radius: 7px; color: var(--ls-ink-2); font: 500 10.5px/1 var(--ls-mono); letter-spacing: .04em; padding: 5px 8px; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .ls-root .ls-adaptive-pill button:hover { border-color: var(--ls-line-3); color: var(--ls-ink); } /* ----------------------------------------------------------------------------- HEART · toroidal composite-health gauge at the center of the topology --------------------------------------------------------------------------- */ .ls-root .ls-heart { position: absolute; top: 60px; left: 50%; width: 420px; height: 420px; transform: translateX(-50%); z-index: 1; pointer-events: none; } .ls-root .ls-heart .halo, .ls-root .ls-heart .halo-2 { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; } .ls-root .ls-heart .halo { background: radial-gradient(closest-side, rgba(245,165,36,0.18), transparent 70%); filter: blur(30px); animation: lsHaloBreathe 5s ease-in-out infinite; } .ls-root .ls-heart .halo-2 { background: radial-gradient(closest-side, rgba(167,139,250,0.10), transparent 60%); filter: blur(40px); animation: lsHaloBreathe 7s ease-in-out infinite reverse; } @keyframes lsHaloBreathe { 50% { transform: scale(1.05); opacity: .9; } } .ls-root .ls-heart .torus { position: absolute; inset: 20px; border-radius: 50%; } .ls-root .ls-heart .torus svg { width: 100%; height: 100%; filter: drop-shadow(0 24px 48px rgba(245,165,36,0.28)); } /* The ring IS the color scale. Native CSS conic-gradient rotated so the color at each angle matches the SCORE of the chip that lands there. The SVG arc is rotate(135 cx cy), so getPointAtLength walks the ring such that score=0 / score=100 both map to the SW point (~7:30 on the clock), score=0.25 lands NW, score=0.5 lands NE, and score=0.75 lands SE. To color-match that traversal, the conic must start red at SW (225° in CSS's from-top clockwise convention) and wrap back to teal at the same point, placing amber at NE (45°) halfway around. Net effect: chips at 100 sit exactly where green ends, chips at 0 sit one pixel counter-clockwise on red, and chips between walk the gradient proportionally. */ .ls-root .ls-heart .torus .ls-heart-rim-conic { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 225deg, #F87171 0%, #F5A524 50%, #2DD4BF 100%); -webkit-mask: radial-gradient(circle closest-side, transparent 77%, #000 80%, #000 91%, transparent 94%); mask: radial-gradient(circle closest-side, transparent 77%, #000 80%, #000 91%, transparent 94%); opacity: .85; pointer-events: none; z-index: 1; } .ls-root .ls-heart .torus svg { position: relative; z-index: 2; } .ls-root .ls-heart .torus .orbit { z-index: 3; } .ls-root .ls-heart .torus .center{ z-index: 4; } .ls-root .ls-heart .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .ls-root .ls-heart .eyebrow { font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ls-ink-3); font-weight: 600; margin-bottom: 2px; } .ls-root .ls-heart .big { font-family: var(--ls-display); font-weight: 300; font-size: 90px; line-height: 1; letter-spacing: -3px; background: linear-gradient(180deg, #FFFFFF, #FFE1A3 55%, var(--ls-amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ls-root .ls-heart .big sub { font-family: inherit; font-size: 22px; -webkit-text-fill-color: var(--ls-ink-3); color: var(--ls-ink-3); vertical-align: super; } .ls-root .ls-heart .big.ticking { text-shadow: 0 0 24px rgba(245,165,36,0.45); } .ls-root .ls-heart .label { font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--ls-ink-3); margin-top: 6px; } .ls-root .ls-heart .sub-label { font-size: 10.5px; color: var(--ls-ink-2); margin-top: 3px; font-family: var(--ls-mono); } /* ----------------------------------------------------------------------------- orbit chips — chip placement MUST mirror the outer node ring --------------------------------------------------------------------------- Outer node ring (see `.ls-node.n-*` rules above): AP top-left → chip at ~10 o'clock (top-left of rim) OPS top-right → chip at ~ 2 o'clock (top-right of rim) FIN middle-left → chip at ~ 9 o'clock (rim left) HR middle-right → chip at ~ 3 o'clock (rim right) AR bottom-left → chip at ~ 8 o'clock (bottom-left of rim) CRM bottom-right → chip at ~ 4 o'clock (bottom-right of rim) AI bottom-center → chip at ~ 6 o'clock (rim bottom) The chip is a radius-positioned badge; we nudge it just past the rim so it reads as the toroid's mini-dashboard of per-module scores, not floating detritus. Colors follow the module's current state (ok/warn/hot/ai). -------------------------------------------------------------------------- */ .ls-root .ls-heart .orbit { position: absolute; inset: 0; pointer-events: none; } .ls-root .ls-heart .orbit span { position: absolute; transform: translate(-50%, -50%); /* coords below are chip CENTERS */ font-family: var(--ls-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--ls-line-2); background: rgba(20,22,28,0.82); color: var(--ls-ink-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; } /* Positioning (top/left) is set in JS by positionOrbitChips() — each chip sits on the arc at its own data-score value so the ring becomes a literal 0–100 scale, not decoration. Only per-module COLORS live here; geometry belongs to JS because it depends on getPointAtLength() of the arc circle. Chip colors are NOT set here. positionOrbitChips() in dashboard_living.js / pm_living.js colors each chip via colorAtScore(score) so the chip sits on the exact color of the ring beneath it. Add a hardcoded override below only if you deliberately want a chip to break from gradient alignment. */ /* ----------------------------------------------------------------------------- RING-BADGE CHIP TREATMENT · .ls-heart.ls-rings-chips scope Solid paper chip inside a thick colored ring derived from colorAtScore(). Module code stays ink-colored for legibility; the score number wears the score color. Requires JS to emit two inner spans: CRM100 (textContent-only chips still render readably but lose the color split.) Used on the dashboard for now; add .ls-rings-chips to any .ls-heart to opt a page in. Eventually replaces the bare-capsule look project-wide. --------------------------------------------------------------------------- */ .ls-root .ls-heart.ls-rings-chips .orbit span { padding: 3px 10px; border-width: 1.5px; background: var(--ls-node-bg, #FBF9F3); color: var(--ls-ink); box-shadow: 0 1px 0 rgba(24,18,8,0.04), 0 4px 10px -6px rgba(24,18,8,0.18); backdrop-filter: none; -webkit-backdrop-filter: none; /* Plain inline layout — no flex. Absolutely-positioned spans with transform: translate can render flex children at zero width in some engines, which hid the module code in an earlier iteration. */ } .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-code, .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-num { display: inline; white-space: nowrap; } .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-code { color: var(--ls-ink); font-weight: 700; margin-right: 4px; } .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-num { font-weight: 700; font-variant-numeric: tabular-nums; /* color set inline by JS to colorAtScore(score) */ } /* Dark-theme chip paper: fall back to a translucent node bg so the stroke still pops against the ambient torus glow. */ :root[data-theme="dark"] .ls-root .ls-heart.ls-rings-chips .orbit span, [data-theme="dark"] .ls-root .ls-heart.ls-rings-chips .orbit span { background: rgba(20,22,28,0.88); color: var(--ls-ink-2); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px -6px rgba(0,0,0,0.55); } :root[data-theme="dark"] .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-code, [data-theme="dark"] .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-code { color: var(--ls-ink-2); } /* drifting particles inside the torus */ .ls-root .ls-heart .dust { position: absolute; inset: 28px; border-radius: 50%; background-image: radial-gradient(2px 2px at 30% 22%, rgba(255,225,163,0.4), transparent 60%), radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,0.35), transparent 60%), radial-gradient(1px 1px at 82% 68%, rgba(167,139,250,0.45), transparent 60%), radial-gradient(2px 2px at 20% 78%, rgba(45,212,191,0.4), transparent 60%), radial-gradient(1px 1px at 52% 62%, rgba(255,255,255,0.3), transparent 60%); animation: lsDustSpin 38s linear infinite; pointer-events: none; opacity: .6; } @keyframes lsDustSpin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- HEART METRICS CARDS · overlay on the heart when clicked Warm-paper aesthetic: raised card with amber accent, editorial typography, subtle depth cues. Matches ls-node cards and Living System light palette. --------------------------------------------------------------------------- */ /* -- shared close button for both cards -- */ .ls-heart-card .hc-close, .ls-chip-card .hc-close { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border: 1px solid var(--ls-line-2); background: var(--ls-bg-2, #FBF9F3); border-radius: 50%; color: var(--ls-ink-3); font-size: 15px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s; } .ls-heart-card .hc-close:hover, .ls-chip-card .hc-close:hover { background: var(--ls-bg-4, #E5E0D1); border-color: var(--ls-line-3); color: var(--ls-ink); } /* -- shared card shell -- */ .ls-root .ls-heart-card, .ls-root .ls-chip-card { position: absolute; top: 50%; left: 50%; background: var(--ls-node-bg, #FBF9F3); border: 1px solid var(--ls-line-2); border-radius: 18px; box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 2px 6px rgba(24,18,8,0.06), 0 12px 32px -8px rgba(24,18,8,0.22), 0 40px 80px -20px rgba(180,83,9,0.10); opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; } /* -- composite breakdown card -- */ .ls-root .ls-heart-card { transform: translate(-50%, -50%) scale(0.88); width: 360px; z-index: 20; } .ls-root .ls-heart-card.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } /* Amber accent strip along top */ .ls-heart-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ls-amber-3, #D97706), var(--ls-amber, #B45309), var(--ls-violet, #6D28D9)); border-radius: 18px 18px 0 0; } .ls-heart-card .hc-head { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 24px 14px; border-bottom: 1px solid var(--ls-line, rgba(24,18,8,0.08)); } .ls-heart-card .hc-title { font-family: var(--ls-display); font-size: 17px; font-weight: 500; color: var(--ls-ink); letter-spacing: 0.2px; font-style: italic; } .ls-heart-card .hc-composite { font-family: var(--ls-display); font-size: 26px; font-weight: 700; color: var(--ls-amber, #B45309); letter-spacing: -0.5px; } .ls-heart-card .hc-modules { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; } .ls-heart-card .hc-mod { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: transparent; transition: background 0.15s; cursor: pointer; } .ls-heart-card .hc-mod:hover { background: var(--ls-bg-3, #EFEBDF); } .ls-heart-card .hc-mod .hc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px rgba(0,0,0,0.08); } .ls-heart-card .hc-mod .hc-name { font-family: var(--ls-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ls-ink-2); width: 38px; flex-shrink: 0; } .ls-heart-card .hc-mod .hc-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--ls-bg-4, #E5E0D1); overflow: hidden; } .ls-heart-card .hc-mod .hc-bar i { display: block; height: 100%; border-radius: 3px; transition: width 0.5s ease; } .ls-heart-card .hc-mod .hc-val { font-family: var(--ls-mono); font-size: 12px; font-weight: 700; color: var(--ls-ink); min-width: 28px; text-align: right; } .ls-heart-card .hc-mod .hc-reason { font-size: 10.5px; color: var(--ls-ink-3); font-style: italic; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-heart-card .hc-footer { margin: 0; padding: 10px 24px 16px; border-top: 1px solid var(--ls-line, rgba(24,18,8,0.08)); background: linear-gradient(180deg, transparent, rgba(180,83,9,0.025)); } .ls-heart-card .hc-note { font-size: 10px; color: var(--ls-ink-4); font-family: var(--ls-mono); letter-spacing: 0.5px; text-transform: uppercase; } /* -- per-module chip card -- */ .ls-root .ls-chip-card { transform: translate(-50%, -50%) scale(0.88); width: 290px; z-index: 21; } .ls-root .ls-chip-card.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } /* Module-colored accent strip — color set inline by JS via --cc-accent */ .ls-chip-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cc-accent, var(--ls-amber-3, #D97706)); border-radius: 18px 18px 0 0; } .ls-chip-card .cc-head { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 22px 14px; border-bottom: 1px solid var(--ls-line, rgba(24,18,8,0.08)); } .ls-chip-card .cc-module { font-family: var(--ls-display); font-size: 15px; font-weight: 500; letter-spacing: 0.3px; color: var(--ls-ink); font-style: italic; } .ls-chip-card .cc-score { font-family: var(--ls-display); font-size: 32px; font-weight: 700; line-height: 1; color: var(--cc-accent, var(--ls-amber, #B45309)); } .ls-chip-card .cc-metrics { display: flex; flex-direction: column; gap: 0; padding: 6px 10px; } .ls-chip-card .cc-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; transition: background 0.15s; } .ls-chip-card .cc-row:hover { background: var(--ls-bg-3, #EFEBDF); } .ls-chip-card .cc-row .cc-label { font-size: 11.5px; color: var(--ls-ink-2); } .ls-chip-card .cc-row .cc-data { font-family: var(--ls-mono); font-size: 12px; font-weight: 700; color: var(--ls-ink); } .ls-chip-card .cc-row .cc-data.hot { color: var(--ls-red-2); } .ls-chip-card .cc-row .cc-data.warn { color: var(--ls-amber-2); } .ls-chip-card .cc-row .cc-data.ok { color: var(--ls-green-2); } .ls-chip-card .cc-insight { padding: 12px 22px 16px; border-top: 1px solid var(--ls-line, rgba(24,18,8,0.08)); font-size: 11px; color: var(--ls-ink-3); line-height: 1.55; font-style: italic; background: linear-gradient(180deg, transparent, rgba(180,83,9,0.025)); } /* Make heart center + orbit chips pointer-interactive for metric cards. Center div stays pointer-events:none so it doesn't swallow chip clicks. A real child div (.ls-heart-click-zone) inside .center is the click target — pseudo-elements can't receive DOM events independently. */ .ls-root .ls-heart .center { pointer-events: none; } .ls-root .ls-heart .ls-heart-click-zone { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: auto; cursor: pointer; z-index: 4; } .ls-root .ls-heart .torus .orbit { pointer-events: none; z-index: 5; } .ls-root .ls-heart .torus .orbit span { pointer-events: auto; cursor: pointer; } /* ----------------------------------------------------------------------------- DETAIL DRAWER · slides from the right when a node is clicked --------------------------------------------------------------------------- */ .ls-root .ls-detail-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 420px; max-width: calc(100% - 24px); border-radius: 20px; background: linear-gradient(180deg, rgba(20,22,28,0.95), rgba(14,15,19,0.95)); border: 1px solid var(--ls-line-2); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8); transform: translateX(calc(100% + 24px)); transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease; opacity: 0; z-index: 6; overflow: hidden; display: flex; flex-direction: column; } .ls-root .ls-detail-panel.open { transform: translateX(0); opacity: 1; } .ls-root .ls-detail-panel.hot { border-color: rgba(248,113,113,0.32); } .ls-root .ls-detail-panel.warn { border-color: rgba(245,165,36,0.32); } .ls-root .ls-detail-panel.ok { border-color: rgba(45,212,191,0.32); } .ls-root .ls-detail-panel.violet { border-color: rgba(167,139,250,0.38); } .ls-root .ls-detail-panel .dp-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--ls-line-2); color: var(--ls-ink-2); font-size: 16px; cursor: pointer; z-index: 2; } .ls-root .ls-detail-panel .dp-close:hover { color: var(--ls-ink); background: rgba(255,255,255,0.08); } .ls-root .ls-detail-panel .dp-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--ls-line); } .ls-root .ls-detail-panel .dp-head .k { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ls-ink-3); font-weight: 600; } .ls-root .ls-detail-panel .dp-head .title { font-family: var(--ls-display); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.4px; margin-top: 4px; padding-right: 34px; } .ls-root .ls-detail-panel .dp-head .title em { font-style: italic; color: var(--ls-amber-2); font-weight: 300; } .ls-root .ls-detail-panel.hot .dp-head .title em { color: var(--ls-red-2); } .ls-root .ls-detail-panel.ok .dp-head .title em { color: var(--ls-green-2); } .ls-root .ls-detail-panel.violet .dp-head .title em { color: var(--ls-violet-2); } .ls-root .ls-detail-panel .dp-head .sub { font-size: 11.5px; color: var(--ls-ink-3); margin-top: 5px; font-family: var(--ls-mono); letter-spacing: .2px; } .ls-root .ls-detail-panel .dp-body { flex: 1; overflow-y: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--ls-line-3) transparent; } .ls-root .ls-detail-panel .dp-body::-webkit-scrollbar { width: 8px; } .ls-root .ls-detail-panel .dp-body::-webkit-scrollbar-thumb { background: var(--ls-line-3); border-radius: 99px; } .ls-root .ls-detail-panel .dp-hero { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--ls-line); } .ls-root .ls-detail-panel .dp-hero .eyebrow { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ls-ink-3); font-weight: 600; } .ls-root .ls-detail-panel .dp-hero .big { font-family: var(--ls-display); font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -1.2px; margin-top: 4px; } .ls-root .ls-detail-panel .dp-hero .big em { font-style: normal; font-size: 20px; color: var(--ls-ink-3); font-family: var(--ls-sans); font-weight: 500; } .ls-root .ls-detail-panel .dp-hero .foot { margin-top: 6px; font-size: 12px; color: var(--ls-ink-2); } .ls-root .ls-detail-panel .dp-hero .delta { display: inline-block; margin-left: 8px; font-family: var(--ls-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 99px; letter-spacing: .4px; } .ls-root .ls-detail-panel .dp-hero .delta.up { color: var(--ls-green-2); background: rgba(45,212,191,0.12); } .ls-root .ls-detail-panel .dp-hero .delta.down { color: var(--ls-red-2); background: rgba(248,113,113,0.12); } .ls-root .ls-detail-panel .dp-hero .delta.flat { color: var(--ls-ink-3); background: rgba(255,255,255,0.04); } .ls-root .ls-detail-panel .dp-section .lab { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ls-ink-3); font-weight: 600; margin-bottom: 8px; } .ls-root .ls-detail-panel .dp-section .lab .badge { font-family: var(--ls-mono); font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,0.05); color: var(--ls-ink-2); letter-spacing: .6px; } .ls-root .ls-detail-panel .dp-aging { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; } .ls-root .ls-detail-panel .dp-aging .buck { padding: 10px 8px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--ls-line); text-align: center; } .ls-root .ls-detail-panel .dp-aging .buck.on { border-color: rgba(248,113,113,0.28); background: rgba(248,113,113,0.06); } .ls-root .ls-detail-panel .dp-aging .buck .lab { font-family: var(--ls-mono); font-size: 9.5px; color: var(--ls-ink-3); letter-spacing: .6px; margin-bottom: 2px; text-transform: none; } .ls-root .ls-detail-panel .dp-aging .buck .v { font-size: 13px; font-weight: 700; color: var(--ls-ink); } .ls-root .ls-detail-panel .dp-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.015); border: 1px solid var(--ls-line); } .ls-root .ls-detail-panel .dp-row + .dp-row { margin-top: 6px; } .ls-root .ls-detail-panel .dp-row .who .name { font-size: 12.5px; font-weight: 600; color: var(--ls-ink); } .ls-root .ls-detail-panel .dp-row .who .meta { font-size: 10.5px; color: var(--ls-ink-3); font-family: var(--ls-mono); margin-top: 2px; } .ls-root .ls-detail-panel .dp-row .age { font-family: var(--ls-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,0.05); color: var(--ls-ink-2); letter-spacing: .3px; } .ls-root .ls-detail-panel .dp-row .age.hot { background: rgba(248,113,113,0.14); color: var(--ls-red-2); } .ls-root .ls-detail-panel .dp-row .age.warn { background: rgba(245,165,36,0.14); color: var(--ls-amber-2); } .ls-root .ls-detail-panel .dp-row .age.ok { background: rgba(45,212,191,0.14); color: var(--ls-green-2); } .ls-root .ls-detail-panel .dp-row .amt { font-family: var(--ls-mono); font-size: 12.5px; font-weight: 700; color: var(--ls-ink); } .ls-root .ls-detail-panel .dp-flags { display: flex; flex-direction: column; gap: 6px; } .ls-root .ls-detail-panel .dp-flag { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(248,113,113,0.05); border: 1px solid rgba(248,113,113,0.18); } .ls-root .ls-detail-panel.ok .dp-flag { background: rgba(45,212,191,0.05); border-color: rgba(45,212,191,0.18); } .ls-root .ls-detail-panel .dp-flag .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--ls-red); box-shadow: 0 0 8px var(--ls-red); } .ls-root .ls-detail-panel .dp-flag .msg { font-size: 12px; color: var(--ls-ink); line-height: 1.4; } .ls-root .ls-detail-panel .dp-flag .msg b { font-weight: 600; color: var(--ls-ink); } .ls-root .ls-detail-panel .dp-flag .msg .mono { font-family: var(--ls-mono); font-size: 10.5px; color: var(--ls-ink-3); background: rgba(255,255,255,0.03); padding: 1px 6px; border-radius: 4px; margin-left: 4px; } .ls-root .ls-detail-panel .dp-flag .act { appearance: none; font: inherit; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--ls-line-2); color: var(--ls-ink); cursor: pointer; white-space: nowrap; } .ls-root .ls-detail-panel .dp-flag .act:hover { background: rgba(255,255,255,0.12); } .ls-root .ls-detail-panel .dp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ls-root .ls-detail-panel .dp-stat { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--ls-line); } .ls-root .ls-detail-panel .dp-stat .l { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ls-ink-3); font-weight: 600; } .ls-root .ls-detail-panel .dp-stat .v { font-family: var(--ls-display); font-weight: 300; font-size: 26px; letter-spacing: -.8px; margin-top: 3px; line-height: 1; } .ls-root .ls-detail-panel .dp-stat .v em { font-style: normal; font-size: 13px; color: var(--ls-ink-3); font-family: var(--ls-sans); font-weight: 500; } .ls-root .ls-detail-panel .dp-stat .d { font-size: 10.5px; color: var(--ls-ink-3); margin-top: 3px; font-family: var(--ls-mono); } .ls-root .ls-detail-panel .dp-empty { text-align: center; padding: 28px 10px 18px; } .ls-root .ls-detail-panel .dp-empty .glyph { font-size: 38px; color: var(--ls-green-2); opacity: .7; } .ls-root .ls-detail-panel .dp-empty .msg { font-family: var(--ls-display); font-weight: 400; font-size: 22px; letter-spacing: -.4px; margin-top: 4px; } .ls-root .ls-detail-panel .dp-empty .msg em { font-style: italic; color: var(--ls-green-2); font-weight: 300; } .ls-root .ls-detail-panel .dp-empty .sub { font-size: 12px; color: var(--ls-ink-3); margin-top: 8px; line-height: 1.5; } .ls-root .ls-detail-panel .dp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 6px; } .ls-root .ls-detail-panel .dp-btn { appearance: none; font: inherit; font-size: 12px; font-weight: 600; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ls-line-2); background: rgba(255,255,255,0.02); color: var(--ls-ink); cursor: pointer; text-align: center; letter-spacing: -.1px; } .ls-root .ls-detail-panel .dp-btn.amber { background: linear-gradient(180deg, #FFE1A3, var(--ls-amber) 55%, #C77E12); color: #1A0F00; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 22px -8px rgba(245,165,36,0.55); } .ls-root .ls-detail-panel .dp-btn.ghost { background: rgba(245,165,36,0.05); border-color: rgba(245,165,36,0.24); color: var(--ls-amber-2); } /* ----------------------------------------------------------------------------- BOTTOM BAR · AI brief / needs-decision / module pulse (3 cards) --------------------------------------------------------------------------- */ .ls-root .ls-bottombar { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; } .ls-root .ls-bottom { padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid var(--ls-line); } .ls-root .ls-bottom .lab { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ls-ink-3); font-weight: 600; margin-bottom: 8px; } .ls-root .ls-bottom.brief-out { background: linear-gradient(180deg, rgba(245,165,36,0.08), rgba(245,165,36,0.02)); border-color: rgba(245,165,36,0.25); } .ls-root .ls-bottom.brief-out p { font-family: var(--ls-sans); font-size: 13px; line-height: 1.55; color: var(--ls-ink); margin: 0 0 10px; } .ls-root .ls-bottom.brief-out p b { font-weight: 700; color: var(--ls-amber-2); } .ls-root .ls-bottom .cta { display: flex; gap: 8px; flex-wrap: wrap; } .ls-root .ls-bottom .btn { appearance: none; font: inherit; font-size: 12px; font-weight: 600; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--ls-line-2); background: rgba(255,255,255,0.02); color: var(--ls-ink); cursor: pointer; letter-spacing: -.1px; } .ls-root .ls-bottom .btn.amber { background: linear-gradient(180deg, #FFE1A3, var(--ls-amber) 50%, #C77E12) !important; color: #1A0F00 !important; border-color: transparent !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 20px -8px rgba(245,165,36,0.6); } .ls-root .ls-bottom .btn.ghost { background: rgba(245,165,36,0.05) !important; border: 1px solid rgba(245,165,36,0.24) !important; color: var(--ls-amber-2) !important; } .ls-root .ls-tasklist { display: flex; flex-direction: column; gap: 6px; } .ls-root .ls-task { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--ls-line); font-size: 12px; color: var(--ls-ink); line-height: 1.35; } .ls-root .ls-task .mark { width: 8px; height: 8px; border-radius: 99px; background: var(--ls-ink-3); } .ls-root .ls-task.hot { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.22); } .ls-root .ls-task.hot .mark { background: var(--ls-red); box-shadow: 0 0 8px var(--ls-red); } .ls-root .ls-task b { font-weight: 600; } /* SPINIQ queue row CTAs (PR 2, 2026-04-15). Rendered by dashboard_living.js when the row carries a DB id + status. Delegated through data-action=spiniq-{approve|dismiss|execute}. */ .ls-root .ls-task-body { display: flex; flex-direction: column; gap: 6px; } .ls-root .ls-task-ctas { display: flex; gap: 6px; margin-top: 2px; } .ls-root .ls-task-cta { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--ls-line); background: rgba(255,255,255,0.03); color: var(--ls-ink-2, var(--ls-ink)); cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .ls-root .ls-task-cta:hover { background: rgba(255,255,255,0.06); color: var(--ls-ink); } .ls-root .ls-task-cta:disabled { opacity: 0.5; cursor: not-allowed; } .ls-root .ls-task-cta.approve { border-color: rgba(255,179,0,0.35); color: var(--ls-amber-2, var(--ls-amber)); } .ls-root .ls-task-cta.approve:hover { background: rgba(255,179,0,0.10); } .ls-root .ls-task-cta.execute { border-color: rgba(134,239,172,0.35); color: var(--ls-green, #86efac); } .ls-root .ls-task-cta.execute:hover { background: rgba(134,239,172,0.10); } .ls-root .ls-task-cta.dismiss { border-color: rgba(148,163,184,0.25); color: var(--ls-ink-3); } .ls-root .ls-task-cta.dismiss:hover { background: rgba(148,163,184,0.08); } .ls-root .ls-task .amount { font-family: var(--ls-mono); font-size: 11.5px; color: var(--ls-amber-2); font-weight: 600; } .ls-root .ls-pulsebar { display: flex; flex-direction: column; gap: 7px; } .ls-root .ls-pulsebar .row { display: grid; grid-template-columns: 36px 1fr 32px; gap: 10px; align-items: center; font-family: var(--ls-mono); font-size: 10.5px; } .ls-root .ls-pulsebar .name { color: var(--ls-ink-3); letter-spacing: .8px; } .ls-root .ls-pulsebar .num { color: var(--ls-ink); text-align: right; font-weight: 600; } .ls-root .ls-pulsebar .bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.05); overflow: hidden; position: relative; } .ls-root .ls-pulsebar .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ls-amber), var(--ls-amber-2)); border-radius: 99px; } .ls-root .ls-pulsebar .row.g .bar i { background: linear-gradient(90deg, var(--ls-green), var(--ls-green-2)); } .ls-root .ls-pulsebar .row.r .bar i { background: linear-gradient(90deg, var(--ls-red), #FFB5B5); } /* ----------------------------------------------------------------------------- RESPONSIVE · collapse to a scrollable stack on narrow screens --------------------------------------------------------------------------- */ @media (max-width: 1200px) { .ls-root { overflow: auto; } .ls-root .ls-bottombar { grid-template-columns: 1fr 1fr; } .ls-root .ls-world { min-height: 640px; } .ls-root .ls-detail-panel { width: 360px; } } @media (max-width: 820px) { .ls-root .ls-brief { font-size: 20px; } .ls-root .ls-bottombar { grid-template-columns: 1fr; } .ls-root .ls-world { min-height: 580px; } .ls-root .ls-node { width: 160px; padding: 10px 12px; } .ls-root .ls-node .t { font-size: 22px; } .ls-root .ls-heart { width: 320px; height: 320px; } .ls-root .ls-heart .big { font-size: 64px; } .ls-root .ls-detail-panel { width: calc(100% - 24px); } } .ls-root .ls-task.hot .mark { background: var(--ls-red); box-shadow: 0 0 10px var(--ls-red); } .ls-root .ls-task.ok .mark { background: var(--ls-green); box-shadow: 0 0 10px var(--ls-green); } .ls-root .ls-task.warn .mark { background: var(--ls-amber); box-shadow: 0 0 10px var(--ls-amber); } .ls-root .ls-task b { font-weight: 600; color: var(--ls-ink); } .ls-root .ls-task .amount { font-family: var(--ls-mono); font-weight: 600; color: var(--ls-amber-2); } .ls-root .ls-task span { color: var(--ls-ink-3); } /* ----------------------------------------------------------------------------- SCROLLABLE LS PAGES · pages that render tables/cards BELOW the topology (GL Reports, and future pages with trailing detail) must NOT inherit the Dashboard's "fits in one viewport" contract — otherwise the ls-wrap flex min-height pins the wrap to the viewport and trailing content sits outside the .content scroll area. Scope the override to pages that opt-in via an extra modifier class (.ls-glr today) so the Dashboard stays no-scroll. Fixed 2026-04-14: GL Reports detail tables were unreachable. --------------------------------------------------------------------------- */ .ls-root.ls-glr { min-height: 0; padding-bottom: 24px; } .ls-root.ls-glr .ls-wrap { min-height: 0; } .ls-root.ls-glr .ls-world { min-height: 720px; } /* keep topology size */ /* ----------------------------------------------------------------------------- CHROME · when the Living System is mounted, retune the surrounding ERP chrome (sidebar / topbar / main) so nothing fights the topology canvas. Activated by dashboard_living.js toggling `body.ls-active`. --------------------------------------------------------------------------- */ body.ls-active { background: radial-gradient(1200px 700px at 80% -10%, rgba(245,165,36,0.06) 0%, transparent 55%), radial-gradient(1000px 650px at 0% -5%, rgba(167,139,250,0.05) 0%, transparent 55%), #07080B !important; } body.ls-active #sidebar { background: linear-gradient(170deg, #10121A 0%, #0C0E14 60%, #08090C 100%) !important; box-shadow: inset -1px 0 0 rgba(255,255,255,0.05) !important; } body.ls-active #sidebar .sidebar-brand { border-bottom-color: rgba(255,255,255,0.06) !important; } body.ls-active #sidebar .sidebar-brand p, body.ls-active #sidebar .sidebar-version { color: rgba(230,236,244,0.42) !important; } body.ls-active #main { background: #07080B !important; border-radius: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } body.ls-active .topbar { background: rgba(12,13,18,0.78) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.ls-active .topbar-title, body.ls-active #page-title { color: var(--ls-ink) !important; font-family: var(--ls-display), serif !important; font-weight: 400 !important; letter-spacing: -.3px; } body.ls-active .topbar-subtitle { color: var(--ls-ink-3) !important; } body.ls-active .topbar-icon-group, body.ls-active .topbar-icon-btn { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.08) !important; } body.ls-active .topbar-icon-btn svg { color: var(--ls-ink-2) !important; fill: var(--ls-ink-2) !important; } body.ls-active .topbar-icon-btn:hover { background: rgba(245,165,36,0.08) !important; color: var(--ls-amber-2) !important; } /* ----------------------------------------------------------------------------- Topbar timeclock — single segmented pill per dashboard mockup. DOM: .topbar-timeclock > .topbar-timeclock-status + .is-in btn + .is-out btn --------------------------------------------------------------------------- */ body.ls-active .topbar-timeclock { display: inline-flex !important; align-items: stretch !important; padding: 0 !important; gap: 0 !important; border: 1px solid rgba(245,165,36,0.18) !important; border-radius: 999px !important; overflow: hidden !important; background: rgba(20,22,28,0.65) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px -14px rgba(0,0,0,0.6) !important; } body.ls-active .topbar-timeclock-status { padding: 8px 14px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .1px !important; color: var(--ls-ink-3) !important; border: 0 !important; background: transparent !important; display: inline-flex; align-items: center; white-space: nowrap; } body.ls-active .topbar-timeclock-status.is-clocked-in { color: var(--ls-amber-2, #F5A524) !important; } body.ls-active .topbar-timeclock-btn { padding: 8px 14px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .1px !important; border: 0 !important; border-left: 1px solid rgba(245,165,36,0.12) !important; border-radius: 0 !important; background: transparent !important; color: var(--ls-ink-2) !important; cursor: pointer; transition: background .15s ease, color .15s ease; } body.ls-active .topbar-timeclock-btn:hover { background: rgba(245,165,36,0.08) !important; color: var(--ls-amber-2, #F5A524) !important; } body.ls-active .topbar-timeclock-btn.is-in { background: linear-gradient(180deg, #FFE1A3, #F5A524) !important; color: #0B0C0F !important; font-weight: 700 !important; border-left-color: rgba(11,12,15,0.25) !important; } body.ls-active .topbar-timeclock-btn.is-in:hover { background: linear-gradient(180deg, #FFEFC2, #FDB13A) !important; color: #0B0C0F !important; } body.ls-active .topbar-timeclock-btn.is-out { color: var(--ls-ink-2) !important; } body.ls-active .topbar-timeclock-btn.is-out:hover { background: rgba(245,165,36,0.08) !important; color: var(--ls-amber-2, #F5A524) !important; } body.ls-active .topbar-timeclock-btn:disabled { opacity: .35 !important; cursor: not-allowed; } body.ls-active .topbar-timeclock-btn:disabled:hover { background: transparent !important; color: var(--ls-ink-3) !important; } /* ----------------------------------------------------------------------------- CHROME · PAPER (light) variant · 2026-04-15 --------------------------------------------------------------------------- When SpinTheme sets data-mode="light" (or legacy data-site-theme="classic"), retune the entire ERP chrome — body bg, sidebar, topbar, icons, timeclock — to match the Paper topology variant. Matches body.ls-active specificity +1 so these rules win without another !important layer. These overrides target the same DOM surfaces as the dark chrome block above, so future chrome tweaks should land in pairs: update dark rule + mirror the token here. Tokens live on :root (dark) and get overridden under .ls-root[data-mode=light] — but the chrome frame sits OUTSIDE .ls-root, so we inline paper colors here rather than referencing --ls-bg / --ls-ink. --------------------------------------------------------------------------- */ body.ls-active[data-mode="light"], body.ls-active[data-site-theme="classic"] { background: radial-gradient(1200px 700px at 80% -10%, rgba(180,83,9,0.05) 0%, transparent 55%), radial-gradient(1000px 650px at 0% -5%, rgba(109,40,217,0.04) 0%, transparent 55%), #F3F0E8 !important; color: #1A1812; } body.ls-active[data-mode="light"] #sidebar, body.ls-active[data-site-theme="classic"] #sidebar { background: linear-gradient(170deg, #FBF9F3 0%, #F3F0E8 60%, #ECE6D6 100%) !important; box-shadow: inset -1px 0 0 rgba(24,18,8,0.08) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] #sidebar .sidebar-brand, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-brand { border-bottom-color: rgba(24,18,8,0.10) !important; } body.ls-active[data-mode="light"] #sidebar .sidebar-brand p, body.ls-active[data-mode="light"] #sidebar .sidebar-version, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-brand p, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-version { color: rgba(26,24,18,0.58) !important; } /* Sidebar typography + domain list inherit warm ink under Paper. */ body.ls-active[data-mode="light"] #sidebar, body.ls-active[data-mode="light"] #sidebar a, body.ls-active[data-mode="light"] #sidebar .domain-name, body.ls-active[data-mode="light"] #sidebar .sidebar-domain, body.ls-active[data-site-theme="classic"] #sidebar, body.ls-active[data-site-theme="classic"] #sidebar a, body.ls-active[data-site-theme="classic"] #sidebar .domain-name, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-domain { color: #1A1812; } /* Sidebar search input — warm cream with warm ink placeholder. */ body.ls-active[data-mode="light"] .sidebar-search-wrap input, body.ls-active[data-mode="light"] #sidebar-filter-input, body.ls-active[data-site-theme="classic"] .sidebar-search-wrap input, body.ls-active[data-site-theme="classic"] #sidebar-filter-input { background: #FFFFFF !important; border-color: rgba(24,18,8,0.12) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .sidebar-search-wrap input::placeholder, body.ls-active[data-site-theme="classic"] .sidebar-search-wrap input::placeholder { color: rgba(26,24,18,0.42) !important; } /* Sidebar wordmark — "Spinden" has color: #fff !important in core.css */ body.ls-active[data-mode="light"] .sidebar-wordmark-name, body.ls-active[data-site-theme="classic"] .sidebar-wordmark-name { color: #1A1812 !important; } body.ls-active[data-mode="light"] .sidebar-wordmark-ai, body.ls-active[data-site-theme="classic"] .sidebar-wordmark-ai { color: #B45309 !important; } body.ls-active[data-mode="light"] .sidebar-wordmark-ai::before, body.ls-active[data-site-theme="classic"] .sidebar-wordmark-ai::before { background: #D97706 !important; box-shadow: 0 0 6px rgba(217,119,6,.5), inset 0 0 0 0.5px rgba(180,83,9,.4) !important; } /* Site health badge */ body.ls-active[data-mode="light"] .site-health-badge, body.ls-active[data-site-theme="classic"] .site-health-badge { color: #4A4338 !important; border-color: rgba(24,18,8,0.18) !important; background: rgba(24,18,8,0.06) !important; } /* Sidebar nav sections + group headers (have rgba(255,255,255,.35)) */ body.ls-active[data-mode="light"] #sidebar .nav-section, body.ls-active[data-mode="light"] #sidebar .nav-group-header, body.ls-active[data-site-theme="classic"] #sidebar .nav-section, body.ls-active[data-site-theme="classic"] #sidebar .nav-group-header { color: rgba(26,24,18,0.5) !important; } /* Nav items (have rgba(255,255,255,.7)) */ body.ls-active[data-mode="light"] #sidebar .nav-item, body.ls-active[data-site-theme="classic"] #sidebar .nav-item { color: #4A4338 !important; border-left-color: transparent; } body.ls-active[data-mode="light"] #sidebar .nav-item:hover, body.ls-active[data-site-theme="classic"] #sidebar .nav-item:hover { background: rgba(24,18,8,0.05) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] #sidebar .nav-item.active, body.ls-active[data-site-theme="classic"] #sidebar .nav-item.active { background: rgba(180,83,9,0.08) !important; color: #1A1812 !important; border-left-color: #D97706 !important; } /* Nav item icons */ body.ls-active[data-mode="light"] #sidebar .nav-item .icon, body.ls-active[data-site-theme="classic"] #sidebar .nav-item .icon { background: rgba(24,18,8,0.06) !important; border-color: rgba(24,18,8,0.12) !important; color: #4A4338 !important; } /* Nav context badges */ body.ls-active[data-mode="light"] #sidebar .nav-context-badge, body.ls-active[data-site-theme="classic"] #sidebar .nav-context-badge { background: rgba(180,83,9,0.12) !important; border-color: rgba(180,83,9,0.22) !important; color: #92400E !important; } /* Sidebar footer — user name, logout, copyright */ body.ls-active[data-mode="light"] #sidebar .sidebar-footer, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-footer { border-top-color: rgba(24,18,8,0.10) !important; } body.ls-active[data-mode="light"] #sidebar .user-name, body.ls-active[data-site-theme="classic"] #sidebar .user-name { color: #1A1812 !important; } body.ls-active[data-mode="light"] #sidebar .user-email, body.ls-active[data-site-theme="classic"] #sidebar .user-email { color: #766D5E !important; } body.ls-active[data-mode="light"] #sidebar .btn-logout, body.ls-active[data-site-theme="classic"] #sidebar .btn-logout { background: rgba(24,18,8,0.06) !important; color: #4A4338 !important; } body.ls-active[data-mode="light"] #sidebar .btn-logout:hover, body.ls-active[data-site-theme="classic"] #sidebar .btn-logout:hover { background: rgba(24,18,8,0.10) !important; color: #1A1812 !important; } /* Hub hero card — warm glass in Paper */ body.ls-active[data-mode="light"] .hub-hero, body.ls-active[data-site-theme="classic"] .hub-hero { background: rgba(253,251,245,0.80) !important; border-color: rgba(24,18,8,0.12) !important; } body.ls-active[data-mode="light"] .hub-hero-glow, body.ls-active[data-site-theme="classic"] .hub-hero-glow { opacity: 0.3 !important; } /* Hub quick links */ body.ls-active[data-mode="light"] .hub-quick-link, body.ls-active[data-site-theme="classic"] .hub-quick-link { color: #4A4338 !important; } body.ls-active[data-mode="light"] .hub-quick-link:hover, body.ls-active[data-site-theme="classic"] .hub-quick-link:hover { background: rgba(24,18,8,0.05) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] #main, body.ls-active[data-site-theme="classic"] #main { background: #F3F0E8 !important; color: #1A1812; } body.ls-active[data-mode="light"] .topbar, body.ls-active[data-site-theme="classic"] .topbar { background: rgba(253,251,245,0.82) !important; border-bottom: 1px solid rgba(24,18,8,0.08) !important; } body.ls-active[data-mode="light"] .topbar-title, body.ls-active[data-mode="light"] #page-title, body.ls-active[data-site-theme="classic"] .topbar-title, body.ls-active[data-site-theme="classic"] #page-title { color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-subtitle, body.ls-active[data-site-theme="classic"] .topbar-subtitle { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-icon-group, body.ls-active[data-mode="light"] .topbar-icon-btn, body.ls-active[data-site-theme="classic"] .topbar-icon-group, body.ls-active[data-site-theme="classic"] .topbar-icon-btn { background: rgba(24,18,8,0.03) !important; border-color: rgba(24,18,8,0.10) !important; } body.ls-active[data-mode="light"] .topbar-icon-btn svg, body.ls-active[data-site-theme="classic"] .topbar-icon-btn svg { color: #4A4338 !important; fill: #4A4338 !important; } body.ls-active[data-mode="light"] .topbar-icon-btn:hover, body.ls-active[data-site-theme="classic"] .topbar-icon-btn:hover { background: rgba(180,83,9,0.08) !important; color: #92400E !important; } /* Topbar search bar / Ctrl+K input. */ body.ls-active[data-mode="light"] .topbar input[type="text"], body.ls-active[data-mode="light"] .topbar input[type="search"], body.ls-active[data-mode="light"] #top-search, body.ls-active[data-site-theme="classic"] .topbar input[type="text"], body.ls-active[data-site-theme="classic"] .topbar input[type="search"], body.ls-active[data-site-theme="classic"] #top-search { background: #FFFFFF !important; border-color: rgba(24,18,8,0.12) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar input::placeholder, body.ls-active[data-site-theme="classic"] .topbar input::placeholder { color: rgba(26,24,18,0.42) !important; } /* Timeclock pill — recolor the shell and divider, keep the amber CTA. */ body.ls-active[data-mode="light"] .topbar-timeclock, body.ls-active[data-site-theme="classic"] .topbar-timeclock { border: 1px solid rgba(180,83,9,0.28) !important; background: rgba(253,251,245,0.82) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 16px -12px rgba(24,18,8,0.25) !important; } body.ls-active[data-mode="light"] .topbar-timeclock-status, body.ls-active[data-site-theme="classic"] .topbar-timeclock-status { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-timeclock-status.is-clocked-in, body.ls-active[data-site-theme="classic"] .topbar-timeclock-status.is-clocked-in { color: #B45309 !important; } body.ls-active[data-mode="light"] .topbar-timeclock-btn, body.ls-active[data-site-theme="classic"] .topbar-timeclock-btn { border-left: 1px solid rgba(180,83,9,0.18) !important; color: #4A4338 !important; } body.ls-active[data-mode="light"] .topbar-timeclock-btn:hover, body.ls-active[data-site-theme="classic"] .topbar-timeclock-btn:hover { background: rgba(180,83,9,0.08) !important; color: #92400E !important; } body.ls-active[data-mode="light"] .topbar-timeclock-btn.is-in, body.ls-active[data-site-theme="classic"] .topbar-timeclock-btn.is-in { background: linear-gradient(180deg, #FFE4B2, #D97706) !important; color: #1A1812 !important; border-left-color: rgba(24,18,8,0.18) !important; } body.ls-active[data-mode="light"] .topbar-timeclock-btn.is-in:hover, body.ls-active[data-site-theme="classic"] .topbar-timeclock-btn.is-in:hover { background: linear-gradient(180deg, #FFEDC5, #F59E0B) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-timeclock-btn.is-out, body.ls-active[data-site-theme="classic"] .topbar-timeclock-btn.is-out { color: #4A4338 !important; } body.ls-active[data-mode="light"] .topbar-timeclock-btn:disabled:hover, body.ls-active[data-site-theme="classic"] .topbar-timeclock-btn:disabled:hover { color: #766D5E !important; } /* ----------------------------------------------------------------------------- LS INTERIOR · PAPER overrides (2026-04-15) --------------------------------------------------------------------------- Targets hardcoded dark rgba() values inside .ls-root that were authored before the Paper variant existed and therefore don't pick up --ls-* tokens. --------------------------------------------------------------------------- */ /* Edge label text halo — stroke #07080B is dark-mode only; flip to warm paper. */ body[data-mode="light"] .ls-root svg.ls-flows .edge-label, body[data-site-theme="classic"] .ls-root svg.ls-flows .edge-label { stroke: #F3F0E8 !important; } /* Orbit chips ringing the toroidal heart (AP/OPS/FIN/HR/AR/CRM/AI). The rule at line ~696 hardcodes rgba(20,22,28,0.82) — override with warm paper. */ body[data-mode="light"] .ls-root .ls-heart .orbit span, body[data-site-theme="classic"] .ls-root .ls-heart .orbit span { background: rgba(253,251,245,0.92) !important; border-color: rgba(24,18,8,0.14) !important; color: #1A1812 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(24,18,8,0.08); } /* Ring-badge light-mode override — higher specificity via .ls-rings-chips so the bold colored stroke + paper chip actually applies on the dashboard. Border-color is deliberately OMITTED here: JS sets it inline with !important to the score color so each chip wears its own ring. See RING-BADGE CHIP TREATMENT block above (line ~761) for the dark-mode and base rules; this block only unlocks light mode. */ body[data-mode="light"] .ls-root .ls-heart.ls-rings-chips .orbit span, body[data-site-theme="classic"] .ls-root .ls-heart.ls-rings-chips .orbit span { background: var(--ls-node-bg, #FBF9F3) !important; border-style: solid !important; border-width: 1.5px !important; color: var(--ls-ink) !important; padding: 3px 10px !important; box-shadow: 0 1px 0 rgba(24,18,8,0.05), 0 4px 10px -6px rgba(24,18,8,0.20) !important; } body[data-mode="light"] .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-code, body[data-site-theme="classic"] .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-code { color: var(--ls-ink) !important; font-weight: 700; margin-right: 4px; } body[data-mode="light"] .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-num, body[data-site-theme="classic"] .ls-root .ls-heart.ls-rings-chips .orbit span .orbit-num { font-weight: 700; font-variant-numeric: tabular-nums; } /* .orbit-num color is set inline by JS to colorAtScore(score). */ /* Detail drawer shell — line ~737 hardcodes linear-gradient(180deg, rgba(20,22,28,0.95), rgba(14,15,19,0.95)). Paper replaces with raised paper gradient + warm ink. */ body[data-mode="light"] .ls-root .ls-detail-panel, body[data-site-theme="classic"] .ls-root .ls-detail-panel { background: linear-gradient(180deg, #FDFBF5 0%, #F6F2E7 100%) !important; border-color: rgba(24,18,8,0.12) !important; color: #1A1812 !important; box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 40px 80px -30px rgba(24,18,8,0.22) !important; } body[data-mode="light"] .ls-root .ls-detail-panel *, body[data-site-theme="classic"] .ls-root .ls-detail-panel * { border-color: rgba(24,18,8,0.10); } body[data-mode="light"] .ls-root .ls-detail-panel .dp-close, body[data-site-theme="classic"] .ls-root .ls-detail-panel .dp-close { background: rgba(24,18,8,0.04) !important; border-color: rgba(24,18,8,0.12) !important; color: #4A4338 !important; } body[data-mode="light"] .ls-root .ls-detail-panel .dp-close:hover, body[data-site-theme="classic"] .ls-root .ls-detail-panel .dp-close:hover { background: rgba(180,83,9,0.10) !important; color: #92400E !important; } /* Any remaining rgba(255,255,255,…) hover/glass surfaces inside the drawer need a warm equivalent. Target the common cases: glass rows, CTA buttons, separator lines, stat chips. */ body[data-mode="light"] .ls-root .ls-detail-panel [class*="dp-row"], body[data-mode="light"] .ls-root .ls-detail-panel [class*="dp-stat"], body[data-mode="light"] .ls-root .ls-detail-panel [class*="dp-chip"], body[data-mode="light"] .ls-root .ls-detail-panel [class*="dp-cta"], body[data-site-theme="classic"] .ls-root .ls-detail-panel [class*="dp-row"], body[data-site-theme="classic"] .ls-root .ls-detail-panel [class*="dp-stat"], body[data-site-theme="classic"] .ls-root .ls-detail-panel [class*="dp-chip"], body[data-site-theme="classic"] .ls-root .ls-detail-panel [class*="dp-cta"] { background: rgba(24,18,8,0.035) !important; border-color: rgba(24,18,8,0.10) !important; color: #1A1812 !important; } body[data-mode="light"] .ls-root .ls-detail-panel [class*="dp-row"]:hover, body[data-mode="light"] .ls-root .ls-detail-panel [class*="dp-cta"]:hover, body[data-site-theme="classic"] .ls-root .ls-detail-panel [class*="dp-row"]:hover, body[data-site-theme="classic"] .ls-root .ls-detail-panel [class*="dp-cta"]:hover { background: rgba(180,83,9,0.08) !important; border-color: rgba(180,83,9,0.22) !important; color: #92400E !important; } /* SPA non-LS pages still pull body.ls-active chrome but need a light main panel too — give partial-loaded content a warm cream card by default. */ body.ls-active[data-mode="light"] .content > div, body.ls-active[data-site-theme="classic"] .content > div { color: #1A1812; } /* Sidebar secondary surfaces — clock-in/status pills, avatar frame, sign-out link — blend with Paper gradient rather than inheriting dark-mode grays. */ body.ls-active[data-mode="light"] #sidebar .sidebar-user, body.ls-active[data-mode="light"] #sidebar .sidebar-footer, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-user, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-footer { color: #4A4338 !important; border-top-color: rgba(24,18,8,0.10) !important; } body.ls-active[data-mode="light"] #sidebar .sidebar-user a, body.ls-active[data-mode="light"] #sidebar .sidebar-footer a, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-user a, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-footer a { color: #4A4338 !important; } body.ls-active[data-mode="light"] #sidebar .sidebar-user a:hover, body.ls-active[data-mode="light"] #sidebar .sidebar-footer a:hover, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-user a:hover, body.ls-active[data-site-theme="classic"] #sidebar .sidebar-footer a:hover { color: #92400E !important; } /* ----------------------------------------------------------------------------- MODULE CHROME · PAPER overrides (2026-04-15) --------------------------------------------------------------------------- Module-specific shells authored before Paper existed (modules.css, core.css). Scoped under body.ls-active so they only fire when the Living System chrome is active and the user has selected light mode. --------------------------------------------------------------------------- */ /* Project Management — .pm2-container is rgb(8,9,12) in modules.css:2161 */ body.ls-active[data-mode="light"] .pm2-container, body.ls-active[data-site-theme="classic"] .pm2-container { background: #F3F0E8 !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-header, body.ls-active[data-site-theme="classic"] .pm2-header { background: linear-gradient(180deg, #FBF9F3 0%, #F3F0E8 100%) !important; border-bottom: 1px solid rgba(24,18,8,0.10) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-header h1, body.ls-active[data-mode="light"] .pm2-header h2, body.ls-active[data-mode="light"] .pm2-title, body.ls-active[data-site-theme="classic"] .pm2-header h1, body.ls-active[data-site-theme="classic"] .pm2-header h2, body.ls-active[data-site-theme="classic"] .pm2-title { color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-select, body.ls-active[data-mode="light"] .pm2-select-lg, body.ls-active[data-site-theme="classic"] .pm2-select, body.ls-active[data-site-theme="classic"] .pm2-select-lg { background: rgba(253,251,245,0.9) !important; border: 1px solid rgba(24,18,8,0.14) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-tab-pill, body.ls-active[data-site-theme="classic"] .pm2-tab-pill { background: rgba(24,18,8,0.04) !important; border: 1px solid rgba(24,18,8,0.10) !important; color: #4A4338 !important; } body.ls-active[data-mode="light"] .pm2-tab-pill:hover, body.ls-active[data-site-theme="classic"] .pm2-tab-pill:hover { background: rgba(180,83,9,0.08) !important; border-color: rgba(180,83,9,0.22) !important; color: #92400E !important; } body.ls-active[data-mode="light"] .pm2-tab-pill.active, body.ls-active[data-site-theme="classic"] .pm2-tab-pill.active { background: linear-gradient(180deg, #D97706 0%, #B45309 100%) !important; border-color: #92400E !important; color: #FDFBF5 !important; box-shadow: 0 2px 6px rgba(180,83,9,0.25) !important; } body.ls-active[data-mode="light"] .pm2-card, body.ls-active[data-site-theme="classic"] .pm2-card { background: #FBF9F3 !important; border-color: rgba(24,18,8,0.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 14px rgba(24,18,8,0.06) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-card:hover, body.ls-active[data-site-theme="classic"] .pm2-card:hover { border-color: rgba(180,83,9,0.28) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 22px rgba(24,18,8,0.08) !important; } body.ls-active[data-mode="light"] .pm2-card-title, body.ls-active[data-mode="light"] .pm2-title-sm, body.ls-active[data-mode="light"] .pm2-card-header, body.ls-active[data-mode="light"] .pm2-card-body, body.ls-active[data-site-theme="classic"] .pm2-card-title, body.ls-active[data-site-theme="classic"] .pm2-title-sm, body.ls-active[data-site-theme="classic"] .pm2-card-header, body.ls-active[data-site-theme="classic"] .pm2-card-body { color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-table, body.ls-active[data-site-theme="classic"] .pm2-table { color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-table thead th, body.ls-active[data-site-theme="classic"] .pm2-table thead th { background: rgba(24,18,8,0.04) !important; color: #4A4338 !important; border-bottom: 1px solid rgba(24,18,8,0.10) !important; } body.ls-active[data-mode="light"] .pm2-table tbody td, body.ls-active[data-site-theme="classic"] .pm2-table tbody td { border-bottom: 1px solid rgba(24,18,8,0.06) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-table tbody tr:hover td, body.ls-active[data-site-theme="classic"] .pm2-table tbody tr:hover td { background: rgba(180,83,9,0.04) !important; } body.ls-active[data-mode="light"] .pm2-tab-panel, body.ls-active[data-site-theme="classic"] .pm2-tab-panel { color: #1A1812 !important; } body.ls-active[data-mode="light"] .pm2-tab-more-dropdown, body.ls-active[data-site-theme="classic"] .pm2-tab-more-dropdown { background: #FBF9F3 !important; border: 1px solid rgba(24,18,8,0.12) !important; box-shadow: 0 10px 30px rgba(24,18,8,0.12) !important; } body.ls-active[data-mode="light"] .pm2-tab-more-item, body.ls-active[data-site-theme="classic"] .pm2-tab-more-item { color: #4A4338 !important; } body.ls-active[data-mode="light"] .pm2-tab-more-item:hover, body.ls-active[data-site-theme="classic"] .pm2-tab-more-item:hover { background: rgba(180,83,9,0.08) !important; color: #92400E !important; } body.ls-active[data-mode="light"] .pm2-tab-more-trigger, body.ls-active[data-site-theme="classic"] .pm2-tab-more-trigger { color: #4A4338 !important; } /* ----------------------------------------------------------------------------- TOPBAR + POPUPS · PAPER overrides (2026-04-15) --------------------------------------------------------------------------- Topbar search, command bar, notifications menu, user avatar dropdown, SPINIQ toast, modals, and confirm dialogs. Source rules (core.css) all use !important, so these overrides must too. --------------------------------------------------------------------------- */ /* ── Topbar search bar (collapsed pill) ─────────────────────────────── */ body.ls-active[data-mode="light"] .topbar-search-bar, body.ls-active[data-site-theme="classic"] .topbar-search-bar { background: rgba(253,251,245,0.9) !important; border: 1px solid rgba(24,18,8,0.12) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-search-bar:hover, body.ls-active[data-site-theme="classic"] .topbar-search-bar:hover { border-color: rgba(180,83,9,0.28) !important; background: #FBF9F3 !important; } body.ls-active[data-mode="light"] .topbar-search-wrap.is-active .topbar-search-bar, body.ls-active[data-site-theme="classic"] .topbar-search-wrap.is-active .topbar-search-bar { border-color: rgba(180,83,9,0.45) !important; box-shadow: 0 0 0 3px rgba(180,83,9,0.10) !important; } body.ls-active[data-mode="light"] .topbar-search-icon, body.ls-active[data-mode="light"] #topbar-search-input, body.ls-active[data-site-theme="classic"] .topbar-search-icon, body.ls-active[data-site-theme="classic"] #topbar-search-input { color: #4A4338 !important; } body.ls-active[data-mode="light"] #topbar-search-input::placeholder, body.ls-active[data-site-theme="classic"] #topbar-search-input::placeholder { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-search-kbd, body.ls-active[data-site-theme="classic"] .topbar-search-kbd { background: rgba(24,18,8,0.05) !important; border-color: rgba(24,18,8,0.12) !important; color: #4A4338 !important; } /* ── Topbar search dropdown / command bar ───────────────────────────── */ body.ls-active[data-mode="light"] .topbar-search-dropdown, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown { background: linear-gradient(180deg, #FDFBF5 0%, #F6F2E7 100%) !important; border: 1px solid rgba(24,18,8,0.12) !important; box-shadow: 0 30px 80px -20px rgba(24,18,8,0.25) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown #command-bar-input, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown #command-bar-input { background: transparent !important; color: #1A1812 !important; border-bottom: 1px solid rgba(24,18,8,0.08) !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown #command-bar-input::placeholder, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown #command-bar-input::placeholder { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown .command-group-title, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-group-title { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown .command-item, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-item { color: #1A1812 !important; background: transparent !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown .command-item:hover, body.ls-active[data-mode="light"] .topbar-search-dropdown .command-item.active, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-item:hover, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-item.active { background: rgba(180,83,9,0.10) !important; color: #92400E !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown .command-item-title, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-item-title { color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown .command-item-subtitle, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-item-subtitle { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown .command-item-badge, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-item-badge { background: rgba(180,83,9,0.12) !important; color: #B45309 !important; border: 1px solid rgba(180,83,9,0.28) !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown .command-bar-footer, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-bar-footer { background: rgba(24,18,8,0.03) !important; border-top: 1px solid rgba(24,18,8,0.08) !important; color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-search-dropdown .command-bar-footer kbd, body.ls-active[data-site-theme="classic"] .topbar-search-dropdown .command-bar-footer kbd { background: rgba(24,18,8,0.06) !important; border: 1px solid rgba(24,18,8,0.12) !important; color: #4A4338 !important; } /* ── Topbar icon buttons (clock-in, gear, notifications, copilot) ──── */ body.ls-active[data-mode="light"] .topbar-icon-btn, body.ls-active[data-site-theme="classic"] .topbar-icon-btn { background: rgba(253,251,245,0.8) !important; border: 1px solid rgba(24,18,8,0.10) !important; color: #4A4338 !important; } body.ls-active[data-mode="light"] .topbar-icon-btn:hover, body.ls-active[data-site-theme="classic"] .topbar-icon-btn:hover { background: rgba(180,83,9,0.08) !important; border-color: rgba(180,83,9,0.28) !important; color: #B45309 !important; } body.ls-active[data-mode="light"] .topbar-notifications.open .topbar-icon-btn, body.ls-active[data-mode="light"] .topbar-user-menu.open .topbar-avatar-btn, body.ls-active[data-site-theme="classic"] .topbar-notifications.open .topbar-icon-btn, body.ls-active[data-site-theme="classic"] .topbar-user-menu.open .topbar-avatar-btn { background: rgba(180,83,9,0.12) !important; border-color: rgba(180,83,9,0.38) !important; color: #B45309 !important; } /* ── Topbar breadcrumb + subtitle text ─────────────────────────────── */ body.ls-active[data-mode="light"] .topbar-breadcrumb, body.ls-active[data-site-theme="classic"] .topbar-breadcrumb { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-breadcrumb a, body.ls-active[data-site-theme="classic"] .topbar-breadcrumb a { color: #4A4338 !important; } body.ls-active[data-mode="light"] .topbar-breadcrumb a:hover, body.ls-active[data-site-theme="classic"] .topbar-breadcrumb a:hover { color: #B45309 !important; } /* ── Notifications menu ────────────────────────────────────────────── */ body.ls-active[data-mode="light"] .topbar-notify-menu, body.ls-active[data-site-theme="classic"] .topbar-notify-menu { background: radial-gradient(120% 80% at 0% 0%, rgba(245,165,36,0.10) 0%, transparent 55%), linear-gradient(180deg, #FDFBF5 0%, #F6F2E7 100%) !important; border: 1px solid rgba(24,18,8,0.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 30px 80px -20px rgba(24,18,8,0.25), 0 0 0 1px rgba(180,83,9,0.04) !important; } body.ls-active[data-mode="light"] .topbar-notify-head, body.ls-active[data-mode="light"] .topbar-notify-tabs, body.ls-active[data-mode="light"] .topbar-notify-controls, body.ls-active[data-mode="light"] .topbar-notify-mutes, body.ls-active[data-site-theme="classic"] .topbar-notify-head, body.ls-active[data-site-theme="classic"] .topbar-notify-tabs, body.ls-active[data-site-theme="classic"] .topbar-notify-controls, body.ls-active[data-site-theme="classic"] .topbar-notify-mutes { border-bottom-color: rgba(24,18,8,0.08) !important; } body.ls-active[data-mode="light"] .topbar-notify-head strong, body.ls-active[data-site-theme="classic"] .topbar-notify-head strong { color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-notify-head .btn, body.ls-active[data-mode="light"] .topbar-notify-controls .btn, body.ls-active[data-site-theme="classic"] .topbar-notify-head .btn, body.ls-active[data-site-theme="classic"] .topbar-notify-controls .btn { background: rgba(24,18,8,0.04) !important; border: 1px solid rgba(24,18,8,0.10) !important; color: #4A4338 !important; } body.ls-active[data-mode="light"] .topbar-notify-head .btn:hover, body.ls-active[data-mode="light"] .topbar-notify-controls .btn:hover, body.ls-active[data-site-theme="classic"] .topbar-notify-head .btn:hover, body.ls-active[data-site-theme="classic"] .topbar-notify-controls .btn:hover { background: rgba(180,83,9,0.08) !important; border-color: rgba(180,83,9,0.28) !important; color: #B45309 !important; } body.ls-active[data-mode="light"] .topbar-notify-tab, body.ls-active[data-site-theme="classic"] .topbar-notify-tab { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-notify-tab:hover, body.ls-active[data-site-theme="classic"] .topbar-notify-tab:hover { color: #1A1812 !important; background: rgba(24,18,8,0.04) !important; border-color: rgba(24,18,8,0.08) !important; } body.ls-active[data-mode="light"] .topbar-notify-tab.active, body.ls-active[data-site-theme="classic"] .topbar-notify-tab.active { color: #B45309 !important; background: rgba(180,83,9,0.10) !important; border-color: rgba(180,83,9,0.32) !important; } body.ls-active[data-mode="light"] .topbar-notify-check, body.ls-active[data-site-theme="classic"] .topbar-notify-check { color: #4A4338 !important; } body.ls-active[data-mode="light"] .topbar-mute-chip, body.ls-active[data-site-theme="classic"] .topbar-mute-chip { color: #766D5E !important; background: rgba(24,18,8,0.03) !important; border-color: rgba(24,18,8,0.10) !important; } body.ls-active[data-mode="light"] .topbar-mute-chip:hover, body.ls-active[data-site-theme="classic"] .topbar-mute-chip:hover { color: #B45309 !important; background: rgba(180,83,9,0.08) !important; border-color: rgba(180,83,9,0.28) !important; } body.ls-active[data-mode="light"] .topbar-mute-chip.muted, body.ls-active[data-site-theme="classic"] .topbar-mute-chip.muted { color: #9B9281 !important; background: rgba(24,18,8,0.02) !important; } body.ls-active[data-mode="light"] .topbar-notify-item, body.ls-active[data-site-theme="classic"] .topbar-notify-item { background: rgba(253,251,245,0.6) !important; border-color: rgba(24,18,8,0.08) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-notify-item:hover, body.ls-active[data-site-theme="classic"] .topbar-notify-item:hover { background: rgba(180,83,9,0.06) !important; border-color: rgba(180,83,9,0.22) !important; } body.ls-active[data-mode="light"] .topbar-notify-item.is-read, body.ls-active[data-site-theme="classic"] .topbar-notify-item.is-read { opacity: 0.65; } body.ls-active[data-mode="light"] .topbar-notify-title, body.ls-active[data-site-theme="classic"] .topbar-notify-title { color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-notify-summary, body.ls-active[data-site-theme="classic"] .topbar-notify-summary { color: #4A4338 !important; } body.ls-active[data-mode="light"] .topbar-notify-detail, body.ls-active[data-mode="light"] .topbar-notify-meta, body.ls-active[data-site-theme="classic"] .topbar-notify-detail, body.ls-active[data-site-theme="classic"] .topbar-notify-meta { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-notify-empty, body.ls-active[data-site-theme="classic"] .topbar-notify-empty { color: #766D5E !important; } /* ── User avatar dropdown ──────────────────────────────────────────── */ body.ls-active[data-mode="light"] .topbar-user-dropdown, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown { background: linear-gradient(180deg, #FDFBF5 0%, #F6F2E7 100%) !important; border: 1px solid rgba(24,18,8,0.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 30px 80px -20px rgba(24,18,8,0.25) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-header, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-header { border-bottom: 1px solid rgba(24,18,8,0.08) !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-name, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-name { color: #1A1812 !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-role, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-role { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-divider, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-divider { background: rgba(24,18,8,0.08) !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-item, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-item { color: #4A4338 !important; background: transparent !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-item .material-symbols-outlined, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-item .material-symbols-outlined { color: #766D5E !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-item:hover, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-item:hover { background: rgba(180,83,9,0.08) !important; color: #92400E !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-item:hover .material-symbols-outlined, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-item:hover .material-symbols-outlined { color: #B45309 !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-item--danger, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-item--danger { color: #B91C1C !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-item--danger .material-symbols-outlined, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-item--danger .material-symbols-outlined { color: #B91C1C !important; } body.ls-active[data-mode="light"] .topbar-user-dropdown-item--danger:hover, body.ls-active[data-site-theme="classic"] .topbar-user-dropdown-item--danger:hover { background: rgba(185,28,28,0.08) !important; color: #991B1B !important; } body.ls-active[data-mode="light"] .topbar-avatar-btn, body.ls-active[data-site-theme="classic"] .topbar-avatar-btn { background: rgba(253,251,245,0.8) !important; border: 1px solid rgba(24,18,8,0.10) !important; } body.ls-active[data-mode="light"] .topbar-avatar-btn:hover, body.ls-active[data-site-theme="classic"] .topbar-avatar-btn:hover { border-color: rgba(180,83,9,0.32) !important; background: rgba(180,83,9,0.06) !important; } /* ── Modals + confirm dialogs ──────────────────────────────────────── */ body.ls-active[data-mode="light"] .modal-overlay, body.ls-active[data-site-theme="classic"] .modal-overlay { background: rgba(24,18,8,0.35) !important; backdrop-filter: blur(4px) !important; } body.ls-active[data-mode="light"] .modal, body.ls-active[data-mode="light"] .modal-box, body.ls-active[data-mode="light"] .modal .modal-box, body.ls-active[data-site-theme="classic"] .modal, body.ls-active[data-site-theme="classic"] .modal-box, body.ls-active[data-site-theme="classic"] .modal .modal-box { background: linear-gradient(180deg, #FDFBF5 0%, #F6F2E7 100%) !important; border: 1px solid rgba(24,18,8,0.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 40px 100px -20px rgba(24,18,8,0.35) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .modal h1, body.ls-active[data-mode="light"] .modal h2, body.ls-active[data-mode="light"] .modal h3, body.ls-active[data-mode="light"] .modal-title, body.ls-active[data-mode="light"] .modal-header, body.ls-active[data-site-theme="classic"] .modal h1, body.ls-active[data-site-theme="classic"] .modal h2, body.ls-active[data-site-theme="classic"] .modal h3, body.ls-active[data-site-theme="classic"] .modal-title, body.ls-active[data-site-theme="classic"] .modal-header { color: #1A1812 !important; } body.ls-active[data-mode="light"] .modal-footer, body.ls-active[data-site-theme="classic"] .modal-footer { border-top: 1px solid rgba(24,18,8,0.08) !important; } /* ── Toast / snackbar ──────────────────────────────────────────────── */ body.ls-active[data-mode="light"] .toast, body.ls-active[data-mode="light"] #toast, body.ls-active[data-site-theme="classic"] .toast, body.ls-active[data-site-theme="classic"] #toast { background: linear-gradient(180deg, #FDFBF5 0%, #F6F2E7 100%) !important; color: #1A1812 !important; border: 1px solid rgba(24,18,8,0.12) !important; box-shadow: 0 14px 40px rgba(24,18,8,0.18) !important; } /* ── Generic dropdowns / context menus ─────────────────────────────── */ body.ls-active[data-mode="light"] .dropdown-menu, body.ls-active[data-mode="light"] .context-menu, body.ls-active[data-mode="light"] [role="menu"], body.ls-active[data-mode="light"] [role="listbox"], body.ls-active[data-site-theme="classic"] .dropdown-menu, body.ls-active[data-site-theme="classic"] .context-menu, body.ls-active[data-site-theme="classic"] [role="menu"], body.ls-active[data-site-theme="classic"] [role="listbox"] { background: #FDFBF5 !important; border: 1px solid rgba(24,18,8,0.12) !important; box-shadow: 0 20px 50px rgba(24,18,8,0.16) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .dropdown-menu [role="menuitem"], body.ls-active[data-mode="light"] .context-menu [role="menuitem"], body.ls-active[data-site-theme="classic"] .dropdown-menu [role="menuitem"], body.ls-active[data-site-theme="classic"] .context-menu [role="menuitem"] { color: #4A4338 !important; } body.ls-active[data-mode="light"] .dropdown-menu [role="menuitem"]:hover, body.ls-active[data-mode="light"] .context-menu [role="menuitem"]:hover, body.ls-active[data-site-theme="classic"] .dropdown-menu [role="menuitem"]:hover, body.ls-active[data-site-theme="classic"] .context-menu [role="menuitem"]:hover { background: rgba(180,83,9,0.08) !important; color: #92400E !important; } /* ── Sidebar search field + quick settings popover ─────────────────── */ body.ls-active[data-mode="light"] .sidebar-search, body.ls-active[data-mode="light"] #sidebar input[type="search"], body.ls-active[data-site-theme="classic"] .sidebar-search, body.ls-active[data-site-theme="classic"] #sidebar input[type="search"] { background: rgba(253,251,245,0.9) !important; border: 1px solid rgba(24,18,8,0.12) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .sidebar-search::placeholder, body.ls-active[data-mode="light"] #sidebar input[type="search"]::placeholder, body.ls-active[data-site-theme="classic"] .sidebar-search::placeholder, body.ls-active[data-site-theme="classic"] #sidebar input[type="search"]::placeholder { color: #766D5E !important; } body.ls-active[data-mode="light"] .sidebar-footer, body.ls-active[data-mode="light"] .sidebar-user a[href*="logout"], body.ls-active[data-site-theme="classic"] .sidebar-footer, body.ls-active[data-site-theme="classic"] .sidebar-user a[href*="logout"] { color: #4A4338 !important; } /* Secondary hub sidebar (core.css:8222+ .hub-l2 family) used by PM, CRM etc. Covers: .hub-back, .hub-l2-header, .hub-l2-title, .hub-l2-desc, .hub-l2-module + its icon tile. All were authored with rgba(255,255,255,*) text which is invisible on Paper. */ body.ls-active[data-mode="light"] .hub-l2, body.ls-active[data-site-theme="classic"] .hub-l2 { background: transparent !important; } body.ls-active[data-mode="light"] .hub-back, body.ls-active[data-site-theme="classic"] .hub-back { background: rgba(24,18,8,0.03) !important; border: 1px solid rgba(24,18,8,0.10) !important; color: #4A4338 !important; } body.ls-active[data-mode="light"] .hub-back:hover, body.ls-active[data-site-theme="classic"] .hub-back:hover { background: rgba(180,83,9,0.08) !important; border-color: rgba(180,83,9,0.28) !important; color: #92400E !important; } /* Domain header card (amber glass) — lighten bg and warm-ink the text */ body.ls-active[data-mode="light"] .hub-l2-header, body.ls-active[data-site-theme="classic"] .hub-l2-header { background: linear-gradient(180deg, rgba(245,165,36,0.14), rgba(251,249,243,0.8)) !important; border-color: rgba(180,83,9,0.28) !important; } body.ls-active[data-mode="light"] .hub-l2-title, body.ls-active[data-site-theme="classic"] .hub-l2-title { color: #1A1812 !important; } body.ls-active[data-mode="light"] .hub-l2-desc, body.ls-active[data-site-theme="classic"] .hub-l2-desc { color: #766D5E !important; } /* Module rail items */ body.ls-active[data-mode="light"] .hub-l2-module, body.ls-active[data-site-theme="classic"] .hub-l2-module { color: #4A4338 !important; } body.ls-active[data-mode="light"] .hub-l2-module .material-symbols-outlined, body.ls-active[data-site-theme="classic"] .hub-l2-module .material-symbols-outlined { background: rgba(24,18,8,0.04) !important; border: 1px solid rgba(24,18,8,0.08) !important; color: #4A4338 !important; } body.ls-active[data-mode="light"] .hub-l2-module:hover, body.ls-active[data-site-theme="classic"] .hub-l2-module:hover { background: rgba(180,83,9,0.08) !important; color: #1A1812 !important; border-color: rgba(180,83,9,0.22) !important; } body.ls-active[data-mode="light"] .hub-l2-module:hover .material-symbols-outlined, body.ls-active[data-site-theme="classic"] .hub-l2-module:hover .material-symbols-outlined { color: #B45309 !important; background: rgba(180,83,9,0.12) !important; border-color: rgba(180,83,9,0.35) !important; } body.ls-active[data-mode="light"] .hub-l2-module.active, body.ls-active[data-site-theme="classic"] .hub-l2-module.active { background: linear-gradient(90deg, rgba(180,83,9,0.18), rgba(180,83,9,0.02) 80%) !important; color: #1A1812 !important; border-color: rgba(180,83,9,0.38) !important; } body.ls-active[data-mode="light"] .hub-l2-module.active .material-symbols-outlined, body.ls-active[data-site-theme="classic"] .hub-l2-module.active .material-symbols-outlined { color: #B45309 !important; background: rgba(180,83,9,0.18) !important; border-color: rgba(180,83,9,0.45) !important; } /* hub-card* variants used on the main hub grid */ body.ls-active[data-mode="light"] .hub-card-title, body.ls-active[data-site-theme="classic"] .hub-card-title { color: #1A1812 !important; } body.ls-active[data-mode="light"] .hub-card-desc, body.ls-active[data-site-theme="classic"] .hub-card-desc { color: #766D5E !important; } /* Blanket "no white text" guard for Paper. Any inline/author-level white text inside .content becomes warm ink so nothing is invisible on cream. Avoids affecting explicit dark surfaces (amber buttons, .ls-node, badges) which carry their own !important colors. */ body.ls-active[data-mode="light"] .content [style*="color: #fff"], body.ls-active[data-mode="light"] .content [style*="color:#fff"], body.ls-active[data-mode="light"] .content [style*="color: white"], body.ls-active[data-mode="light"] .content [style*="rgba(255,255,255"], body.ls-active[data-site-theme="classic"] .content [style*="color: #fff"], body.ls-active[data-site-theme="classic"] .content [style*="color:#fff"], body.ls-active[data-site-theme="classic"] .content [style*="color: white"], body.ls-active[data-site-theme="classic"] .content [style*="rgba(255,255,255"] { color: #1A1812 !important; } /* Dark hero / banner / strip surfaces: PM has a dark strip below the topology. Catch common patterns — bg-dark / bg-navy / rgb(8,9,12) / rgb(15,23,42). */ body.ls-active[data-mode="light"] .content [style*="background:#08090c"], body.ls-active[data-mode="light"] .content [style*="background: #08090c"], body.ls-active[data-mode="light"] .content [style*="background:rgb(8"], body.ls-active[data-mode="light"] .content [style*="background: rgb(8"], body.ls-active[data-mode="light"] .content [style*="rgba(15,23,42"], body.ls-active[data-site-theme="classic"] .content [style*="background:#08090c"], body.ls-active[data-site-theme="classic"] .content [style*="background: #08090c"], body.ls-active[data-site-theme="classic"] .content [style*="background:rgb(8"], body.ls-active[data-site-theme="classic"] .content [style*="background: rgb(8"], body.ls-active[data-site-theme="classic"] .content [style*="rgba(15,23,42"] { background: #FBF9F3 !important; color: #1A1812 !important; } /* Generic dark panels inside content — catch common .card / .panel / .section surfaces authored with dark rgba(15,23,42,*) / rgb(8,9,12) etc. */ body.ls-active[data-mode="light"] .content .card, body.ls-active[data-mode="light"] .content .panel, body.ls-active[data-mode="light"] .content .section-card, body.ls-active[data-site-theme="classic"] .content .card, body.ls-active[data-site-theme="classic"] .content .panel, body.ls-active[data-site-theme="classic"] .content .section-card { background: #FBF9F3 !important; border: 1px solid rgba(24,18,8,0.10) !important; color: #1A1812 !important; box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 2px 10px rgba(24,18,8,0.04) !important; } /* Generic table readability under Paper */ body.ls-active[data-mode="light"] .content table, body.ls-active[data-site-theme="classic"] .content table { color: #1A1812; } body.ls-active[data-mode="light"] .content table th, body.ls-active[data-site-theme="classic"] .content table th { background: rgba(24,18,8,0.04) !important; color: #4A4338 !important; border-bottom: 1px solid rgba(24,18,8,0.10) !important; } body.ls-active[data-mode="light"] .content table td, body.ls-active[data-site-theme="classic"] .content table td { border-bottom: 1px solid rgba(24,18,8,0.06) !important; } /* Generic form inputs under Paper */ body.ls-active[data-mode="light"] .content input[type="text"], body.ls-active[data-mode="light"] .content input[type="number"], body.ls-active[data-mode="light"] .content input[type="search"], body.ls-active[data-mode="light"] .content input[type="email"], body.ls-active[data-mode="light"] .content input[type="date"], body.ls-active[data-mode="light"] .content select, body.ls-active[data-mode="light"] .content textarea, body.ls-active[data-site-theme="classic"] .content input[type="text"], body.ls-active[data-site-theme="classic"] .content input[type="number"], body.ls-active[data-site-theme="classic"] .content input[type="search"], body.ls-active[data-site-theme="classic"] .content input[type="email"], body.ls-active[data-site-theme="classic"] .content input[type="date"], body.ls-active[data-site-theme="classic"] .content select, body.ls-active[data-site-theme="classic"] .content textarea { background: rgba(253,251,245,0.9) !important; border: 1px solid rgba(24,18,8,0.14) !important; color: #1A1812 !important; } body.ls-active[data-mode="light"] .content input:focus, body.ls-active[data-mode="light"] .content select:focus, body.ls-active[data-mode="light"] .content textarea:focus, body.ls-active[data-site-theme="classic"] .content input:focus, body.ls-active[data-site-theme="classic"] .content select:focus, body.ls-active[data-site-theme="classic"] .content textarea:focus { border-color: rgba(180,83,9,0.45) !important; box-shadow: 0 0 0 3px rgba(180,83,9,0.12) !important; outline: none !important; } /* ----------------------------------------------------------------------------- LS TOPOLOGY INTERNALS · PAPER gaps (2026-04-16) --------------------------------------------------------------------------- .ls-act node CTA buttons, CRM card inputs/buttons/tables, and any remaining white-alpha surfaces inside topology nodes. --------------------------------------------------------------------------- */ /* .ls-act buttons inside nodes — lines 476/489 use rgba(255,255,255,*) */ body[data-mode="light"] .ls-root .ls-node .ls-act, body[data-site-theme="classic"] .ls-root .ls-node .ls-act { background: rgba(24,18,8,0.04) !important; border-color: rgba(24,18,8,0.12) !important; } body[data-mode="light"] .ls-root .ls-node .ls-act:hover, body[data-mode="light"] .ls-root .ls-node .ls-act:focus-visible, body[data-site-theme="classic"] .ls-root .ls-node .ls-act:hover, body[data-site-theme="classic"] .ls-root .ls-node .ls-act:focus-visible { background: rgba(180,83,9,0.10) !important; border-color: rgba(180,83,9,0.28) !important; color: #92400E !important; } /* CRM card inputs — lines 3980/3999 use rgba(0,0,0,0.35/0.45) */ body[data-mode="light"] #section-crm .card input[type="text"], body[data-mode="light"] #section-crm .card input[type="search"], body[data-mode="light"] #section-crm .card input[type="number"], body[data-mode="light"] #section-crm .card input:not([type]), body[data-mode="light"] #section-crm .card select, body[data-mode="light"] #section-crm .card textarea, body[data-site-theme="classic"] #section-crm .card input[type="text"], body[data-site-theme="classic"] #section-crm .card input[type="search"], body[data-site-theme="classic"] #section-crm .card input[type="number"], body[data-site-theme="classic"] #section-crm .card input:not([type]), body[data-site-theme="classic"] #section-crm .card select, body[data-site-theme="classic"] #section-crm .card textarea { background: rgba(253,251,245,0.9) !important; border-color: rgba(24,18,8,0.14) !important; color: #1A1812 !important; } body[data-mode="light"] #section-crm .card input:focus, body[data-mode="light"] #section-crm .card select:focus, body[data-mode="light"] #section-crm .card textarea:focus, body[data-site-theme="classic"] #section-crm .card input:focus, body[data-site-theme="classic"] #section-crm .card select:focus, body[data-site-theme="classic"] #section-crm .card textarea:focus { background: #FDFBF5 !important; border-color: rgba(180,83,9,0.55) !important; box-shadow: 0 0 0 3px rgba(180,83,9,0.12) !important; } body[data-mode="light"] #section-crm .card select option, body[data-site-theme="classic"] #section-crm .card select option { background: #FDFBF5; color: #1A1812; } /* CRM buttons */ body[data-mode="light"] #section-crm .card .btn, body[data-mode="light"] #section-crm .card .btn-sm, body[data-mode="light"] #section-crm .card .btn-outline, body[data-site-theme="classic"] #section-crm .card .btn, body[data-site-theme="classic"] #section-crm .card .btn-sm, body[data-site-theme="classic"] #section-crm .card .btn-outline { background: rgba(24,18,8,0.04) !important; border-color: rgba(24,18,8,0.12) !important; color: #4A4338 !important; } body[data-mode="light"] #section-crm .card .btn:hover, body[data-mode="light"] #section-crm .card .btn-sm:hover, body[data-mode="light"] #section-crm .card .btn-outline:hover, body[data-site-theme="classic"] #section-crm .card .btn:hover, body[data-site-theme="classic"] #section-crm .card .btn-sm:hover, body[data-site-theme="classic"] #section-crm .card .btn-outline:hover { background: rgba(180,83,9,0.10) !important; border-color: rgba(180,83,9,0.28) !important; color: #92400E !important; } /* CRM table wrap */ body[data-mode="light"] #section-crm .card .table-wrap, body[data-site-theme="classic"] #section-crm .card .table-wrap { background: rgba(253,251,245,0.6) !important; } body[data-mode="light"] #section-crm .card .table-wrap thead th, body[data-site-theme="classic"] #section-crm .card .table-wrap thead th { background: rgba(24,18,8,0.04) !important; color: #4A4338 !important; border-bottom: 1px solid rgba(24,18,8,0.10) !important; } body[data-mode="light"] #section-crm .card .table-wrap tbody td, body[data-site-theme="classic"] #section-crm .card .table-wrap tbody td { color: #1A1812 !important; border-bottom: 1px solid rgba(24,18,8,0.06) !important; } /* ============================================================================= PROJECT MANAGEMENT TOPOLOGY · scoped .ls-pm variant (added 2026-04-13) ----------------------------------------------------------------------------- PM reuses every Living System primitive — only the node class names differ so each module keeps its own semantic vocabulary. Positions mirror the dashboard 3-row left/right grid (AP/FIN/AR | OPS/HR/CRM). AI tether stays in the bottom-center slot and inherits the base .n-ai rules. Mapping: n-pre = top-left (= n-ap slot) n-plan = middle-left (= n-fin slot) n-cost = bottom-left (= n-ar slot) n-field = top-right (= n-ops slot) n-team = middle-right (= n-hr slot) n-change = bottom-right (= n-crm slot) n-ai = bottom center (inherited) ============================================================================= */ .ls-root.ls-pm .ls-node.n-pre { top: 56px; left: 98px; } .ls-root.ls-pm .ls-node.n-plan { top: 284px; left: 24px; } .ls-root.ls-pm .ls-node.n-cost { top: 512px; left: 98px; } .ls-root.ls-pm .ls-node.n-field { top: 56px; right: 98px; } .ls-root.ls-pm .ls-node.n-team { top: 284px; right: 24px; } .ls-root.ls-pm .ls-node.n-change { top: 512px; right: 98px; } /* ============================================================================= CRM · Living System topology positions (2026-04-14) Mirrors PM's 3-row left/right grid with CRM-specific data-edge keys. n-leads = top-left · inbound leads n-pipe = middle-left · weighted pipeline n-signal = bottom-left · at-risk / cooling deals n-accts = top-right · accounts & contacts n-partners = middle-right · partner ecosystem n-wins = bottom-right · closed-won n-ai = bottom center (inherited) ============================================================================= */ .ls-root.ls-crm .ls-node.n-leads { top: 56px; left: 98px; } .ls-root.ls-crm .ls-node.n-pipe { top: 284px; left: 24px; } .ls-root.ls-crm .ls-node.n-signal { top: 512px; left: 98px; } .ls-root.ls-crm .ls-node.n-accts { top: 56px; right: 98px; } .ls-root.ls-crm .ls-node.n-partners { top: 284px; right: 24px; } .ls-root.ls-crm .ls-node.n-wins { top: 512px; right: 98px; } /* CRM canvas sizing — same in-tab adoption treatment as PM. */ .ls-root.ls-crm { min-height: auto; padding: 8px 18px 18px; } .ls-root.ls-crm .ls-wrap { min-height: 0; padding-bottom: 18px; gap: 12px; } .ls-root.ls-crm .ls-world { min-height: 680px; height: 680px; } .ls-root.ls-crm .ls-heart { top: 40px; } /* CRM chrome neutralization — drop the legacy dark-blue surround while the Living System overview is the top of the CRM page. Scoped so legacy cards below still render on their own backgrounds. NOTE: var(--ls-bg) resolves from :root (dark) because #main sits ABOVE .ls-root where the light-mode tokens are set. We use the hardcoded dark value as default and add explicit light-mode overrides below. */ #main:has(#section-crm .ls-root.ls-crm) { background: #08090C !important; } body[data-mode="light"] #main:has(#section-crm .ls-root.ls-crm), body[data-site-theme="classic"] #main:has(#section-crm .ls-root.ls-crm) { background: #F3F0E8 !important; } #section-crm:has(.ls-root.ls-crm) { background: var(--ls-bg); } body[data-mode="light"] #section-crm:has(.ls-root.ls-crm), body[data-site-theme="classic"] #section-crm:has(.ls-root.ls-crm) { background: #F3F0E8; } /* CRM polish — mirror PM's overview rules so the topline collapses, the brief sits at PM size, and drawer action buttons animate the same. */ .ls-root.ls-crm .ls-topline { display: none; } .ls-root.ls-crm .ls-brief { font-size: 22px; line-height: 1.25; max-width: 1080px; } .ls-root.ls-crm { padding-top: 2px; } .crm-ls-legacy-hooks { pointer-events: none; } .ls-root.ls-crm .is-clickable { cursor: pointer; } .ls-root.ls-crm .ls-heart.is-clickable .torus { transition: transform 0.3s ease; } .ls-root.ls-crm .ls-heart.is-clickable:hover .torus { transform: scale(1.015); } .ls-root.ls-crm .ls-heart .orbit span[data-edge].is-clickable:hover { transform: scale(1.35); filter: brightness(1.3); } .ls-root.ls-crm #crm-ls-tasklist .ls-task.is-clickable { transition: background 0.15s ease, transform 0.15s ease; } .ls-root.ls-crm #crm-ls-tasklist .ls-task.is-clickable:hover { background: rgba(255,179,0,0.06); transform: translateX(2px); } .ls-root.ls-crm #crm-ls-pulsebar .row.is-clickable { transition: background 0.15s ease; padding: 2px 4px; border-radius: 4px; margin: 0 -4px; } .ls-root.ls-crm #crm-ls-pulsebar .row.is-clickable:hover { background: rgba(255,255,255,0.04); } .ls-root.ls-crm .ls-detail-panel .dp-flag button.act.queued { opacity: 0.7; cursor: progress; border-color: rgba(167,139,250,0.5); color: #D3C4FF; } .ls-root.ls-crm .ls-detail-panel .dp-flag button.act.done { background: rgba(52,199,89,0.16); border-color: rgba(52,199,89,0.55); color: #B8F2C0; } /* PM chip colors are driven by colorAtScore(score) in pm_living.js — no per-module overrides, so each chip sits on the matching ring color. */ /* ----------------------------------------------------------------------------- CRM · PAPER (light) variant · 2026-04-16 --------------------------------------------------------------------------- Mirror the Finance (ls-fin) light-mode block for CRM topology. Covers brief, world, nodes, heart, flows, and pulse bar. Without these, the CRM topology floats on a washed-out background in light/classic mode. --------------------------------------------------------------------------- */ body[data-mode="light"] .ls-root.ls-crm .ls-brief, body[data-site-theme="classic"] .ls-root.ls-crm .ls-brief { color: #1A1812; } body[data-mode="light"] .ls-root.ls-crm .ls-brief em, body[data-site-theme="classic"] .ls-root.ls-crm .ls-brief em { color: #B45309; } body[data-mode="light"] .ls-root.ls-crm .ls-brief b, body[data-site-theme="classic"] .ls-root.ls-crm .ls-brief b { color: #92400E; } /* world + flows */ body[data-mode="light"] .ls-root.ls-crm .ls-world, body[data-site-theme="classic"] .ls-root.ls-crm .ls-world { background: radial-gradient(closest-side at 50% 50%, rgba(180,83,9,0.025), transparent 70%); } body[data-mode="light"] .ls-root.ls-crm .ls-flows, body[data-site-theme="classic"] .ls-root.ls-crm .ls-flows { color: rgba(180,83,9,0.18); } /* nodes */ body[data-mode="light"] .ls-root.ls-crm .ls-node, body[data-site-theme="classic"] .ls-root.ls-crm .ls-node { background: rgba(253,251,245,0.92); border-color: rgba(24,18,8,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 4px rgba(24,18,8,0.05), 0 10px 24px -8px rgba(24,18,8,0.14); backdrop-filter: blur(6px); } body[data-mode="light"] .ls-root.ls-crm .ls-node:hover, body[data-mode="light"] .ls-root.ls-crm .ls-node.is-focus, body[data-site-theme="classic"] .ls-root.ls-crm .ls-node:hover, body[data-site-theme="classic"] .ls-root.ls-crm .ls-node.is-focus { border-color: #B45309; box-shadow: 0 6px 22px -8px rgba(180,83,9,0.28); } body[data-mode="light"] .ls-root.ls-crm .ls-node-label, body[data-site-theme="classic"] .ls-root.ls-crm .ls-node-label { color: #766D5E; } body[data-mode="light"] .ls-root.ls-crm .ls-node-sub, body[data-site-theme="classic"] .ls-root.ls-crm .ls-node-sub { color: #766D5E; } body[data-mode="light"] .ls-root.ls-crm .ls-node.n-ai, body[data-site-theme="classic"] .ls-root.ls-crm .ls-node.n-ai { background: rgba(109,40,217,0.06); border-color: rgba(109,40,217,0.28); } body[data-mode="light"] .ls-root.ls-crm .ls-node.n-ai .ls-node-label, body[data-site-theme="classic"] .ls-root.ls-crm .ls-node.n-ai .ls-node-label { color: #6D28D9; } body[data-mode="light"] .ls-root.ls-crm .ls-node.n-ai .ls-node-score, body[data-site-theme="classic"] .ls-root.ls-crm .ls-node.n-ai .ls-node-score { color: #6D28D9; } /* heart (centre gauge) */ body[data-mode="light"] .ls-root.ls-crm .ls-heart, body[data-site-theme="classic"] .ls-root.ls-crm .ls-heart { filter: none; } body[data-mode="light"] .ls-root.ls-crm .ls-heart-ring, body[data-site-theme="classic"] .ls-root.ls-crm .ls-heart-ring { filter: saturate(0.85) brightness(1.05); } body[data-mode="light"] .ls-root.ls-crm .ls-heart-label, body[data-site-theme="classic"] .ls-root.ls-crm .ls-heart-label { color: #766D5E; } body[data-mode="light"] .ls-root.ls-crm .ls-heart-score, body[data-site-theme="classic"] .ls-root.ls-crm .ls-heart-score { color: #1A1812; } body[data-mode="light"] .ls-root.ls-crm .ls-heart-delta, body[data-site-theme="classic"] .ls-root.ls-crm .ls-heart-delta { color: #766D5E; } /* legend chips */ body[data-mode="light"] .ls-root.ls-crm .ls-legend-top .chip, body[data-site-theme="classic"] .ls-root.ls-crm .ls-legend-top .chip { color: #766D5E; background: rgba(24,18,8,0.03); border-color: rgba(24,18,8,0.08); } /* edge labels on flows */ body[data-mode="light"] .ls-root.ls-crm svg.ls-flows .edge-label, body[data-site-theme="classic"] .ls-root.ls-crm svg.ls-flows .edge-label { fill: #766D5E; } /* bottom strips */ body[data-mode="light"] .ls-root.ls-crm #crm-ls-pulsebar .row.is-clickable:hover, body[data-site-theme="classic"] .ls-root.ls-crm #crm-ls-pulsebar .row.is-clickable:hover { background: rgba(24,18,8,0.04); } body[data-mode="light"] .ls-root.ls-crm #crm-ls-tasklist .ls-task.is-clickable:hover, body[data-site-theme="classic"] .ls-root.ls-crm #crm-ls-tasklist .ls-task.is-clickable:hover { background: rgba(180,83,9,0.06); } /* PM topology sits inside a tab panel, not a full-page shell — let it flow naturally rather than pinning to viewport. (Dashboard is no-scroll; PM is inside the PM tab container and the rest of the tabs live below.) */ .ls-root.ls-pm { min-height: auto; padding: 8px 18px 18px; } .ls-root.ls-pm .ls-wrap { min-height: 0; padding-bottom: 18px; gap: 12px; } /* Dashboard sizes ls-world to fill a 100vh canvas; PM needs a deterministic height so the 3-row / top:512px grid always has room and centered alignment doesn't drift with viewport height. */ .ls-root.ls-pm .ls-world { min-height: 680px; height: 680px; } /* Nudge the heart up a hair so the 3-row node grid reads as balanced around it (nodes span 56 → 640, center ≈ 348; heart top 40 + 420/2 = 250). */ .ls-root.ls-pm .ls-heart { top: 40px; } /* ----------------------------------------------------------------------------- PM CHROME NEUTRALIZATION · kill the legacy dark-blue #060C1B #main background around the Living System canvas. PM overview is in-tab adoption (no body.ls-active), so we scope overrides to the PM section itself. Using :has() so the override only fires while the Overview tab is active; other PM tabs keep their existing chrome untouched. Falls back gracefully on older browsers — they'll just see the legacy dark blue. --------------------------------------------------------------------------- */ #main:has(#section-project_management #tab-pm-overview.active) { background: var(--ls-bg) !important; } #section-project_management:has(#tab-pm-overview.active), #section-project_management:has(#tab-pm-overview.active) .pm2-container { background: var(--ls-bg); } #section-project_management:has(#tab-pm-overview.active) .pm2-header { border-bottom-color: var(--ls-line); } #section-project_management #tab-pm-overview { padding: 0; } /* ----------------------------------------------------------------------------- PM OVERVIEW · COMPACT TOP CHROME The filter row + sub-breadcrumb + tab nav were eating ~140px of vertical real estate above the topology. Collapse them into a single dense strip so the Living System canvas gets the room it needs. --------------------------------------------------------------------------- */ #section-project_management:has(#tab-pm-overview.active) .pm2-container { gap: 0; padding: 0; } #section-project_management:has(#tab-pm-overview.active) .pm2-header { padding: 10px 0 8px; border-bottom: none; } #section-project_management:has(#tab-pm-overview.active) .pm2-header .pm2-select { font-size: 12.5px; padding: 6px 10px; } #section-project_management:has(#tab-pm-overview.active) .pm2-tab-nav { padding: 4px 0 0; border-bottom: 1px solid var(--ls-line); gap: 2px; } #section-project_management:has(#tab-pm-overview.active) .pm2-tab-pill { padding: 6px 12px; font-size: 12px; } /* Sub-breadcrumb is redundant with the tab row — hide on overview */ #section-project_management:has(#tab-pm-overview.active) #pmbc-bar { display: none; } /* The `.ls-topline` eyebrow ("Project topology · live site telemetry") is redundant with the active Overview tab pill — trim to save another row. */ .ls-root.ls-pm .ls-topline { display: none; } .ls-root.ls-pm .ls-brief { font-size: 22px; line-height: 1.25; max-width: 1080px; } .ls-root.ls-pm { padding-top: 2px; } /* Hide the zombie legacy hero cards / table skeleton so they can't steal focus */ .pm-ls-legacy-hooks { pointer-events: none; } /* Every actionable element gets a subtle cursor + hover lift */ .ls-root.ls-pm .is-clickable { cursor: pointer; } .ls-root.ls-pm .ls-heart.is-clickable .torus { transition: transform 0.3s ease; } .ls-root.ls-pm .ls-heart.is-clickable:hover .torus { transform: scale(1.015); } .ls-root.ls-pm .ls-heart.is-clickable:focus-visible { outline: 2px solid rgba(255,179,0,0.6); outline-offset: 8px; border-radius: 999px; } .ls-root.ls-pm .ls-heart .orbit span[data-edge].is-clickable:hover { transform: scale(1.35); filter: brightness(1.3); } .ls-root.ls-pm #pm-ls-tasklist .ls-task.is-clickable { transition: background 0.15s ease, transform 0.15s ease; } .ls-root.ls-pm #pm-ls-tasklist .ls-task.is-clickable:hover { background: rgba(255,179,0,0.06); transform: translateX(2px); } .ls-root.ls-pm #pm-ls-pulsebar .row.is-clickable { transition: background 0.15s ease; padding: 2px 4px; border-radius: 4px; margin: 0 -4px; } .ls-root.ls-pm #pm-ls-pulsebar .row.is-clickable:hover { background: rgba(255,255,255,0.04); } .ls-root.ls-pm .ls-legend-top .chip.is-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ls-root.ls-pm .ls-legend-top .chip.is-clickable:hover { background: rgba(255,255,255,0.04); } .ls-root.ls-pm .ls-legend-top .chip.is-active { background: rgba(255,179,0,0.10); border-color: rgba(255,179,0,0.55); color: var(--ls-text, #E6E1D6); } .ls-root.ls-pm .ls-zoom .z.is-clickable { cursor: pointer; transition: background 0.15s; } .ls-root.ls-pm .ls-zoom .z.is-clickable:hover { background: rgba(255,255,255,0.08); } /* Legend filter modes — dim the non-matching slice of the topology */ .ls-root.ls-pm .ls-world.filter-hot .ls-node:not(.hot), .ls-root.ls-pm .ls-world.filter-hot .edge-group:not([data-edge="cost"]):not([data-edge="change"]) { opacity: 0.25; transition: opacity 0.25s ease; } .ls-root.ls-pm .ls-world.filter-ok .ls-node.hot, .ls-root.ls-pm .ls-world.filter-ok .ls-node.warn, .ls-root.ls-pm .ls-world.filter-ok .edge-group[data-edge="cost"], .ls-root.ls-pm .ls-world.filter-ok .edge-group[data-edge="change"], .ls-root.ls-pm .ls-world.filter-ok .edge-group[data-edge="plan"] { opacity: 0.25; transition: opacity 0.25s ease; } .ls-root.ls-pm .ls-world.filter-flow .ls-node { opacity: 0.55; } .ls-root.ls-pm .ls-world.filter-flow .edge-group { opacity: 1; } .ls-root.ls-pm .ls-world { transition: transform 0.25s ease; } /* Drawer action-button states (queued → done) — PM catch-all feedback */ .ls-root.ls-pm .ls-detail-panel .dp-flag button.act.queued { opacity: 0.7; cursor: progress; border-color: rgba(167,139,250,0.5); color: #D3C4FF; } .ls-root.ls-pm .ls-detail-panel .dp-flag button.act.done { background: rgba(52,199,89,0.16); border-color: rgba(52,199,89,0.55); color: #B8F2C0; } /* =========================================================================== * Online Retail Living System — in-tab scoping (2026-04-14) * --------------------------------------------------------------------------- * Same topology contract as .ls-pm; six domain nodes (3 left / 3 right) + * SPINIQ tether + toroidal heart. Lives inside #tab-or-overview so we do * NOT toggle body.ls-active — the scoping is handled here. * ===========================================================================*/ .ls-root.ls-or .ls-node.n-orders { top: 56px; left: 98px; } .ls-root.ls-or .ls-node.n-inventory { top: 284px; left: 24px; } .ls-root.ls-or .ls-node.n-returns { top: 512px; left: 98px; } .ls-root.ls-or .ls-node.n-fulfill { top: 56px; right: 98px; } .ls-root.ls-or .ls-node.n-channels { top: 284px; right: 24px; } .ls-root.ls-or .ls-node.n-customers { top: 512px; right: 98px; } .ls-root.ls-or { min-height: auto; padding: 8px 18px 18px; } .ls-root.ls-or .ls-wrap { max-width: 1400px; margin: 0 auto; padding: 0; } .ls-root.ls-or .ls-world { min-height: 680px; height: 680px; } .ls-root.ls-or .ls-heart { top: 40px; } .ls-root.ls-or .ls-topline { display: none; } .ls-root.ls-or .ls-brief { font-size: 22px; line-height: 1.25; max-width: 1080px; } .ls-root.ls-or .is-clickable { cursor: pointer; } .ls-root.ls-or .ls-heart.is-clickable .torus { transition: transform 0.3s ease; } .ls-root.ls-or .ls-heart.is-clickable:hover .torus { transform: scale(1.015); } .ls-root.ls-or .ls-heart.is-clickable:focus-visible { outline: 2px solid rgba(255,179,0,0.6); outline-offset: 8px; border-radius: 999px; } .ls-root.ls-or .ls-heart .orbit span[data-edge].is-clickable:hover { transform: scale(1.35); filter: brightness(1.3); } .ls-root.ls-or .ls-legend-top .chip.is-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ls-root.ls-or .ls-legend-top .chip.is-clickable:hover { background: rgba(255,255,255,0.04); } .ls-root.ls-or .ls-zoom .z.is-clickable { cursor: pointer; transition: background 0.15s; } .ls-root.ls-or .ls-zoom .z.is-clickable:hover { background: rgba(255,255,255,0.08); } /* Drawer action-button states (queued → done) — OR catch-all feedback */ .ls-root.ls-or .ls-detail-panel .dp-flag button.act.queued { opacity: 0.7; cursor: progress; border-color: rgba(167,139,250,0.5); color: #D3C4FF; } .ls-root.ls-or .ls-detail-panel .dp-flag button.act.done { background: rgba(52,199,89,0.16); border-color: rgba(52,199,89,0.55); color: #B8F2C0; } /* Neutralize ERP chrome when OR Overview tab is the active panel — keeps * the topology on its black canvas without forcing body.ls-active. */ #main:has(#tab-or-overview.active #or-living-root), .erp-main:has(#tab-or-overview.active #or-living-root) { background: var(--ls-bg, #0a0a0a) !important; } /* =========================================================================== * LS-lite primitives — used by the non-topology OR sub-tabs (WMS, Inventory, * Returns, Channels) to carry the Living System aesthetic without the full * topology canvas. Scoped globally per project_ls_lite_primitives. * ===========================================================================*/ .ls-lite-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 12px 14px; margin: 6px 0 14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; } .ls-lite-kpi { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); transition: background 0.15s, border-color 0.15s; } .ls-lite-kpi:hover { background: rgba(255,179,0,0.04); border-color: rgba(255,179,0,0.2); } .ls-lite-kpi .label { font: 500 10px/1 'Geist Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(230,225,214,0.55); } .ls-lite-kpi .val { font: 600 20px/1.1 'Geist', sans-serif; color: #E6E1D6; letter-spacing: -0.01em; } .ls-lite-kpi .val em { font-style: normal; font-size: 13px; color: rgba(230,225,214,0.55); margin-left: 4px; } .ls-lite-kpi.hot .val { color: #FCA5A5; } .ls-lite-kpi.warn .val { color: #FFC560; } .ls-lite-kpi.ok .val { color: #86F1E1; } .ls-lite-kpi.ai .val { color: #D3C4FF; } .ls-lite-kpi .sub { font: 400 11px/1.2 'Geist Mono', monospace; color: rgba(230,225,214,0.45); } /* ============================================================================ * .ls-root.ls-fin · Finance Overview (2026-04-14) * ---------------------------------------------------------------------------- * Finance Living System surface lives inside the #fin-tab-overview tab of * pages/finance.html. In-tab adoption (does NOT toggle body.ls-active) — * matches PM pattern, not full-page Dashboard pattern. * * This block provides: (1) node positions on the orbital ring, (2) topline * meta row styling, (3) sub-primitive shims for the simpler heart/drawer/ * pulsebar schema this first cut uses. Follow-up pass will converge Finance * onto the full canonical primitive set (torus heart + flow edges + packets) * mirroring dashboard.html / project_management.html reference markup. * ========================================================================== */ .ls-root.ls-fin { --ls-node-accent: var(--ls-ink, #E6E1D6); --ls-heart-accent: var(--ls-teal, #2DD4BF); position: relative; padding: 20px 12px 8px; background: radial-gradient(1200px 600px at 50% 0%, rgba(255,179,0,0.05), transparent 60%), radial-gradient(900px 540px at 50% 100%, rgba(211,196,255,0.04), transparent 55%), #0D0D0D; border-radius: 12px; font-family: 'Inter', system-ui, sans-serif; color: var(--ls-ink, #E6E1D6); } .ls-root.ls-fin .ls-wrap { position: relative; max-width: 1400px; margin: 0 auto; } /* ---- topline --------------------------------------------------------- */ .ls-root.ls-fin .ls-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 10px 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 18px; } .ls-root.ls-fin .ls-brief { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.35; max-width: 820px; color: #EFE9DB; letter-spacing: -0.01em; } .ls-root.ls-fin .ls-brief em { font-style: normal; color: #FFB300; font-weight: 500; } .ls-root.ls-fin .ls-brief b { color: #FFFFFF; font-weight: 600; } .ls-root.ls-fin .ls-topline-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ls-root.ls-fin .ls-pill { padding: 5px 10px; font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(230,225,214,0.82); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; } .ls-root.ls-fin .ls-pill.ls-pill-ai { color: #D3C4FF; border-color: rgba(211,196,255,0.32); background: rgba(211,196,255,0.06); } .ls-root.ls-fin .ls-clock { font: 500 12px/1 'Geist Mono', ui-monospace, monospace; color: rgba(230,225,214,0.55); letter-spacing: 0.08em; padding-left: 4px; } /* ---- world + node positions ----------------------------------------- */ .ls-root.ls-fin .ls-world { position: relative; height: 620px; border-radius: 16px; overflow: hidden; background: radial-gradient(closest-side at 50% 50%, rgba(255,179,0,0.03), transparent 70%); } .ls-root.ls-fin .ls-flows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: rgba(255,179,0,0.22); } .ls-root.ls-fin .ls-node { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 112px; padding: 10px 14px; background: rgba(22,22,22,0.82); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; color: var(--ls-node-accent); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; backdrop-filter: blur(6px); } /* Finance-specific node positions — accommodates taller cards with action chips and the expanded 620px world height. */ .ls-root.ls-fin .ls-node.n-ap { top: 32px; left: 72px; } .ls-root.ls-fin .ls-node.n-fin { top: 260px; left: 12px; } .ls-root.ls-fin .ls-node.n-ar { top: 470px; left: 72px; } .ls-root.ls-fin .ls-node.n-ops { top: 32px; right: 72px; } .ls-root.ls-fin .ls-node.n-hr { top: 260px; right: 12px; } .ls-root.ls-fin .ls-node.n-crm { top: 470px; right: 72px; } .ls-root.ls-fin .ls-node:hover, .ls-root.ls-fin .ls-node.is-focus { transform: translateY(-1px); border-color: var(--ls-node-accent); box-shadow: 0 6px 22px -8px var(--ls-node-accent); } .ls-root.ls-fin .ls-world.focused .ls-node:not(.is-focus) { opacity: 0.38; } .ls-root.ls-fin .ls-node-label { font: 600 10px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(230,225,214,0.72); } .ls-root.ls-fin .ls-node-score { font: 500 26px/1 'Fraunces', Georgia, serif; color: var(--ls-node-accent); letter-spacing: -0.02em; } .ls-root.ls-fin .ls-node-sub { font: 400 11px/1.2 'Inter', system-ui, sans-serif; color: rgba(230,225,214,0.55); } .ls-root.ls-fin .ls-node.n-ai { background: rgba(34,22,48,0.8); border-color: rgba(211,196,255,0.38); transform: translateX(-50%); } .ls-root.ls-fin .ls-node.n-ai .ls-node-label { color: #D3C4FF; } .ls-root.ls-fin .ls-node.n-ai .ls-node-score { color: #D3C4FF; } /* ---- composite heart ------------------------------------------------ */ .ls-root.ls-fin .ls-heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 340px; height: 340px; pointer-events: none; } .ls-root.ls-fin .ls-heart-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ls-heart-accent); box-shadow: 0 0 40px -10px var(--ls-heart-accent), inset 0 0 24px -8px var(--ls-heart-accent); opacity: 0.75; animation: lsFinHeartPulse 4.2s ease-in-out infinite; } @keyframes lsFinHeartPulse { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.015); opacity: 0.95; } } .ls-root.ls-fin .ls-heart-core { position: relative; text-align: center; z-index: 2; } .ls-root.ls-fin .ls-heart-label { font: 600 10px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(230,225,214,0.5); margin-bottom: 6px; } .ls-root.ls-fin .ls-heart-score { font: 500 56px/1 'Fraunces', Georgia, serif; color: var(--ls-heart-accent); letter-spacing: -0.03em; text-shadow: 0 0 30px color-mix(in srgb, var(--ls-heart-accent) 60%, transparent); } .ls-root.ls-fin .ls-heart-delta { margin-top: 6px; font: 400 11px/1 'Geist Mono', ui-monospace, monospace; color: rgba(45,212,191,0.82); letter-spacing: 0.04em; } /* ---- drawers (shim schema) ------------------------------------------ */ .ls-root.ls-fin .ls-detail-panel { position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(420px, 44%); padding: 0; background: rgba(18,18,18,0.96); border: 1px solid rgba(255,255,255,0.09); border-left-width: 3px; border-radius: 12px; backdrop-filter: blur(12px); box-shadow: -20px 0 40px -20px rgba(0,0,0,0.6); transform: translateX(12px); opacity: 0; transition: transform .26s cubic-bezier(.2,.9,.3,1), opacity .26s ease; pointer-events: none; z-index: 5; display: flex; flex-direction: column; overflow: hidden; } .ls-root.ls-fin .ls-detail-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; } .ls-root.ls-fin .ls-detail-panel[hidden] { display: none; } .ls-root.ls-fin .ls-detail-panel.hot { border-left-color: #F87171; } .ls-root.ls-fin .ls-detail-panel.warn { border-left-color: #F5A524; } .ls-root.ls-fin .ls-detail-panel.ok { border-left-color: #2DD4BF; } .ls-root.ls-fin .ls-detail-panel.violet { border-left-color: #D3C4FF; } .ls-root .ls-dp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); } .ls-root .ls-dp-head h3 { margin: 0; font: 500 16px/1.2 'Fraunces', Georgia, serif; color: #EFE9DB; letter-spacing: -0.01em; } .ls-root .ls-dp-close { background: transparent; border: 0; color: rgba(230,225,214,0.55); cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 6px; transition: background .15s, color .15s; } .ls-root .ls-dp-close:hover { background: rgba(255,255,255,0.06); color: #EFE9DB; } .ls-root .ls-dp-body { padding: 14px 16px 18px; overflow-y: auto; flex: 1 1 auto; } .ls-root .ls-dp-kpi { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); } .ls-root .ls-dp-kpi:last-of-type { border-bottom: 0; } .ls-root .ls-dp-kpi span { font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(230,225,214,0.55); } .ls-root .ls-dp-kpi b { font: 500 18px/1 'Fraunces', Georgia, serif; color: #EFE9DB; letter-spacing: -0.01em; } .ls-root .ls-dp-kpi b.danger { color: #F87171; } .ls-root .ls-dp-kpi b.success { color: #2DD4BF; } .ls-root .ls-dp-note { margin: 12px 0 16px; padding: 10px 12px; font: 400 13px/1.5 'Inter', system-ui, sans-serif; color: rgba(230,225,214,0.78); background: rgba(255,255,255,0.03); border-left: 2px solid rgba(255,179,0,0.6); border-radius: 0 6px 6px 0; } .ls-root .ls-dp-note em { font-style: normal; color: #FFB300; } .ls-root .ls-dp-note b { color: #EFE9DB; } .ls-root .ls-dp-cta { margin-top: 4px; padding: 9px 14px; background: linear-gradient(180deg, #FFB300, #DB8E00); color: #121212; border: 0; border-radius: 8px; font: 600 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; transition: filter .15s, transform .15s; } .ls-root .ls-dp-cta:hover { filter: brightness(1.08); transform: translateY(-1px); } .ls-root .ls-dp-list { list-style: none; margin: 0; padding: 0; } .ls-root .ls-dp-list li { padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); font: 400 13px/1.45 'Inter', system-ui, sans-serif; color: rgba(230,225,214,0.85); display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .ls-root .ls-dp-list li:last-child { border-bottom: 0; } .ls-root .ls-dp-list b { color: #EFE9DB; font-weight: 600; } /* Secondary CTA — outlined, pairs with primary amber CTA */ .ls-root .ls-dp-cta.ls-dp-cta-secondary { margin-top: 6px; background: transparent; color: rgba(230,225,214,0.82); border: 1px solid rgba(255,255,255,0.12); font-weight: 500; } .ls-root .ls-dp-cta.ls-dp-cta-secondary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); filter: none; } /* SPINIQ AI hint — subtle inline suggestion */ .ls-root .ls-dp-ai-hint { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 14px; padding: 10px 12px; font: 400 12.5px/1.45 'Inter', system-ui, sans-serif; color: rgba(211,196,255,0.85); background: rgba(167,139,250,0.06); border-left: 2px solid rgba(167,139,250,0.55); border-radius: 0 6px 6px 0; } .ls-root .ls-dp-ai-hint b { color: #D3C4FF; font-weight: 600; } .ls-root .ls-dp-ai-dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #A78BFA; box-shadow: 0 0 8px rgba(167,139,250,0.6); animation: lsAiDotPulse 2s ease-in-out infinite; } @keyframes lsAiDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* SPINIQ diagnostic flags */ .ls-root .spiniq-flag { display: flex; flex-direction: column; gap: 4px; } .ls-root .spiniq-action { display: block; font-size: 11px; font-weight: 400; opacity: 0.7; color: #D3C4FF; padding-left: 20px; line-height: 1.4; } .ls-root .spiniq-hot b { color: #FF8A80; } .ls-root .spiniq-warn b { color: #FFD54F; } .ls-root .spiniq-info b { color: #90CAF9; } .ls-root .spiniq-ok b { color: #A5D6A7; } .ls-root .ls-dp-mini { flex: 0 0 auto; padding: 4px 10px; font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: #D3C4FF; background: rgba(211,196,255,0.08); border: 1px solid rgba(211,196,255,0.32); border-radius: 999px; cursor: pointer; transition: background .15s; } .ls-root .ls-dp-mini:hover { background: rgba(211,196,255,0.18); } /* ---- bottombar ------------------------------------------------------- */ .ls-root.ls-fin .ls-bottombar { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 14px; margin-top: 18px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.06); } .ls-root.ls-fin .ls-brief-out h4 { margin: 0 0 8px; font: 600 10px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(211,196,255,0.8); } .ls-root.ls-fin .ls-brief-out p { margin: 0; font: 400 13px/1.5 'Inter', system-ui, sans-serif; color: rgba(230,225,214,0.85); } .ls-root.ls-fin .ls-brief-out p em { font-style: normal; color: #FFB300; } .ls-root.ls-fin .ls-brief-out p b { color: #EFE9DB; } .ls-root.ls-fin .ls-decisions { margin: 0; padding: 0 0 0 18px; list-style: decimal; font: 400 13px/1.6 'Inter', system-ui, sans-serif; color: rgba(230,225,214,0.9); } .ls-root.ls-fin .ls-pulsebar { display: grid; gap: 5px; } .ls-root.ls-fin .ls-pulse-row { display: grid; grid-template-columns: 68px 1fr; gap: 10px; align-items: center; font: 500 11px/1 'Geist Mono', ui-monospace, monospace; color: rgba(230,225,214,0.7); } .ls-root.ls-fin .ls-pulse-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; --ls-pulse-fill: 0%; --ls-pulse-color: #2DD4BF; } .ls-root.ls-fin .ls-pulse-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--ls-pulse-fill); background: var(--ls-pulse-color); border-radius: 3px; transition: width .5s ease, background .3s ease; } /* ---- danger/success helpers used in drawers ------------------------- */ .ls-root.ls-fin .danger { color: #F87171; } .ls-root.ls-fin .success { color: #2DD4BF; } /* ----------------------------------------------------------------------------- LS-FIN · PAPER / LIGHT-MODE overrides (2026-04-16) --------------------------------------------------------------------------- The dark-mode block above hardcodes #0D0D0D backgrounds, rgba(255,255,255,…) borders, and light-cream text. This section flips every one of those to the warm-paper palette so Finance respects the user's theme choice. --------------------------------------------------------------------------- */ html[data-site-theme="classic"] .ls-root.ls-fin, body[data-site-theme="classic"] .ls-root.ls-fin, html[data-mode="light"] .ls-root.ls-fin, body[data-mode="light"] .ls-root.ls-fin { --ls-node-accent: var(--ls-ink, #1A1812); --ls-heart-accent: #047857; /* burnt-green, legible on paper */ background: radial-gradient(1200px 600px at 50% 0%, rgba(180,83,9,0.045), transparent 60%), radial-gradient(900px 540px at 50% 100%, rgba(109,40,217,0.03), transparent 55%), #F3F0E8; color: var(--ls-ink, #1A1812); } /* topline */ html[data-site-theme="classic"] .ls-root.ls-fin .ls-topline, body[data-mode="light"] .ls-root.ls-fin .ls-topline, body[data-site-theme="classic"] .ls-root.ls-fin .ls-topline { border-bottom-color: rgba(24,18,8,0.08); } body[data-mode="light"] .ls-root.ls-fin .ls-brief, body[data-site-theme="classic"] .ls-root.ls-fin .ls-brief { color: #1A1812; } body[data-mode="light"] .ls-root.ls-fin .ls-brief em, body[data-site-theme="classic"] .ls-root.ls-fin .ls-brief em { color: #B45309; } body[data-mode="light"] .ls-root.ls-fin .ls-brief b, body[data-site-theme="classic"] .ls-root.ls-fin .ls-brief b { color: #1A1812; } body[data-mode="light"] .ls-root.ls-fin .ls-pill, body[data-site-theme="classic"] .ls-root.ls-fin .ls-pill { color: #4A4338; background: rgba(24,18,8,0.035); border-color: rgba(24,18,8,0.12); } body[data-mode="light"] .ls-root.ls-fin .ls-pill.ls-pill-ai, body[data-site-theme="classic"] .ls-root.ls-fin .ls-pill.ls-pill-ai { color: #6D28D9; border-color: rgba(109,40,217,0.28); background: rgba(109,40,217,0.06); } body[data-mode="light"] .ls-root.ls-fin .ls-clock, body[data-site-theme="classic"] .ls-root.ls-fin .ls-clock { color: #766D5E; } /* world + flows */ body[data-mode="light"] .ls-root.ls-fin .ls-world, body[data-site-theme="classic"] .ls-root.ls-fin .ls-world { background: radial-gradient(closest-side at 50% 50%, rgba(180,83,9,0.025), transparent 70%); } body[data-mode="light"] .ls-root.ls-fin .ls-flows, body[data-site-theme="classic"] .ls-root.ls-fin .ls-flows { color: rgba(180,83,9,0.18); } /* nodes */ body[data-mode="light"] .ls-root.ls-fin .ls-node, body[data-site-theme="classic"] .ls-root.ls-fin .ls-node { background: rgba(253,251,245,0.92); border-color: rgba(24,18,8,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 4px rgba(24,18,8,0.05), 0 10px 24px -8px rgba(24,18,8,0.14); backdrop-filter: blur(6px); } body[data-mode="light"] .ls-root.ls-fin .ls-node:hover, body[data-mode="light"] .ls-root.ls-fin .ls-node.is-focus, body[data-site-theme="classic"] .ls-root.ls-fin .ls-node:hover, body[data-site-theme="classic"] .ls-root.ls-fin .ls-node.is-focus { border-color: #B45309; box-shadow: 0 6px 22px -8px rgba(180,83,9,0.28); } body[data-mode="light"] .ls-root.ls-fin .ls-node-label, body[data-site-theme="classic"] .ls-root.ls-fin .ls-node-label { color: #766D5E; } body[data-mode="light"] .ls-root.ls-fin .ls-node-sub, body[data-site-theme="classic"] .ls-root.ls-fin .ls-node-sub { color: #766D5E; } body[data-mode="light"] .ls-root.ls-fin .ls-node.n-ai, body[data-site-theme="classic"] .ls-root.ls-fin .ls-node.n-ai { background: rgba(109,40,217,0.06); border-color: rgba(109,40,217,0.28); } body[data-mode="light"] .ls-root.ls-fin .ls-node.n-ai .ls-node-label, body[data-site-theme="classic"] .ls-root.ls-fin .ls-node.n-ai .ls-node-label { color: #6D28D9; } body[data-mode="light"] .ls-root.ls-fin .ls-node.n-ai .ls-node-score, body[data-site-theme="classic"] .ls-root.ls-fin .ls-node.n-ai .ls-node-score { color: #6D28D9; } /* heart (centre gauge) — canonical torus handles its own backgrounds */ body[data-mode="light"] .ls-root.ls-fin .ls-heart-ring, body[data-site-theme="classic"] .ls-root.ls-fin .ls-heart-ring { border-color: var(--ls-heart-accent); box-shadow: 0 0 40px -10px var(--ls-heart-accent), inset 0 0 24px -8px var(--ls-heart-accent); } body[data-mode="light"] .ls-root.ls-fin .ls-heart-label, body[data-site-theme="classic"] .ls-root.ls-fin .ls-heart-label { color: #766D5E; } body[data-mode="light"] .ls-root.ls-fin .ls-heart-score, body[data-site-theme="classic"] .ls-root.ls-fin .ls-heart-score { text-shadow: 0 0 30px color-mix(in srgb, var(--ls-heart-accent) 40%, transparent); } body[data-mode="light"] .ls-root.ls-fin .ls-heart-delta, body[data-site-theme="classic"] .ls-root.ls-fin .ls-heart-delta { color: #047857; } /* detail drawer (ls-dp-* classes) */ body[data-mode="light"] .ls-root.ls-fin .ls-detail-panel, body[data-site-theme="classic"] .ls-root.ls-fin .ls-detail-panel { background: rgba(253,251,245,0.97); border-color: rgba(24,18,8,0.12); box-shadow: -20px 0 40px -20px rgba(24,18,8,0.18); } body[data-mode="light"] .ls-root .ls-dp-head, body[data-site-theme="classic"] .ls-root .ls-dp-head { border-bottom-color: rgba(24,18,8,0.08); } body[data-mode="light"] .ls-root .ls-dp-head h3, body[data-site-theme="classic"] .ls-root .ls-dp-head h3 { color: #1A1812; } body[data-mode="light"] .ls-root .ls-dp-close, body[data-site-theme="classic"] .ls-root .ls-dp-close { color: #766D5E; } body[data-mode="light"] .ls-root .ls-dp-close:hover, body[data-site-theme="classic"] .ls-root .ls-dp-close:hover { background: rgba(180,83,9,0.08); color: #92400E; } body[data-mode="light"] .ls-root .ls-dp-kpi, body[data-site-theme="classic"] .ls-root .ls-dp-kpi { border-bottom-color: rgba(24,18,8,0.08); } body[data-mode="light"] .ls-root .ls-dp-kpi span, body[data-site-theme="classic"] .ls-root .ls-dp-kpi span { color: #766D5E; } body[data-mode="light"] .ls-root .ls-dp-kpi b, body[data-site-theme="classic"] .ls-root .ls-dp-kpi b { color: #1A1812; } body[data-mode="light"] .ls-root .ls-dp-note, body[data-site-theme="classic"] .ls-root .ls-dp-note { color: #4A4338; background: rgba(24,18,8,0.03); border-left-color: rgba(180,83,9,0.5); } body[data-mode="light"] .ls-root .ls-dp-note em, body[data-site-theme="classic"] .ls-root .ls-dp-note em { color: #B45309; } body[data-mode="light"] .ls-root .ls-dp-note b, body[data-site-theme="classic"] .ls-root .ls-dp-note b { color: #1A1812; } body[data-mode="light"] .ls-root .ls-dp-cta, body[data-site-theme="classic"] .ls-root .ls-dp-cta { background: linear-gradient(180deg, #D97706, #B45309); color: #FDFBF5; } body[data-mode="light"] .ls-root .ls-dp-list li, body[data-site-theme="classic"] .ls-root .ls-dp-list li { color: #4A4338; border-bottom-color: rgba(24,18,8,0.08); } body[data-mode="light"] .ls-root .ls-dp-list b, body[data-site-theme="classic"] .ls-root .ls-dp-list b { color: #1A1812; } body[data-mode="light"] .ls-root .spiniq-action, body[data-site-theme="classic"] .ls-root .spiniq-action { color: #6D28D9; } body[data-mode="light"] .ls-root .spiniq-hot b, body[data-site-theme="classic"] .ls-root .spiniq-hot b { color: #C62828; } body[data-mode="light"] .ls-root .spiniq-warn b, body[data-site-theme="classic"] .ls-root .spiniq-warn b { color: #F57F17; } body[data-mode="light"] .ls-root .spiniq-info b, body[data-site-theme="classic"] .ls-root .spiniq-info b { color: #1565C0; } body[data-mode="light"] .ls-root .spiniq-ok b, body[data-site-theme="classic"] .ls-root .spiniq-ok b { color: #2E7D32; } body[data-mode="light"] .ls-root .ls-dp-mini, body[data-site-theme="classic"] .ls-root .ls-dp-mini { color: #6D28D9; background: rgba(109,40,217,0.06); border-color: rgba(109,40,217,0.24); } body[data-mode="light"] .ls-root .ls-dp-mini:hover, body[data-site-theme="classic"] .ls-root .ls-dp-mini:hover { background: rgba(109,40,217,0.14); } /* bottombar */ body[data-mode="light"] .ls-root.ls-fin .ls-bottombar, body[data-site-theme="classic"] .ls-root.ls-fin .ls-bottombar { border-top-color: rgba(24,18,8,0.08); } body[data-mode="light"] .ls-root.ls-fin .ls-brief-out h4, body[data-site-theme="classic"] .ls-root.ls-fin .ls-brief-out h4 { color: #6D28D9; } body[data-mode="light"] .ls-root.ls-fin .ls-brief-out p, body[data-site-theme="classic"] .ls-root.ls-fin .ls-brief-out p { color: #4A4338; } body[data-mode="light"] .ls-root.ls-fin .ls-brief-out p em, body[data-site-theme="classic"] .ls-root.ls-fin .ls-brief-out p em { color: #B45309; } body[data-mode="light"] .ls-root.ls-fin .ls-brief-out p b, body[data-site-theme="classic"] .ls-root.ls-fin .ls-brief-out p b { color: #1A1812; } body[data-mode="light"] .ls-root.ls-fin .ls-decisions, body[data-site-theme="classic"] .ls-root.ls-fin .ls-decisions { color: #4A4338; } body[data-mode="light"] .ls-root.ls-fin .ls-pulse-row, body[data-site-theme="classic"] .ls-root.ls-fin .ls-pulse-row { color: #766D5E; } body[data-mode="light"] .ls-root.ls-fin .ls-pulse-bar, body[data-site-theme="classic"] .ls-root.ls-fin .ls-pulse-bar { background: rgba(24,18,8,0.06); } /* danger/success helpers stay vibrant but bump to AAA for light bg */ body[data-mode="light"] .ls-root.ls-fin .danger, body[data-site-theme="classic"] .ls-root.ls-fin .danger { color: #B91C1C; } body[data-mode="light"] .ls-root.ls-fin .success, body[data-site-theme="classic"] .ls-root.ls-fin .success { color: #047857; } /* ============================================================================= LS-LITE · non-topology primitives for every ERP page ----------------------------------------------------------------------------- Scoping: `body.ls-active` — any page gets these just by having LS chrome enabled. Intended for list views, forms, grids, detail pages, settings — pages where the topology canvas is overkill but the aesthetic is required. Rule: see feedback_living_system_is_default.md — topology situational, aesthetic mandatory. ============================================================================= */ /* ---- PAGE SHELL --------------------------------------------------------- */ body.ls-active .ls-page { color: var(--ls-ink); font-family: var(--ls-sans); background: var(--ls-bg); padding: 16px 22px 28px; min-height: calc(100vh - 68px); } body.ls-active .ls-page *, body.ls-active .ls-page *::before, body.ls-active .ls-page *::after { box-sizing: border-box; } body.ls-active .ls-page .ls-page-wrap { max-width: 1520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } /* ---- EDITORIAL BRIEF / TOPLINE ------------------------------------------ */ body.ls-active .ls-page .ls-page-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; } body.ls-active .ls-page .ls-page-topline .lab { font: 600 10.5px/1 var(--ls-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--ls-ink-3); } body.ls-active .ls-page .ls-page-topline .now { font: 500 11px/1 var(--ls-mono); color: var(--ls-ink-3); letter-spacing: .3px; } body.ls-active .ls-page .ls-page-brief { font-family: var(--ls-display); font-weight: 400; font-size: 24px; line-height: 1.24; letter-spacing: -.4px; margin: 0; max-width: 1160px; color: var(--ls-ink); } body.ls-active .ls-page .ls-page-brief em { font-style: italic; color: var(--ls-amber-2); font-weight: 500; } /* ---- PANELS / CARDS ----------------------------------------------------- */ body.ls-active .ls-panel { background: var(--ls-bg-2); border: 1px solid var(--ls-line-2); border-radius: 12px; padding: 14px 16px; color: var(--ls-ink); } body.ls-active .ls-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } body.ls-active .ls-panel-title { font: 500 13px/1.2 var(--ls-sans); color: var(--ls-ink); letter-spacing: -.1px; } body.ls-active .ls-panel-sub { font: 500 10.5px/1 var(--ls-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ls-ink-3); } body.ls-active .ls-panel.ok { border-color: rgba(45,212,191,0.30); } body.ls-active .ls-panel.warn { border-color: rgba(245,165,36,0.30); } body.ls-active .ls-panel.hot { border-color: rgba(248,113,113,0.32); } body.ls-active .ls-panel.violet { border-color: rgba(167,139,250,0.30); } /* ---- GRID LAYOUTS ------------------------------------------------------- */ body.ls-active .ls-grid { display: grid; gap: 14px; } body.ls-active .ls-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.ls-active .ls-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.ls-active .ls-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.ls-active .ls-grid-kpi { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } @media (max-width: 1100px) { body.ls-active .ls-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.ls-active .ls-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { body.ls-active .ls-grid-2, body.ls-active .ls-grid-3, body.ls-active .ls-grid-4 { grid-template-columns: 1fr; } } /* ---- KPI CARDS ---------------------------------------------------------- */ body.ls-active .ls-kpi { background: var(--ls-bg-2); border: 1px solid var(--ls-line-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } body.ls-active .ls-kpi .k-label { font: 500 10.5px/1 var(--ls-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ls-ink-3); } body.ls-active .ls-kpi .k-value { font: 400 28px/1 var(--ls-display); letter-spacing: -.01em; color: var(--ls-ink); } body.ls-active .ls-kpi .k-delta { font: 500 11.5px/1 var(--ls-mono); color: var(--ls-ink-2); } body.ls-active .ls-kpi .k-delta.up { color: var(--ls-green); } body.ls-active .ls-kpi .k-delta.down { color: var(--ls-red); } body.ls-active .ls-kpi.ok { border-color: rgba(45,212,191,0.26); } body.ls-active .ls-kpi.warn { border-color: rgba(245,165,36,0.30); } body.ls-active .ls-kpi.hot { border-color: rgba(248,113,113,0.32); } /* ---- CHIPS / BADGES ----------------------------------------------------- */ body.ls-active .ls-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 500 11px/1 var(--ls-mono); letter-spacing: .04em; background: rgba(255,255,255,0.05); color: var(--ls-ink-2); border: 1px solid var(--ls-line-2); } body.ls-active .ls-chip.ok { background: rgba(45,212,191,0.10); color: var(--ls-green-2); border-color: rgba(45,212,191,0.32); } body.ls-active .ls-chip.warn { background: rgba(245,165,36,0.12); color: var(--ls-amber-2); border-color: rgba(245,165,36,0.36); } body.ls-active .ls-chip.hot { background: rgba(248,113,113,0.12); color: var(--ls-red-2); border-color: rgba(248,113,113,0.36); } body.ls-active .ls-chip.violet { background: rgba(167,139,250,0.12); color: var(--ls-violet-2); border-color: rgba(167,139,250,0.36); } body.ls-active .ls-chip.solid { background: var(--ls-amber); color: #141414; border-color: transparent; } /* ---- BUTTONS ------------------------------------------------------------ */ body.ls-active .ls-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font: 500 13px/1 var(--ls-sans); letter-spacing: -.1px; cursor: pointer; background: rgba(255,255,255,0.04); color: var(--ls-ink); border: 1px solid var(--ls-line-2); transition: background .15s, border-color .15s, transform .1s, filter .15s; } body.ls-active .ls-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--ls-line-3); } body.ls-active .ls-btn:active { transform: translateY(1px); } /* The `display: inline-flex` above beats the UA `[hidden] { display: none }`, so an .ls-btn with the `hidden` attribute would still render (this is why a "Load more" toggled via el.hidden kept showing). Restore hidden semantics. */ body.ls-active .ls-btn[hidden] { display: none !important; } body.ls-active .ls-btn.amber { background: linear-gradient(180deg, var(--ls-amber-2), var(--ls-amber)); color: #121212; border-color: transparent; font-weight: 600; } body.ls-active .ls-btn.amber:hover { filter: brightness(1.08); } body.ls-active .ls-btn.ghost { background: transparent; } body.ls-active .ls-btn.danger { background: rgba(248,113,113,0.14); color: var(--ls-red-2); border-color: rgba(248,113,113,0.32); } body.ls-active .ls-btn.subtle { padding: 4px 9px; font-size: 11.5px; border-radius: 6px; } /* ---- TABLES ------------------------------------------------------------- */ body.ls-active .ls-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 13px/1.4 var(--ls-sans); color: var(--ls-ink); } body.ls-active .ls-table thead th { text-align: left; font: 500 10.5px/1 var(--ls-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ls-ink-3); padding: 10px 12px; border-bottom: 1px solid var(--ls-line-2); background: transparent; } body.ls-active .ls-table tbody td { padding: 11px 12px; border-bottom: 1px dashed var(--ls-line); color: var(--ls-ink); vertical-align: middle; } body.ls-active .ls-table tbody tr:hover td { background: rgba(255,255,255,0.025); } body.ls-active .ls-table tbody tr:last-child td { border-bottom: 0; } body.ls-active .ls-table td.num, body.ls-active .ls-table th.num { text-align: right; font-family: var(--ls-mono); font-size: 12.5px; } body.ls-active .ls-table td b { color: var(--ls-ink); font-weight: 600; } body.ls-active .ls-table .muted { color: var(--ls-ink-3); } /* ---- BAR GRAPHS (inline) ------------------------------------------------ */ body.ls-active .ls-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; --ls-bar-fill: 0%; --ls-bar-color: var(--ls-green); } body.ls-active .ls-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--ls-bar-fill); background: var(--ls-bar-color); border-radius: 3px; transition: width .5s ease, background .3s ease; } body.ls-active .ls-bar.warn { --ls-bar-color: var(--ls-amber); } body.ls-active .ls-bar.hot { --ls-bar-color: var(--ls-red); } body.ls-active .ls-bar.thick { height: 10px; border-radius: 5px; } body.ls-active .ls-bar.thick::before { border-radius: 5px; } body.ls-active .ls-barchart { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 8px 0 4px; } body.ls-active .ls-barchart .b { flex: 1 1 0; background: linear-gradient(180deg, var(--ls-amber-2), var(--ls-amber-deep)); border-radius: 3px 3px 0 0; min-height: 4px; opacity: .9; transition: opacity .15s, transform .15s; } body.ls-active .ls-barchart .b:hover { opacity: 1; transform: translateY(-2px); } body.ls-active .ls-barchart .b.dim { background: rgba(255,255,255,0.10); } body.ls-active .ls-barchart .b.ok { background: linear-gradient(180deg, var(--ls-green-2), var(--ls-green)); } body.ls-active .ls-barchart .b.hot { background: linear-gradient(180deg, var(--ls-red-2), var(--ls-red)); } /* ---- FORM CONTROLS ------------------------------------------------------ */ body.ls-active .ls-input, body.ls-active .ls-select, body.ls-active .ls-textarea { background: var(--ls-bg-3); border: 1px solid var(--ls-line-2); color: var(--ls-ink); padding: 8px 11px; border-radius: 8px; font: 400 13px/1.3 var(--ls-sans); width: 100%; transition: border-color .15s, background .15s; } body.ls-active .ls-input:focus, body.ls-active .ls-select:focus, body.ls-active .ls-textarea:focus { outline: none; border-color: var(--ls-amber); background: var(--ls-bg-4); } body.ls-active .ls-label { display: block; font: 500 10.5px/1 var(--ls-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ls-ink-3); margin-bottom: 6px; } /* ---- TYPOGRAPHY HELPERS ------------------------------------------------- */ body.ls-active .ls-eyebrow { font: 600 10.5px/1 var(--ls-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ls-ink-3); } body.ls-active .ls-h-display { font: 400 22px/1.2 var(--ls-display); letter-spacing: -.3px; color: var(--ls-ink); margin: 0; } body.ls-active .ls-mono { font-family: var(--ls-mono); } body.ls-active .ls-muted { color: var(--ls-ink-3); } /* ---- DIVIDER ------------------------------------------------------------ */ body.ls-active .ls-hr { border: 0; height: 1px; background: var(--ls-line); margin: 10px 0; } /* ---- TABS (horizontal) -------------------------------------------------- */ body.ls-active .ls-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ls-line-2); margin-bottom: 14px; } body.ls-active .ls-tab { padding: 9px 14px; font: 500 12.5px/1 var(--ls-sans); color: var(--ls-ink-2); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; } body.ls-active .ls-tab:hover { color: var(--ls-ink); } body.ls-active .ls-tab.active { color: var(--ls-amber-2); border-bottom-color: var(--ls-amber); } /* ============================================================================= LEGACY BRIDGE · skin existing .card / .btn / .tab / table / form-control ----------------------------------------------------------------------------- Because body.ls-active #app is global ERP chrome (see project_ls_active_global_chrome), these selectors re-skin every legacy page's cards, buttons, tables, and form controls with LS tokens — no HTML changes required. Lets us migrate 30+ detail pages from the CSS side first, then progressively swap legacy classes for .ls-panel / .ls-btn / .ls-table in place. Specificity: `body.ls-active #app .foo` is 0,1,2 — beats bare `.foo` (0,1,0) and even `.foo.active` (0,2,0 loses to 0,2,2). We only !important where a legacy rule itself uses !important. ============================================================================= */ /* ---- CARDS / PANELS ----------------------------------------------------- */ body.ls-active #app .card, body.ls-active #app .panel { background: var(--ls-bg-2); border: 1px solid var(--ls-line-2); border-radius: 12px; color: var(--ls-ink); box-shadow: none; } body.ls-active #app .card:hover, body.ls-active #app .panel:hover { border-color: var(--ls-line-3); box-shadow: none; } body.ls-active #app .card-header { background: transparent; border-bottom: 1px solid var(--ls-line-2); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.ls-active #app .card-title { color: var(--ls-ink); font-family: var(--ls-sans); font-weight: 500; font-size: 13.5px; letter-spacing: -.1px; } body.ls-active #app .card-body { color: var(--ls-ink); } body.ls-active #app .card-footer { background: transparent; border-top: 1px solid var(--ls-line); color: var(--ls-ink-2); } /* ---- BUTTONS ------------------------------------------------------------ */ body.ls-active #app .btn { background: rgba(255,255,255,0.04) !important; color: var(--ls-ink) !important; border: 1px solid var(--ls-line-2) !important; border-radius: 8px; font-family: var(--ls-sans); transition: background .15s, border-color .15s, filter .15s; } body.ls-active #app .btn:hover { background: rgba(255,255,255,0.08) !important; border-color: var(--ls-line-3) !important; color: var(--ls-ink) !important; } body.ls-active #app .btn-primary, body.ls-active #app .btn-amber { background: linear-gradient(180deg, var(--ls-amber-2), var(--ls-amber)) !important; color: #121212 !important; border-color: transparent !important; font-weight: 600; } body.ls-active #app .btn-primary:hover, body.ls-active #app .btn-amber:hover { filter: brightness(1.08); background: linear-gradient(180deg, var(--ls-amber-2), var(--ls-amber)) !important; color: #121212 !important; border-color: transparent !important; box-shadow: 0 4px 16px rgba(245,165,36,.22); } body.ls-active #app .btn-success { background: linear-gradient(180deg, var(--ls-green-2), var(--ls-green)) !important; color: #0A1714 !important; border-color: transparent !important; font-weight: 600; } body.ls-active #app .btn-success:hover { filter: brightness(1.08); color: #0A1714 !important; } body.ls-active #app .btn-danger { background: rgba(248,113,113,0.14) !important; color: var(--ls-red-2) !important; border-color: rgba(248,113,113,0.32) !important; } body.ls-active #app .btn-danger:hover { background: rgba(248,113,113,0.22) !important; color: var(--ls-red-2) !important; } body.ls-active #app .btn-outline, body.ls-active #app .btn-secondary, body.ls-active #app .btn-ghost { background: transparent !important; color: var(--ls-ink-2) !important; border: 1px solid var(--ls-line-2) !important; } body.ls-active #app .btn-outline:hover, body.ls-active #app .btn-secondary:hover, body.ls-active #app .btn-ghost:hover { background: rgba(255,255,255,0.05) !important; color: var(--ls-ink) !important; border-color: var(--ls-line-3) !important; } /* ---- TABS --------------------------------------------------------------- */ body.ls-active #app .tab { color: var(--ls-ink-2); background: transparent; border-bottom: 2px solid transparent; font-family: var(--ls-sans); font-weight: 500; transition: color .15s, border-color .15s; } body.ls-active #app .tab:hover { color: var(--ls-ink); } body.ls-active #app .tab.active { color: var(--ls-amber-2); border-bottom-color: var(--ls-amber); background: transparent; } /* ---- TABLES ------------------------------------------------------------- */ body.ls-active #app table { color: var(--ls-ink); font-family: var(--ls-sans); background: transparent; } body.ls-active #app table thead th { font-family: var(--ls-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-ink-3); background: transparent; border-bottom: 1px solid var(--ls-line-2); } body.ls-active #app table tbody tr { background: transparent; } body.ls-active #app table tbody tr:nth-child(even) { background: transparent; } body.ls-active #app table tbody tr:hover { background: rgba(255,255,255,0.025); } body.ls-active #app table tbody td { color: var(--ls-ink); border-bottom: 1px dashed var(--ls-line); } body.ls-active #app table td.num, body.ls-active #app table th.num, body.ls-active #app table td[data-type="number"], body.ls-active #app table th[data-type="number"] { font-family: var(--ls-mono); color: var(--ls-ink); } /* ---- FORM CONTROLS ------------------------------------------------------ */ body.ls-active #app .form-control, body.ls-active #app input[type="text"]:not(.topbar-search-input):not([class*="solstice"]), body.ls-active #app input[type="search"]:not(.topbar-search-input):not([class*="solstice"]), body.ls-active #app input[type="email"]:not([class*="solstice"]), body.ls-active #app input[type="number"]:not([class*="solstice"]), body.ls-active #app input[type="password"]:not([class*="solstice"]), body.ls-active #app input[type="tel"]:not([class*="solstice"]), body.ls-active #app input[type="url"]:not([class*="solstice"]), body.ls-active #app input[type="date"]:not([class*="solstice"]), body.ls-active #app input[type="datetime-local"]:not([class*="solstice"]), body.ls-active #app textarea:not([class*="solstice"]), body.ls-active #app select:not([class*="solstice"]) { background: var(--ls-bg-3); border: 1px solid var(--ls-line-2); color: var(--ls-ink); border-radius: 8px; font-family: var(--ls-sans); transition: border-color .15s, background .15s; } body.ls-active #app .form-control:focus, body.ls-active #app input[type="text"]:focus, body.ls-active #app input[type="search"]:focus, body.ls-active #app input[type="email"]:focus, body.ls-active #app input[type="number"]:focus, body.ls-active #app input[type="password"]:focus, body.ls-active #app textarea:focus, body.ls-active #app select:focus { outline: none; border-color: var(--ls-amber); background: var(--ls-bg-4); } body.ls-active #app .form-label { font-family: var(--ls-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-ink-3); } /* ---- BADGES / PILLS ----------------------------------------------------- */ body.ls-active #app .badge { background: rgba(255,255,255,0.05); color: var(--ls-ink-2); border: 1px solid var(--ls-line-2); border-radius: 999px; font-family: var(--ls-mono); font-size: 11px; letter-spacing: .04em; padding: 3px 9px; } body.ls-active #app .badge.success, body.ls-active #app .badge-success { background: rgba(45,212,191,0.10); color: var(--ls-green-2); border-color: rgba(45,212,191,0.32); } body.ls-active #app .badge.warning, body.ls-active #app .badge-warning { background: rgba(245,165,36,0.12); color: var(--ls-amber-2); border-color: rgba(245,165,36,0.36); } body.ls-active #app .badge.danger, body.ls-active #app .badge-danger { background: rgba(248,113,113,0.12); color: var(--ls-red-2); border-color: rgba(248,113,113,0.36); } /* ---- DIVIDER / HR ------------------------------------------------------- */ body.ls-active #app hr { border: 0; height: 1px; background: var(--ls-line); } /* ---- SCROLLBARS (subtle) ------------------------------------------------ */ body.ls-active #app ::-webkit-scrollbar { width: 10px; height: 10px; } body.ls-active #app ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } body.ls-active #app ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); background-clip: padding-box; border: 2px solid transparent; } body.ls-active #app ::-webkit-scrollbar-track { background: transparent; } /* ---- ANCHOR COLOR ------------------------------------------------------- */ body.ls-active #app a { color: var(--ls-amber-2); } body.ls-active #app a:hover { color: var(--ls-amber); } r-spacing: .12em; text-transform: uppercase; color: var(--ls-ink-3); background: transparent; border-bottom: 1px solid var(--ls-line-2); padding: 10px 12px; text-align: left; font-weight: 500; } body.ls-active #app table tbody td { border-bottom: 1px solid var(--ls-line-2); color: var(--ls-ink); padding: 10px 12px; } body.ls-active #app table tbody tr:hover td { background: rgba(255,179,0,0.04); } /* ============================================================= CRM LEGACY CARD LIFT (2026-04-14) — give the cards below the LS topology (Industry Workspace / Template / Partner Fit / Contacts / Timeline) an LS aesthetic without disturbing crm.js DOM hooks. Scoped strictly to #section-crm .card. ============================================================= */ #section-crm .card { position: relative; background: linear-gradient(180deg, rgba(255,179,0,0.035) 0%, rgba(255,179,0,0) 120px), var(--ls-panel, #111217); border: 1px solid var(--ls-line-3, rgba(255,255,255,0.08)); border-radius: 14px; box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 20px 40px -28px rgba(0,0,0,0.65); overflow: hidden; transition: border-color .2s ease; } #section-crm .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(255,179,0,0.55) 18%, rgba(255,179,0,0.9) 50%, rgba(255,179,0,0.55) 82%, transparent 100%); opacity: 0.75; pointer-events: none; } #section-crm .card:hover { border-color: rgba(255,179,0,0.28); } #section-crm .card .card-header { padding: 14px 18px 10px; border-bottom: 1px solid var(--ls-line-2, rgba(255,255,255,0.06)); background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #section-crm .card .card-title { font-family: var(--ls-sans); font-weight: 600; font-size: 15px; color: var(--ls-ink, #E8E8EB); position: relative; padding-left: 12px; } #section-crm .card .card-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 14px; margin-top: -7px; background: var(--ls-amber, #FFB300); border-radius: 2px; box-shadow: 0 0 8px rgba(255,179,0,0.55); } #section-crm .card .card-body { padding: 14px 18px 18px; } /* form controls */ #section-crm .card label { font-family: var(--ls-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ls-ink-2, #A8A8AD); font-weight: 500; } #section-crm .card .form-group > label { display: block; margin-bottom: 5px; } #section-crm .card input[type="text"], #section-crm .card input[type="search"], #section-crm .card input[type="number"], #section-crm .card input:not([type]), #section-crm .card select, #section-crm .card textarea { background: rgba(0,0,0,0.35) !important; border: 1px solid var(--ls-line-3, rgba(255,255,255,0.09)) !important; border-radius: 8px !important; color: var(--ls-ink, #E8E8EB) !important; font-family: var(--ls-sans) !important; font-size: 13px; padding: 8px 10px !important; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } #section-crm .card textarea { font-family: var(--ls-mono, ui-monospace, monospace) !important; font-size: 12px; line-height: 1.5; resize: vertical; } #section-crm .card input:focus, #section-crm .card select:focus, #section-crm .card textarea:focus { border-color: rgba(255,179,0,0.55) !important; background: rgba(0,0,0,0.45) !important; box-shadow: 0 0 0 3px rgba(255,179,0,0.12) !important; outline: none !important; } #section-crm .card select option { background: #0D0E12; color: var(--ls-ink); } /* buttons */ #section-crm .card .btn, #section-crm .card .btn-sm, #section-crm .card .btn-outline { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--ls-line-3, rgba(255,255,255,0.1)) !important; color: var(--ls-ink, #E8E8EB) !important; font-family: var(--ls-sans) !important; font-weight: 500; font-size: 12px; padding: 6px 12px !important; border-radius: 8px !important; transition: border-color .15s ease, background .15s ease, transform .1s ease; } #section-crm .card .btn:hover, #section-crm .card .btn-outline:hover { border-color: rgba(255,179,0,0.5) !important; background: rgba(255,179,0,0.08) !important; color: #FFD48A !important; } #section-crm .card .btn-success { background: linear-gradient(180deg, rgba(255,179,0,0.9), rgba(255,140,0,0.95)) !important; border-color: rgba(255,179,0,0.9) !important; color: #1a1205 !important; font-weight: 600 !important; } #section-crm .card .btn-success:hover { background: linear-gradient(180deg, #FFC733, #FF9D1A) !important; transform: translateY(-1px); } /* eyebrows (subtitles / theme / meta lines) */ #section-crm #crm-industry-card #crm-industry-subtitle, #section-crm #crm-industry-card #crm-industry-theme, #section-crm #crm-template-card #crm-template-meta { font-family: var(--ls-mono) !important; font-size: 10.5px !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ls-ink-2) !important; } /* Template card bullet lists */ #section-crm #crm-template-card ul { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-direction: column; gap: 6px; } #section-crm #crm-template-card ul li { position: relative; padding: 7px 10px 7px 24px; background: rgba(255,255,255,0.02); border: 1px solid var(--ls-line-2, rgba(255,255,255,0.05)); border-radius: 7px; font-size: 12.5px; color: var(--ls-ink); transition: border-color .15s ease, background .15s ease; } #section-crm #crm-template-card ul li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ls-amber); box-shadow: 0 0 6px rgba(255,179,0,0.55); } #section-crm #crm-template-card ul li:hover { border-color: rgba(255,179,0,0.3); background: rgba(255,179,0,0.04); } #section-crm #crm-template-card .form-row > div > label[style*="font-weight:600"] { font-family: var(--ls-mono) !important; font-size: 10.5px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ls-amber-2, #FFD48A) !important; margin-bottom: 8px !important; } /* Partner Fit weight cells as chip tiles */ #section-crm #crm-partner-fit-card .form-row[style*="repeat(5,1fr)"] .form-group, #section-crm #crm-partner-fit-card .form-row[style*="repeat(3,1fr)"] .form-group { background: rgba(255,255,255,0.02); border: 1px solid var(--ls-line-2); border-radius: 8px; padding: 8px 10px; transition: border-color .15s ease; } #section-crm #crm-partner-fit-card .form-row[style*="repeat(5,1fr)"] .form-group:hover, #section-crm #crm-partner-fit-card .form-row[style*="repeat(3,1fr)"] .form-group:hover { border-color: rgba(255,179,0,0.28); } #section-crm #crm-partner-fit-card .form-row[style*="repeat(5,1fr)"] input, #section-crm #crm-partner-fit-card .form-row[style*="repeat(3,1fr)"] input { background: transparent !important; border: none !important; padding: 2px 0 !important; font-size: 18px !important; font-weight: 600 !important; color: var(--ls-amber-2, #FFD48A) !important; font-family: var(--ls-mono) !important; box-shadow: none !important; } /* tables */ #section-crm .card .table-wrap { background: rgba(0,0,0,0.25); border: 1px solid var(--ls-line-2); border-radius: 10px; overflow: hidden; } #section-crm .card .table-wrap table { width: 100%; border-collapse: collapse; } #section-crm .card .table-wrap thead th { background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--ls-line-3); color: var(--ls-ink-2); font-family: var(--ls-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding: 10px 12px; text-align: left; } #section-crm .card .table-wrap tbody td { padding: 10px 12px; border-bottom: 1px solid var(--ls-line-2); color: var(--ls-ink); font-size: 13px; } #section-crm .card .table-wrap tbody tr:last-child td { border-bottom: none; } #section-crm .card .table-wrap tbody tr:hover td { background: rgba(255,179,0,0.04); } #section-crm .card .table-wrap .empty-state { padding: 24px 16px; text-align: center; color: var(--ls-ink-2); } #section-crm .card .table-wrap .empty-state .empty-icon { font-size: 28px; opacity: 0.55; margin-bottom: 6px; } /* Contacts subtabs */ #section-crm .card .crm-subtab { background: transparent; border: none; padding: 10px 16px; font-family: var(--ls-sans); font-weight: 500; font-size: 13px; color: var(--ls-ink-2); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } #section-crm .card .crm-subtab:hover { color: var(--ls-ink); } #section-crm .card .crm-subtab.active { color: var(--ls-amber-2, #FFD48A); border-bottom-color: var(--ls-amber); } /* Timeline items */ #section-crm #crm-contact-timeline > div { background: rgba(255,255,255,0.02); border: 1px solid var(--ls-line-2); border-left: 3px solid var(--ls-amber); border-radius: 8px; padding: 10px 12px; transition: border-color .15s ease, background .15s ease; } #section-crm #crm-contact-timeline > div:hover { border-color: rgba(255,179,0,0.3); background: rgba(255,179,0,0.04); } /* Industry tool grid */ #section-crm #crm-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } #section-crm #crm-tool-grid > * { background: rgba(255,255,255,0.02); border: 1px solid var(--ls-line-2); border-radius: 8px; padding: 10px 12px; transition: border-color .15s ease, background .15s ease, transform .15s ease; } #section-crm #crm-tool-grid > *:hover { border-color: rgba(255,179,0,0.35); background: rgba(255,179,0,0.05); transform: translateY(-1px); } /* ============================================================================= AGENT COMMAND CENTER · Living System topology positions (2026-04-15) Mirrors CRM/PM's 3-row grid. Node keys map to agent governance domains. n-fleet = top-left · active agents n-safety = middle-left · circuit breakers n-cost = bottom-left · cost alerts prevented n-proposals = top-right · pending proposals n-audit = middle-right · revert/audit log n-policy = bottom-right · capability coverage n-ai = bottom center (inherited) ============================================================================= */ .ls-root.ls-acc .ls-node.n-fleet { top: 56px; left: 98px; } .ls-root.ls-acc .ls-node.n-safety { top: 284px; left: 24px; } .ls-root.ls-acc .ls-node.n-cost { top: 512px; left: 98px; } .ls-root.ls-acc .ls-node.n-proposals { top: 56px; right: 98px; } .ls-root.ls-acc .ls-node.n-audit { top: 284px; right: 24px; } .ls-root.ls-acc .ls-node.n-policy { top: 512px; right: 98px; } /* ACC canvas sizing — same in-tab adoption treatment as CRM/PM. */ .ls-root.ls-acc { min-height: auto; padding: 8px 18px 18px; } .ls-root.ls-acc .ls-wrap { min-height: 0; padding-bottom: 18px; gap: 12px; } .ls-root.ls-acc .ls-world { min-height: 680px; height: 680px; } .ls-root.ls-acc .ls-heart { top: 40px; } /* ACC chrome neutralization — drop the legacy light/alt background while Living System topology is the top of the ACC page. Scoped so legacy cards below still render normally. */ #main:has(#section-agent_command_center .ls-root.ls-acc) { background: var(--ls-bg) !important; } #section-agent_command_center:has(.ls-root.ls-acc) { background: var(--ls-bg); } /* ACC polish — mirror CRM/PM's overview rules so the topline collapses, the brief sits at the right size, and drawer actions animate the same. */ .ls-root.ls-acc .ls-topline { display: none; } .ls-root.ls-acc .ls-brief { font-size: 22px; line-height: 1.25; max-width: 1080px; } .ls-root.ls-acc { padding-top: 2px; } .acc-ls-legacy-hooks { pointer-events: none; } .ls-root.ls-acc .is-clickable { cursor: pointer; } .ls-root.ls-acc .ls-heart.is-clickable .torus { transition: transform 0.3s ease; } .ls-root.ls-acc .ls-heart.is-clickable:hover .torus { transform: scale(1.015); } .ls-root.ls-acc .ls-heart .orbit span[data-edge].is-clickable:hover { transform: scale(1.35); filter: brightness(1.3); } .ls-root.ls-acc #acc-ls-tasklist .ls-task.is-clickable { transition: background 0.15s ease, transform 0.15s ease; } .ls-root.ls-acc #acc-ls-tasklist .ls-task.is-clickable:hover { background: rgba(255,179,0,0.06); transform: translateX(2px); } .ls-root.ls-acc #acc-ls-pulsebar .row.is-clickable { transition: background 0.15s ease; padding: 2px 4px; border-radius: 4px; margin: 0 -4px; } .ls-root.ls-acc #acc-ls-pulsebar .row.is-clickable:hover { background: rgba(255,255,255,0.04); } .ls-root.ls-acc .ls-detail-panel .dp-flag button.act.queued { opacity: 0.7; cursor: progress; border-color: rgba(167,139,250,0.5); color: #D3C4FF; } .ls-root.ls-acc .ls-detail-panel .dp-flag button.act.done { background: rgba(52,199,89,0.16); border-color: rgba(52,199,89,0.55); color: #B8F2C0; } /* ============================================================================= AGENT COMMAND CENTER · Living System topology positions (2026-04-15) Mirrors CRM/PM's 3-row grid. Node keys map to agent governance domains. n-fleet = top-left · active agents n-safety = middle-left · circuit breakers n-cost = bottom-left · cost alerts prevented n-proposals = top-right · pending proposals n-audit = middle-right · revert/audit log n-policy = bottom-right · capability coverage n-ai = bottom center (inherited) ============================================================================= */ .ls-root.ls-acc .ls-node.n-fleet { top: 56px; left: 98px; } .ls-root.ls-acc .ls-node.n-safety { top: 284px; left: 24px; } .ls-root.ls-acc .ls-node.n-cost { top: 512px; left: 98px; } .ls-root.ls-acc .ls-node.n-proposals { top: 56px; right: 98px; } .ls-root.ls-acc .ls-node.n-audit { top: 284px; right: 24px; } .ls-root.ls-acc .ls-node.n-policy { top: 512px; right: 98px; } /* ACC canvas sizing — same in-tab adoption treatment as CRM/PM. */ .ls-root.ls-acc { min-height: auto; padding: 8px 18px 18px; } .ls-root.ls-acc .ls-wrap { min-height: 0; padding-bottom: 18px; gap: 12px; } .ls-root.ls-acc .ls-world { min-height: 680px; height: 680px; } .ls-root.ls-acc .ls-heart { top: 40px; } /* ACC chrome neutralization — drop the legacy light/alt background while Living System topology is the top of the ACC page. Scoped so legacy cards below still render normally. */ #main:has(#section-agent_command_center .ls-root.ls-acc) { background: var(--ls-bg) !important; } #section-agent_command_center:has(.ls-root.ls-acc) { background: var(--ls-bg); } /* ACC polish — mirror CRM/PM's overview rules so the topline collapses, the brief sits at the right size, and drawer actions animate the same. */ .ls-root.ls-acc .ls-topline { display: none; } .ls-root.ls-acc .ls-brief { font-size: 22px; line-height: 1.25; max-width: 1080px; } .ls-root.ls-acc { padding-top: 2px; } .acc-ls-legacy-hooks { pointer-events: none; } .ls-root.ls-acc .is-clickable { cursor: pointer; } .ls-root.ls-acc .ls-heart.is-clickable .torus { transition: transform 0.3s ease; } .ls-root.ls-acc .ls-heart.is-clickable:hover .torus { transform: scale(1.015); } .ls-root.ls-acc .ls-heart .orbit span[data-edge].is-clickable:hover { transform: scale(1.35); filter: brightness(1.3); } .ls-root.ls-acc #acc-ls-tasklist .ls-task.is-clickable { transition: background 0.15s ease, transform 0.15s ease; } .ls-root.ls-acc #acc-ls-tasklist .ls-task.is-clickable:hover { background: rgba(255,179,0,0.06); transform: translateX(2px); } .ls-root.ls-acc #acc-ls-pulsebar .row.is-clickable { transition: background 0.15s ease; padding: 2px 4px; border-radius: 4px; margin: 0 -4px; } .ls-root.ls-acc #acc-ls-pulsebar .row.is-clickable:hover { background: rgba(255,255,255,0.04); } .ls-root.ls-acc .ls-detail-panel .dp-flag button.act.queued { opacity: 0.7; cursor: progress; border-color: rgba(167,139,250,0.5); color: #D3C4FF; } .ls-root.ls-acc .ls-detail-panel .dp-flag button.act.done { background: rgba(52,199,89,0.16); border-color: rgba(52,199,89,0.55); color: #B8F2C0; }