/* ============================================================ Helm Design System: Enterprise Infrastructure Intelligence Sits on top of Bootstrap 5. Do NOT remove Bootstrap. ============================================================ */ /* Typography */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Brand colors */ --helm-primary: #1B3A6B; --helm-primary-light: #2A4F8F; --helm-primary-dark: #0F2544; /* NOTE: --helm-accent is re-declared further down as the accessible ink (#00757F). The brand cyan lives on as --helm-accent-fill. */ --helm-accent-warm: #FF6B35; --helm-warning: #fdae61; /* --helm-warning as TEXT on a light surface measures 1.84:1, which is the worst ratio in the system. The dark-mode audit on 2026-07-31 checked #fdae61 against the three DARK surfaces (6.25:1 to 8.38:1, compliant) and did not check it as text on white, so the gap survived: fifteen places across the app paint `color: var(--helm-warning-ink)` and every one of them fails AA in light mode. Found with axe on the proposal template picker, 2026-08-03. --helm-warning stays exactly as it is, because it is correct as a border, a background tint and an icon fill. This is the INK companion, following the same split already used for danger, success, primary and accent. #96560a measures 5.78:1 on white and 5.35:1 on --helm-bg, and it is still unmistakably amber rather than brown-grey. */ --helm-warning-ink: #96560a; --helm-danger: #d73027; /* Was #1a9641. That green measured only 3.83:1 as TEXT on white and 3.54:1 on --helm-bg (#F5F6FA) -- confirmed live with axe on /invitations (status label) and /admin/permissions/drift (kpi value), both in LIGHT mode, both under the 4.5:1 AA floor, both pre-existing and unrelated to dark mode. #167536 clears 4.5:1 on every light surface used in this app (5.78:1 on white, 5.35:1 on --helm-bg, 5.17:1 on --helm-surface-subtle) with real margin, not a hairline pass. Found and fixed during the --helm-danger dark-theme audit because the required verification sweep covers both themes and this surfaced as a real, currently-shipping violation, not a hypothetical one -- leaving it while calling the token "fixed" would be dishonest. */ --helm-success: #167536; /* Fill-safe variants: a handful of components paint --helm-danger / --helm-success as a SOLID BACKGROUND under white text (buttons, toasts: .tgt-btn-danger, .fitp-toast.is-error, .sp-toast.is-success, etc.). That case needs a color dark/saturated enough for white text at 4.5:1 regardless of theme, which is the opposite requirement from the ink use (small text/icons ON a card, which needs to get BRIGHTER in dark mode, see the dark remap below). Mirrors the existing --helm-primary / --helm-ink-brand split (line ~39): one token for fills, one for ink. Not remapped for dark on purpose, same as --helm-primary. Both measure comfortably over 4.5:1 with white text: --helm-danger-fill at 4.84:1 (unchanged from the original brand red, it was already fine), --helm-success-fill at 5.78:1 (same value as the new --helm-success ink above; they coincide in light mode and only diverge in dark, where the ink gets brighter but the fill must not). */ --helm-danger-fill: #d73027; --helm-success-fill: #167536; /* --helm-primary / --helm-accent get the SAME fill-vs-ink split, for the same reason and after the same measurement (contrast audit, 2026-07-31). Two live failures forced it: .mf-row-add on /my-firm/ painted --helm-primary (#1B3A6B) as TEXT on a dark card: 1.02:1, effectively invisible. .mf-eyebrow / .mf-group-title painted --helm-accent (#00BCD4) as TEXT on LIGHT: 2.13:1 on the page background, 2.30:1 on white. So --helm-accent was failing in light mode and --helm-primary in dark. The dark values were already written but scoped to .helm-stat-icon / .helm-action-icon only, which is exactly the narrow patch that let --helm-danger drift unfixed everywhere else. Measured: the old icon-scoped #7da2d9 is itself only 4.41:1 on --helm-surface, so it would have shipped a failure; #8fb4e8 measures 5.40:1 there. Polarity is deliberate: the BASE token is the accessible ink, so text is safe by default and a component must opt IN to the brand fill. 68 background uses of --helm-primary and 14 of --helm-accent are pointed at the -fill tokens; white text on those is unchanged (11.27:1 on primary-fill). */ --helm-primary-fill: #1B3A6B; --helm-accent-fill: #00BCD4; /* Light-mode ink for the accent. The brand cyan is unreadable as small text on any light surface; this keeps the hue and darkens it to 4.78:1 on the worst light surface (--helm-surface-subtle). The brand cyan itself survives untouched as --helm-accent-fill. */ --helm-accent: #00757F; /* Surface colors */ --helm-bg: #F5F6FA; --helm-surface: #FFFFFF; --helm-surface-elevated: #FFFFFF; --helm-surface-subtle: #F0F2F8; --helm-border: #E2E6EF; /* Text: high contrast, no gray */ --helm-text: #1A1D26; --helm-text-secondary: #374151; --helm-text-muted: #4B5563; /* Brand colour as INK. --helm-primary is deliberately NOT remapped for dark (it backs filled buttons that keep white text in both themes), so anything that painted TEXT with it went unreadable in dark: a navy $-total on the dark card measured 1.36:1. This token is the same navy in light (11.27:1 on white) and the light-blue accent in dark (4.90:1 on the lightest dark card, 6.5:1 on the darkest), so brand-coloured text has one home. Use it for text; keep --helm-primary for fills. */ --helm-ink-brand: #1B3A6B; /* Shadows */ --helm-shadow-sm: 0 1px 2px rgba(27, 58, 107, 0.06); --helm-shadow: 0 2px 8px rgba(27, 58, 107, 0.08); --helm-shadow-lg: 0 8px 24px rgba(27, 58, 107, 0.12); /* Typography */ --helm-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --helm-font-mono: 'JetBrains Mono', monospace; /* Spacing */ --helm-page-padding: 1.5rem; /* Transitions */ --helm-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ Dark mode (global). Bootstrap 5.3 flips its own components via html[data-bs-theme="dark"], but the --helm-* surface and text tokens above were light-only, so pages kept a light canvas and near-black inherited ink behind dark Bootstrap cards (half-dark pages, bug 1186). Re-point the tokens at the Bootstrap dark tokens once, body-scoped. This mirrors, and now backstops, the page-scoped remaps on dashboard/index.html and statistics.html (bug 1183). Brand tokens (--helm-primary*, accents) are NOT remapped: they back filled buttons and pills that keep white ink in both themes. Light mode is untouched: every rule here is scoped to [data-bs-theme="dark"]. */ [data-bs-theme="dark"] body { --helm-bg: var(--bs-body-bg); --helm-surface: var(--bs-secondary-bg); --helm-surface-elevated: var(--bs-secondary-bg); --helm-surface-subtle: var(--bs-tertiary-bg); --helm-border: var(--bs-border-color); --helm-text: var(--bs-body-color); --helm-text-secondary: #ced4da; --helm-text-muted: #adb5bd; --helm-ink-brand: #7aa9ff; --helm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --helm-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --helm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); /* --helm-danger / --helm-success re-point (contrast audit, 2026-07-31). Previously ONLY .helm-stat-icon/.helm-action-icon repointed these two tokens (below); everywhere else --helm-danger stayed the light-mode #d73027, which measures 3.19:1 on the dark page body and as low as 2.38:1 on a dark card (var(--helm-surface) = #343a40) -- both well under the 4.5:1 AA floor for text. --helm-success had the identical defect: unfixed #1a9641 measures 3.00:1 on a dark card. Sixty-plus templates paint small text/badges/status-dots with these two tokens directly (var(--helm-danger) / var(--helm-success)), so the component- level patch never reached them. Fixing it here, once, at the token source, is what reaches all of them without touching each file. #ff8080 measures 4.74:1 on --helm-surface (#343a40, the hardest of the three dark surfaces since it's the lightest), 6.36:1 on --helm-bg, 5.49:1 on --helm-surface-subtle, and 4.55:1 composited under the 10%- alpha danger tint pills (.helm-stat-trend.down, .helm-role-badge) -- all comfortably clear 4.5:1, unlike the old fix's #f1808a, which measured 4.4897:1 on --helm-surface: technically still a fail, just a narrow one. #4ecb71 (unchanged from the old icon-only fix) already cleared AA with margin -- 5.54:1 on --helm-surface, 5.03:1 under its tint pill -- so it is simply promoted from component-scoped to global here. --helm-warning is NOT re-pointed: it was never touched by dark mode at all, and #fdae61 already measures 6.25:1-8.38:1 across all three dark surfaces. Checked as part of this audit and found compliant. */ --helm-danger: #ff8080; --helm-success: #4ecb71; /* In dark mode the ink and the fill coincide: #fdae61 was measured at 6.25:1 to 8.38:1 across all three dark surfaces in the 2026-07-31 audit, so the light-mode ink (#96560a, which is only 1.99:1 on --helm-surface) must NOT carry over. Same pattern as --helm-danger and --helm-success. */ --helm-warning-ink: #fdae61; /* Same audit: --helm-primary as TEXT measured 1.02:1 on a dark card and --helm-accent needs to go back UP in dark (the light-mode ink is too dark against a dark surface). Verified worst-surface ratios: #8fb4e8 = 5.40:1, #3dd5f3 = 6.58:1, both on --helm-surface (#343a40), the lightest and therefore hardest of the three dark surfaces. The -fill tokens are deliberately NOT remapped: a solid brand fill under white text must stay dark in both themes. */ --helm-primary: #8fb4e8; --helm-primary-light: #8fb4e8; --helm-accent: #3dd5f3; } /* Score-band ink remap (bug 1186, recolored bug 1699). Several templates hardcode the score-band TEXT colors inline (statistics.html stat tiles, the _project_sidebar mini PCI tile). The "Good" ink #15803d (5.0:1 on white, chosen in app/scoring.py) still reads too dark against a near- black dark-theme card; the deep band hues fare little better. Re-point just those inline inks in dark via attribute selectors (inline styles need !important). The selectors are class-scoped so background:#15803d fill. */ [data-bs-theme="dark"] .stat-big-number[style*="#15803d"], [data-bs-theme="dark"] .fw-bold[style*="#15803d"] { color: #4ecb71 !important; } [data-bs-theme="dark"] .stat-big-number[style*="#b8a600"] { color: #e6d54a !important; } [data-bs-theme="dark"] .stat-big-number[style*="#e07000"] { color: #ffa14f !important; } [data-bs-theme="dark"] .stat-big-number[style*="#d73027"], [data-bs-theme="dark"] .fw-bold[style*="#d73027"] { color: #ff8080 !important; } [data-bs-theme="dark"] .stat-big-number[style*="#6610f2"] { color: #a97ff7 !important; } [data-bs-theme="dark"] .stat-big-number[style*="#e91e63"] { color: #f06292 !important; } /* #B45309 is a hardcoded warning-semantic amber used as TEXT ink at 20+ call sites across the app (invitations, CRM, product_admin, projects export, sidepanel...), NOT the --helm-warning token -- it exists because --helm-warning's own value (#fdae61) measures only 1.84:1 on white and fails AA as text, so it was hand-picked for light mode (verified 5.02:1 there per the comments in crm/dashboard.html and dashboard/platform.html) but never given a dark-mode counterpart. Found here via a live axe hit on /invitations (3.07:1 on a dark card). Fixing every one of those 20+ call sites is a larger, separate cleanup; this narrowly covers the one proven failure in scope for this pass (invitations/index.html's "Pending" status label) using the same #fdae61 already verified compliant in dark (6.25-8.38:1 across all three dark surfaces) for --helm-warning itself. */ [data-bs-theme="dark"] .fw-semibold[style*="#B45309"] { color: #fdae61 !important; } /* Icon tiles carry their tint and ink inline as var(--helm-*): navy ink at 1.6:1 on a dark card. Re-point the brand tokens on the tiles only, exactly as the home-dashboard fix (bug 1183) did page-scoped. --helm-success / --helm-danger used to be repointed here too (the original bug-1949-adjacent fix); removed because the [data-bs-theme= "dark"] body rule above now repoints both globally to the same values, so restating them per-component here was dead weight and, worse, the exact kind of per-component patch that let the global token drift unfixed everywhere else. */ /* Bootstrap's .bg-white is a LITERAL white, not a theme token, so in dark mode it keeps a white panel while the text inside inherits the dark theme's light ink. Measured on /response/: a .card-header.bg-white put #dee2e6 text on #ffffff at 1.30:1, which is invisible. 22 templates use it and none of them meant "white even in dark mode"; they meant "a plain surface". Map it to the theme surface here rather than editing 22 files, which also stops the next one from reintroducing the bug. A place that genuinely needs literal white in both themes should say so with an inline style. */ /* Bootstrap ships as #d63384, a pink tuned for a white page. On any tinted light surface it drops under AA (measured 3.88:1 on #e1f1f7 at /admin/products), and on a dark surface it is worse. Give it a token in both themes rather than leaving it to Bootstrap's default. */ code:not([class]) { color: #a02368; } [data-bs-theme="dark"] code:not([class]) { color: #f2a4c8; } [data-bs-theme="dark"] .bg-white { background-color: var(--helm-surface) !important; color: var(--helm-text); } [data-bs-theme="dark"] .helm-stat-icon, [data-bs-theme="dark"] .helm-action-icon { --helm-primary: #7da2d9; --helm-primary-light: #7da2d9; --helm-primary-dark: #7da2d9; --helm-accent: #3dd5f3; --helm-accent-warm: #ffa47e; background: rgba(255, 255, 255, 0.08) !important; } /* Generic dark-mode outline-button contrast fix (bug audit D2). Plain .btn-outline-primary / .btn-outline-secondary read their ink from Bootstrap's --bs-primary (#0d6efd) / --bs-secondary (#6c757d) button variables, both light-mode hues that were never remapped for dark: on a dark card (~#212529-#393f45) they land between 1.2:1 and 3.3:1, well under WCAG AA. The .universal-lsb override two rules below only ever covered the left-sidebar's outline-secondary buttons; every other outline button sitewide (Sequences builder/groups/enrollments/ identities/setup, Compliance retention, and beyond) inherited the unfixed default. Uses Bootstrap 5.3's button CSS-variable API so this composes with Bootstrap's own component instead of fighting its specificity, and is scoped to [data-bs-theme="dark"] only -- light mode (including any future per-firm --bs-primary branding override) is untouched. The .universal-lsb rule keeps winning inside the sidebar on specificity (three classes vs. one) and resolves to the same colors anyway, so this does not change the sidebar's already-fixed look. */ /* Ink raised from #93b4e0 to #9ec5fe (bug 1798). #93b4e0 measures 5.39:1 on the dark card in isolation, but an outline button sitting on a translucent surface composites down: axe measured 4.43:1 for the "Open Firm Profile" button inside the .alert-light on /admin/my-org. #9ec5fe is 6.50:1 flat and 5.48:1 through the same composite, so the headroom survives the blend. It is also the blue already used for data-view links in dark, so the two agree. */ [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #9ec5fe; --bs-btn-border-color: #9ec5fe; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--helm-primary, #1B3A6B); --bs-btn-hover-border-color: #9ec5fe; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--helm-primary, #1B3A6B); --bs-btn-active-border-color: #9ec5fe; --bs-btn-disabled-color: #9ec5fe; --bs-btn-disabled-border-color: #9ec5fe; } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #495057; --bs-btn-hover-border-color: #495057; --bs-btn-active-color: #fff; --bs-btn-active-bg: #495057; --bs-btn-active-border-color: #495057; --bs-btn-disabled-color: var(--bs-body-color); --bs-btn-disabled-border-color: var(--bs-border-color); } /* Light-mode outline-button contrast fix (SEQ-P2-01). Axe color-contrast fired on .btn-outline-primary/-secondary/-info across the whole Sequencer journey in LIGHT mode too, not just dark: Bootstrap's default --bs-primary ink (#0d6efd) on white measures ~4.48:1, just under the 4.5:1 AA text floor, and .btn-outline-info had no override anywhere -- default --bs-info (#0dcaf0) on white is ~1.9:1. Repoints outline-button ink at Helm's own high-contrast tokens (>=9:1 on white/subtle-surface), same CSS-variable API as the dark-mode fix above so hover/active/ disabled states stay consistent. Unscoped by size: buttons of any size use the same ink color, so .btn-sm is covered without a separate rule. */ .btn-outline-primary { --bs-btn-color: var(--helm-primary, #1B3A6B); --bs-btn-border-color: var(--helm-primary, #1B3A6B); --bs-btn-hover-bg: var(--helm-primary, #1B3A6B); --bs-btn-hover-border-color: var(--helm-primary, #1B3A6B); --bs-btn-active-bg: var(--helm-primary, #1B3A6B); --bs-btn-active-border-color: var(--helm-primary, #1B3A6B); --bs-btn-disabled-color: var(--helm-primary, #1B3A6B); --bs-btn-disabled-border-color: var(--helm-primary, #1B3A6B); } .btn-outline-secondary { --bs-btn-color: var(--helm-text-secondary, #374151); --bs-btn-border-color: var(--helm-text-secondary, #374151); --bs-btn-hover-bg: var(--helm-text-secondary, #374151); --bs-btn-hover-border-color: var(--helm-text-secondary, #374151); --bs-btn-active-bg: var(--helm-text-secondary, #374151); --bs-btn-active-border-color: var(--helm-text-secondary, #374151); --bs-btn-disabled-color: var(--helm-text-secondary, #374151); --bs-btn-disabled-border-color: var(--helm-text-secondary, #374151); } /* Helm has no --helm-info token, so info reuses Bootstrap 5.3's own AA-safe "emphasis" info colors (the same pair Bootstrap ships for .text-info-emphasis) rather than the raw --bs-info accent, which was never contrast-safe as text in either theme. */ .btn-outline-info { --bs-btn-color: #055160; --bs-btn-border-color: #055160; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #055160; --bs-btn-hover-border-color: #055160; --bs-btn-active-color: #fff; --bs-btn-active-bg: #055160; --bs-btn-active-border-color: #055160; --bs-btn-disabled-color: #055160; --bs-btn-disabled-border-color: #055160; } [data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: #6edff6; --bs-btn-border-color: #6edff6; --bs-btn-hover-color: #052c33; --bs-btn-hover-bg: #6edff6; --bs-btn-hover-border-color: #6edff6; --bs-btn-active-color: #052c33; --bs-btn-active-bg: #6edff6; --bs-btn-active-border-color: #6edff6; --bs-btn-disabled-color: #6edff6; --bs-btn-disabled-border-color: #6edff6; } /* warning/danger/success: same fix, found live on Enrollments (.btn-outline-warning in light, .btn-outline-danger in dark) once the primary/secondary/info sweep above was verified with axe -- the whole Bootstrap outline-button family shares this root cause, not just the three variants named in the original audit. Same Bootstrap 5.3 "-emphasis" AA-safe pairs used for info above. */ .btn-outline-warning { --bs-btn-color: #664d03; --bs-btn-border-color: #664d03; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #664d03; --bs-btn-hover-border-color: #664d03; --bs-btn-active-color: #fff; --bs-btn-active-bg: #664d03; --bs-btn-active-border-color: #664d03; --bs-btn-disabled-color: #664d03; --bs-btn-disabled-border-color: #664d03; } [data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #ffda6a; --bs-btn-border-color: #ffda6a; --bs-btn-hover-color: #40330b; --bs-btn-hover-bg: #ffda6a; --bs-btn-hover-border-color: #ffda6a; --bs-btn-active-color: #40330b; --bs-btn-active-bg: #ffda6a; --bs-btn-active-border-color: #ffda6a; --bs-btn-disabled-color: #ffda6a; --bs-btn-disabled-border-color: #ffda6a; } .btn-outline-danger { --bs-btn-color: #842029; --bs-btn-border-color: #842029; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #842029; --bs-btn-hover-border-color: #842029; --bs-btn-active-color: #fff; --bs-btn-active-bg: #842029; --bs-btn-active-border-color: #842029; --bs-btn-disabled-color: #842029; --bs-btn-disabled-border-color: #842029; } [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ea868f; --bs-btn-border-color: #ea868f; --bs-btn-hover-color: #3b0d10; --bs-btn-hover-bg: #ea868f; --bs-btn-hover-border-color: #ea868f; --bs-btn-active-color: #3b0d10; --bs-btn-active-bg: #ea868f; --bs-btn-active-border-color: #ea868f; --bs-btn-disabled-color: #ea868f; --bs-btn-disabled-border-color: #ea868f; } .btn-outline-success { --bs-btn-color: #0a3622; --bs-btn-border-color: #0a3622; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0a3622; --bs-btn-hover-border-color: #0a3622; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0a3622; --bs-btn-active-border-color: #0a3622; --bs-btn-disabled-color: #0a3622; --bs-btn-disabled-border-color: #0a3622; } [data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #75b798; --bs-btn-border-color: #75b798; --bs-btn-hover-color: #0a2e1c; --bs-btn-hover-bg: #75b798; --bs-btn-hover-border-color: #75b798; --bs-btn-active-color: #0a2e1c; --bs-btn-active-bg: #75b798; --bs-btn-active-border-color: #75b798; --bs-btn-disabled-color: #75b798; --bs-btn-disabled-border-color: #75b798; } /* Override Bootstrap's gray text utilities for better contrast */ .text-muted { color: var(--helm-text-muted) !important; } .text-secondary { color: var(--helm-text-secondary) !important; } .text-body-secondary { color: var(--helm-text-secondary) !important; } body { font-family: var(--helm-font); background: var(--helm-bg); color: var(--helm-text); -webkit-font-smoothing: antialiased; } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--helm-font); font-weight: 600; letter-spacing: -0.01em; } /* ---- Cards: elevated, clean ---- */ .card { border: 1px solid var(--helm-border); border-radius: 12px; box-shadow: var(--helm-shadow-sm); transition: box-shadow var(--helm-transition), transform var(--helm-transition); } .card:hover { box-shadow: var(--helm-shadow); } .card .card-header { border-radius: 12px 12px 0 0; } /* ---- Stat cards (KPI style) ---- */ .helm-stat-card { background: var(--helm-surface); border: 1px solid var(--helm-border); border-radius: 12px; padding: 1.25rem; position: relative; overflow: hidden; transition: box-shadow var(--helm-transition), transform var(--helm-transition); } .helm-stat-card:hover { box-shadow: var(--helm-shadow); transform: translateY(-1px); } .helm-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .helm-stat-card.accent-primary::before { background: var(--helm-primary-fill); } .helm-stat-card.accent-success::before { background: var(--helm-success); } .helm-stat-card.accent-warning::before { background: var(--helm-warning); } .helm-stat-card.accent-danger::before { background: var(--helm-danger); } .helm-stat-card.accent-cyan::before { background: var(--helm-accent-fill); } .helm-stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .helm-stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .helm-stat-label { font-size: 0.8rem; font-weight: 500; color: var(--helm-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; } .helm-stat-trend { font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 999px; } .helm-stat-trend.up { color: var(--helm-success); background: rgba(26, 150, 65, 0.1); } .helm-stat-trend.down { color: var(--helm-danger); background: rgba(215, 48, 39, 0.1); } /* Sub-caption under a KPI value (context line: "of 842 segments", etc.). */ .helm-stat-sub { font-size: 0.8rem; line-height: 1.3; color: var(--helm-text-muted); margin-top: 0.25rem; } /* Sparkline holder. Fixed height so the inline Chart.js canvas cannot grow the card; bare by design (no axes/grid/legend per the restraint rules). */ .helm-kpi-spark { height: 36px; margin-top: 0.5rem; } .helm-kpi-spark canvas { width: 100% !important; height: 36px !important; display: block; } /* ---- Section headers ---- */ .helm-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--helm-border); } .helm-section-title { font-size: 1rem; font-weight: 600; color: var(--helm-text); margin: 0; } /* ---- Score gauge (circular) ---- */ .helm-score-gauge { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: white; position: relative; } .helm-score-gauge::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.3); } /* ---- Activity timeline ---- */ .helm-timeline-item { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--helm-border); } .helm-timeline-item:last-child { border-bottom: none; } .helm-timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--helm-accent-fill); margin-top: 0.5rem; flex-shrink: 0; } .helm-timeline-content { font-size: 0.875rem; } .helm-timeline-time { font-size: 0.75rem; color: var(--helm-text-muted); } /* ---- Tables: cleaner ---- */ .table { font-size: 0.875rem; } .table thead th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--helm-text-secondary); border-bottom: 2px solid var(--helm-border); padding: 0.75rem; } .table tbody td { padding: 0.75rem; vertical-align: middle; } /* ---- Score bar (inline in tables) ---- */ .helm-score-bar { display: flex; align-items: center; gap: 0.5rem; } .helm-score-bar-track { flex: 1; height: 6px; background: var(--helm-surface-subtle); border-radius: 3px; overflow: hidden; } .helm-score-bar-fill { height: 100%; border-radius: 3px; transition: width var(--helm-transition); } .helm-score-bar-value { font-size: 0.8rem; font-weight: 600; font-family: var(--helm-font-mono); min-width: 2.5rem; text-align: right; } /* ---- Badges ---- */ .badge { font-weight: 500; letter-spacing: 0.02em; } /* ---- Buttons ---- */ .btn { font-weight: 500; border-radius: 8px; transition: all var(--helm-transition); } /* Keyboard focus must be VISIBLE on every button (WCAG 2.4.7). Bootstrap's .btn:focus-visible sets outline: 0 (beating app.css's global :focus-visible rule on specificity) and relies on its box-shadow ring, which computes fully transparent here, so a Tab-focused button showed nothing at all (found on the CRM org action row, bug 2138). The ink accent carries 4.8:1 on light surfaces; the fill accent 6.9:1 on dark. */ .btn:focus-visible { outline: 3px solid var(--helm-accent, #00757F); outline-offset: 2px; box-shadow: none; } [data-bs-theme="dark"] .btn:focus-visible { outline-color: var(--helm-accent-fill, #00BCD4); } /* ---- Sidebar enhancements ---- */ .sidebar .nav-link { font-size: 0.875rem; font-weight: 500; border-radius: 8px; margin-bottom: 2px; padding: 0.5rem 0.75rem; } .sidebar .nav-link:hover { background: var(--helm-surface-subtle); } .sidebar .nav-link.active { background: rgba(27, 58, 107, 0.08); /* --helm-primary is a FILL token and stays navy in dark, so the active row read as navy-on-charcoal: axe measured #1b3a6b on the composited tint #2a3139 at 1.16:1, the worst node left in the sweep, on /admin/team, /admin/my-org and /admin/my-plan (bug 1798). --helm-ink-brand is the same navy in light (10.03:1 on the light tint, so nothing visibly changes there) and the light-blue accent in dark (5.60:1 on #2a3139). */ color: var(--helm-ink-brand, #1B3A6B); font-weight: 600; } /* LSP active highlight: always the header navy (--helm-primary), regardless of the per-firm branding --bs-primary. Unifies every left sidebar's active item so none renders the lighter branding blue (bugs #833, #851). Covers every sidebar: the universal and CRM sidebars mark the active row with `.btn-primary` + aria-current="page"; the projects sidebar (project-lsb) marks it with `.btn-primary` alone. Inside `.sidebar` the only `.btn-primary` is the active nav row (inactive rows are `.btn-outline-secondary`), so a broad selector is safe and makes the navy truly application-wide. */ .sidebar .btn.btn-primary { background-color: var(--helm-primary-fill) !important; border-color: var(--helm-primary) !important; color: #fff !important; } .sidebar .btn.btn-primary:hover, .sidebar .btn.btn-primary:focus { background-color: var(--helm-primary-dark) !important; border-color: var(--helm-primary-dark) !important; color: #fff !important; } /* ---- Page wrapper ---- */ .helm-page { padding: var(--helm-page-padding); } .helm-page-header { margin-bottom: 1.5rem; } .helm-page-title { font-size: 1.5rem; font-weight: 700; margin: 0; } .helm-page-subtitle { font-size: 0.875rem; color: var(--helm-text-secondary); margin-top: 0.25rem; } /* ---- Empty states ---- */ .helm-empty-state { text-align: center; padding: 3rem 2rem; } .helm-empty-state-icon { font-size: 3rem; color: var(--helm-text-muted); margin-bottom: 1rem; } .helm-empty-state-title { font-size: 1.1rem; font-weight: 600; color: var(--helm-text); margin-bottom: 0.5rem; } .helm-empty-state-text { color: var(--helm-text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; } /* ---- Skeleton loading ---- */ .helm-skeleton { background: linear-gradient(90deg, var(--helm-surface-subtle) 25%, var(--helm-bg) 50%, var(--helm-surface-subtle) 75%); background-size: 200% 100%; animation: helm-shimmer 1.5s infinite; border-radius: 6px; } @keyframes helm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---- Navbar refinement ---- */ .navbar { backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); } /* ---- Data source status dots ---- */ .helm-status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .helm-status-dot.fresh { background: var(--helm-success); box-shadow: 0 0 0 2px rgba(26,150,65,0.2); } .helm-status-dot.stale { background: var(--helm-warning); box-shadow: 0 0 0 2px rgba(253,174,97,0.2); } .helm-status-dot.error { background: var(--helm-danger); box-shadow: 0 0 0 2px rgba(215,48,39,0.2); } .helm-status-dot.unknown { background: var(--helm-text-muted); } /* ---- Quick-action cards ---- */ .helm-action-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.25rem 0.75rem; border-radius: 10px; border: 1px solid var(--helm-border); background: var(--helm-surface); color: var(--helm-text); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all var(--helm-transition); text-align: center; } .helm-action-card:hover { border-color: var(--helm-primary); box-shadow: var(--helm-shadow); color: var(--helm-primary); transform: translateY(-2px); } .helm-action-card .helm-action-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } /* ---- Condition bar chart (horizontal stacked) ---- */ .helm-condition-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; } .helm-condition-label { min-width: 70px; font-size: 0.8rem; font-weight: 600; } .helm-condition-bar-wrap { flex: 1; height: 8px; background: var(--helm-surface-subtle); border-radius: 4px; overflow: hidden; } .helm-condition-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; } .helm-condition-count { min-width: 40px; text-align: right; font-size: 0.8rem; font-weight: 600; font-family: var(--helm-font-mono); } /* ---- Data source grid ---- */ .helm-fetcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; } .helm-fetcher-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--helm-surface-subtle); border-radius: 8px; font-size: 0.8rem; font-weight: 500; } /* ---- Map preview container ---- */ .helm-map-preview { height: 280px; border-radius: 10px; overflow: hidden; border: 1px solid var(--helm-border); } .helm-map-preview .leaflet-container { height: 100%; width: 100%; } /* ---- Role badge ---- */ .helm-role-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .helm-role-badge.role-platform_admin { background: rgba(215,48,39,0.1); color: var(--helm-danger); } .helm-role-badge.role-firm_admin { background: rgba(27,58,107,0.1); color: var(--helm-primary); } .helm-role-badge.role-project_manager{ background: rgba(0,188,212,0.1); color: #0097A7; } .helm-role-badge.role-inspector { background: rgba(26,150,65,0.1); color: var(--helm-success); } .helm-role-badge.role-viewer { background: rgba(107,114,128,0.1);color: var(--helm-text-secondary); } /* Flex-shrink helper: lets a flex child shrink below its content width so `text-truncate` works inside it. Several templates rely on this class (marketplace tiles, admin index, CRM dashboard); Bootstrap 5 doesn't ship it, so it's defined here. */ .min-w-0 { min-width: 0 !important; } /* ── Robocist-only feature marker ──────────────────────────────────── Applied to nav items and breadcrumb entries that are restricted to Robocist staff (rt_sales+). Only renders for Robocist users; clients never see the symbol or the highlight because the menu entry itself isn't sent to them. The highlight is intentionally subtle so it reads as "exclusive" rather than "warning". */ /* ── Universal LSP sidebar buttons ─────────────────────────────────── Override Bootstrap's outline-secondary defaults so the text stays readable on the light bg-body-tertiary sidebar in every state. */ .universal-lsb .btn.btn-outline-secondary { color: var(--helm-text, #1f2937); border-color: rgba(0, 0, 0, 0.12); background: #fff; } .universal-lsb .btn.btn-outline-secondary:hover, .universal-lsb .btn.btn-outline-secondary:focus-visible { background: var(--helm-primary-fill, #1B3A6B); border-color: var(--helm-primary, #1B3A6B); color: #fff; } .universal-lsb .btn.btn-primary { background: var(--helm-primary-fill, #1B3A6B); border-color: var(--helm-primary, #1B3A6B); color: #fff; } .universal-lsb .btn.btn-primary:hover, .universal-lsb .btn.btn-primary:focus-visible { background: var(--helm-primary-dark, #0F2544); border-color: var(--helm-primary-dark, #0F2544); color: #fff; } /* Inline help "?" icon next to each row. Was an inline style on the button (bug #1179); moved here so the dark theme can override it. Same value light mode has always had. */ .universal-lsb .rt-lsp-help { color: rgba(0, 0, 0, 0.45); } /* Robocist-only locked items: dark amber text on the amber tint at rest so it reads, dark text on a stronger amber on hover, and the active state keeps the helm-primary fill (dark blue) with an amber border so the lock context is still visible. */ .helm-nav-locked .btn.is-locked { position: relative; color: #7c4a03; /* dark amber */ background-color: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.45); /* Lock and label share a single line; label truncates if too long. */ white-space: nowrap; overflow: hidden; } .helm-nav-locked .btn.is-locked > span { flex-wrap: nowrap; } .helm-nav-locked .btn.is-locked:hover, .helm-nav-locked .btn.is-locked:focus-visible { color: #5a3300; background-color: rgba(245, 158, 11, 0.22); border-color: rgba(245, 158, 11, 0.65); } .helm-nav-locked .btn.is-locked.btn-primary { /* Active locked page: dark blue fill, amber border, white text. */ color: #fff; background: var(--helm-primary-fill, #1B3A6B); border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) inset; } .helm-nav-locked .btn.is-locked.btn-primary:hover, .helm-nav-locked .btn.is-locked.btn-primary:focus-visible { background: var(--helm-primary-dark, #0F2544); border-color: #f59e0b; color: #fff; } /* Dark theme LSP (bug #1179). The panel background already flips via Bootstrap's bg-body-tertiary, but the rules above hardcode light-theme colors: white item buttons, near-black inherited text, grey #4B5563 group labels, dark-amber locked rows, and a black-alpha help icon. All unreadable on the dark panel. These overrides are scoped to [data-bs-theme="dark"] so light mode is untouched. */ [data-bs-theme="dark"] .universal-lsb { /* The h6 group header and any other inherited text would otherwise keep the light theme's near-black --helm-text from body. */ color: var(--bs-body-color); } [data-bs-theme="dark"] .universal-lsb .btn.btn-outline-secondary { color: var(--bs-body-color); border-color: var(--bs-border-color); background: var(--bs-body-bg); } [data-bs-theme="dark"] .universal-lsb .btn.btn-outline-secondary:hover, [data-bs-theme="dark"] .universal-lsb .btn.btn-outline-secondary:focus-visible { /* Same brand-blue fill as light mode; white on #1B3A6B is 10.5:1. */ background: var(--helm-primary-fill, #1B3A6B); border-color: var(--helm-primary-light, #2A4F8F); color: #fff; } /* Section labels ("PIPELINE", "MORE") and drawer toggles use .text-muted, which the global override above pins to #4B5563 (!important), 2.4:1 on the dark panel. Re-pin to Bootstrap's dark gray-500 (5.9:1 on #2b3035). */ [data-bs-theme="dark"] .universal-lsb .text-muted, [data-bs-theme="dark"] .universal-lsb .lsp-drawer-toggle { color: #adb5bd !important; } /* Inline help "?" icons: light mode uses black-alpha, invisible on the dark panel. */ [data-bs-theme="dark"] .universal-lsb .rt-lsp-help { color: rgba(255, 255, 255, 0.55); } /* Locked (Robocist-only) rows: dark-amber-on-amber-tint from the light theme drops below 2:1 on the dark panel. Flip to light amber text on the same subtle tint (7.7:1 at rest, 7.1:1 on hover). */ [data-bs-theme="dark"] .helm-nav-locked .btn.is-locked { color: #fcd34d; background-color: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.40); } [data-bs-theme="dark"] .helm-nav-locked .btn.is-locked:hover, [data-bs-theme="dark"] .helm-nav-locked .btn.is-locked:focus-visible { color: #ffe08a; background-color: rgba(245, 158, 11, 0.20); border-color: rgba(245, 158, 11, 0.65); } /* Active locked page keeps the light theme's treatment (brand-blue fill, amber border, white text), restated here because the generic dark .is-locked rule above would otherwise repaint it amber. */ [data-bs-theme="dark"] .helm-nav-locked .btn.is-locked.btn-primary { color: #fff; background: var(--helm-primary-fill, #1B3A6B); border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) inset; } [data-bs-theme="dark"] .helm-nav-locked .btn.is-locked.btn-primary:hover, [data-bs-theme="dark"] .helm-nav-locked .btn.is-locked.btn-primary:focus-visible { background: var(--helm-primary-dark, #0F2544); border-color: #f59e0b; color: #fff; } /* ── Robocist lock marking: one amber language across every surface ── The LSP rows above set the pattern (lock glyph + gold-amber tint). These classes extend it to the top-nav tabs, the launcher grid, the mobile offcanvas, and the assessment-type tabs so staff read the same signal everywhere. Display marking only; never an access control. */ /* Top-nav persona tabs. The navbar is brand-blue (#1B3A6B) in both themes, so one rule serves light and dark: light amber text (7.5:1 on the blue) over a subtle amber tint. */ .rt-topnav-link.helm-topnav-locked { color: #fcd34d; background-color: rgba(245, 158, 11, 0.14); border-radius: 6px 6px 0 0; } .rt-topnav-link.helm-topnav-locked:hover, .rt-topnav-link.helm-topnav-locked:focus-visible { color: #ffe08a; background-color: rgba(245, 158, 11, 0.24); } .rt-topnav-link.helm-topnav-locked.active { color: #ffe08a; } .helm-topnav-lock-ico { color: #fcd34d; } /* Launcher grid tiles (was inline styles; moved here so the dark theme can restyle). Light: dark amber on the amber tint, same recipe as the LSP rows. */ .helm-launcher-locked { color: #7c4a03 !important; background-color: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.40); } .helm-launcher-locked:hover, .helm-launcher-locked:focus-visible { color: #5a3300 !important; background-color: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.60); } [data-bs-theme="dark"] .helm-launcher-locked { color: #fcd34d !important; } [data-bs-theme="dark"] .helm-launcher-locked:hover, [data-bs-theme="dark"] .helm-launcher-locked:focus-visible { color: #ffe08a !important; } /* Launcher editor (bug #2233): reorder / remove / pin any reachable page, and mark one entry as the default landing page. All of it lives inside the existing waffle dropdown so no page gains any new chrome. Star color matches .admin-tile-fav's landing-page/favorite language elsewhere in the app (#f59e0b) so the same icon means the same thing everywhere a user sees it. */ /* a11y fix (bug #2233 audit): Bootstrap's default .dropdown-header color (--bs-secondary-color, ~#6c757d) measures 3.29:1 against the dark-theme dropdown background (#212529) — a WCAG AA failure for normal text (needs 4.5:1). Not specific to the launcher: every dropdown-header on the site inherits this in dark theme (the partner firm-switcher's "Viewing as" label is the other example), so the fix is global, not scoped to the launcher panel. #adb5bd measures 7.43:1. */ [data-bs-theme="dark"] .dropdown-header { color: #adb5bd !important; } .helm-launcher-tile { position: relative; } .helm-launcher-tile:hover, .helm-launcher-tile:focus-visible { background: var(--helm-surface-subtle); } .helm-launcher-star { position: absolute; top: 2px; right: 6px; font-size: 0.65rem; color: #f59e0b; } .helm-launcher-edit-toggle { color: var(--helm-text-secondary); font-size: 0.78rem; } .helm-launcher-edit-toggle:hover, .helm-launcher-edit-toggle:focus-visible { color: var(--helm-primary); } .helm-launcher-pinbar { background: var(--helm-surface-subtle); border: 1px solid var(--helm-border); border-radius: 8px; padding: 8px 10px; } [data-bs-theme="dark"] .helm-launcher-pinbar { background: var(--bs-tertiary-bg); } .helm-launcher-list { max-height: 260px; overflow-y: auto; } .helm-launcher-row { border-bottom: 1px solid var(--helm-border); } .helm-launcher-row:last-child { border-bottom: none; } .helm-launcher-results { max-height: 180px; overflow-y: auto; } .btn-xs { padding: 0.12rem 0.4rem; font-size: 0.72rem; line-height: 1.5; border-radius: 6px; } .btn-icon { padding: 0.12rem 0.4rem; border: 1px solid var(--helm-border); background: var(--helm-surface); color: var(--helm-text-secondary); } .btn-icon:hover:not(:disabled) { background: var(--helm-surface-subtle); color: var(--helm-text); } .btn-icon:disabled { opacity: 0.35; } .helm-launcher-star-btn.is-landing { color: #f59e0b; border-color: rgba(245, 158, 11, 0.5); } .helm-launcher-star-btn:hover:not(:disabled) { color: #f59e0b; } /* Mobile offcanvas rows and group headers. */ .helm-mobile-locked { color: #7c4a03 !important; background-color: rgba(245, 158, 11, 0.12); border-radius: 8px; } .helm-mobile-locked:hover, .helm-mobile-locked:focus-visible { color: #5a3300 !important; background-color: rgba(245, 158, 11, 0.22); } [data-bs-theme="dark"] .helm-mobile-locked { color: #fcd34d !important; background-color: rgba(245, 158, 11, 0.10); } [data-bs-theme="dark"] .helm-mobile-locked:hover, [data-bs-theme="dark"] .helm-mobile-locked:focus-visible { color: #ffe08a !important; background-color: rgba(245, 158, 11, 0.20); } /* Accordion buttons carry their own background; only tint, never repaint the expanded state's chevron color. */ .accordion-button.helm-mobile-locked:not(.collapsed) { box-shadow: inset 0 -1px 0 rgba(245, 158, 11, 0.40); } /* Assessment-type tabs: project detail's segment panel (.nav-tabs .nav-link) and the statistics tab row (.tab-button). The lock glyph carries the meaning; amber makes it scannable. Wins over the text-muted "no data on this segment" grey so the staff signal is never washed out. */ .nav-tabs .nav-link.helm-tab-locked, .tab-button.helm-tab-locked { color: #7c4a03 !important; background-color: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.45); } /* :not(.active) keeps the statistics tab-button's blue active fill (white text) from being repainted light-amber-under-white on hover. */ .nav-tabs .nav-link.helm-tab-locked:hover, .nav-tabs .nav-link.helm-tab-locked:focus-visible, .tab-button.helm-tab-locked:not(.active):hover, .tab-button.helm-tab-locked:not(.active):focus-visible { color: #5a3300 !important; background-color: rgba(245, 158, 11, 0.20); border-color: rgba(245, 158, 11, 0.65); } /* Active locked tab: keep the active affordance, add the amber frame. */ .nav-tabs .nav-link.helm-tab-locked.active, .tab-button.helm-tab-locked.active { border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) inset; } /* The statistics tab-button paints its active state brand-blue with white text (page-local