/* ========================================================================== CRM DESIGN TOKENS (crm-tokens.css) -------------------------------------------------------------------------- The single source of truth for CRMPro's app-owned design language. Loaded AFTER the vendored Falcon theme.css and BEFORE site.css (see Pages/Shared/Admin/Layouts/_css.cshtml), so it can: 1. Correct/override Falcon primitives (e.g. the --falcon-primary-rgb bug). 2. Expose a semantic --crm-* layer that maps onto Falcon primitives, so pages reference INTENT (brand / surface / ink / status / elevation / z-index) instead of raw hex. RULES (enforced by stylelint — see .stylelintrc.json): • Pages and components must use var(--crm-*) / var(--falcon-*) — never a raw hex literal. • z-index must come from the --z-* scale below — never a magic number. Because these tokens are built on theme-aware --falcon-* variables, anything consuming them adapts to light/dark mode automatically. ========================================================================== */ :root, [data-bs-theme="light"] { /* ── Fix: Falcon shipped --falcon-primary #16537e (navy) but left --falcon-primary-rgb at the stock 44,123,229 (#2c7be5 blue). That made every rgba(var(--falcon-primary-rgb), …) render the WRONG blue. Correct it to the navy's RGB so tinted primaries match the brand. ── */ --falcon-primary-rgb: 21, 83, 126; /* ── Brand ──────────────────────────────────────────────────────────── */ --crm-brand: var(--falcon-primary); /* #16537e navy */ --crm-brand-rgb: 21, 83, 126; --crm-brand-deep: var(--falcon-gray-1100); /* #0b1727 deep navy */ --crm-brand-contrast: #fff; --crm-brand-link: #93c5fd; /* links on dark band */ /* Signature brand gradients (the app's navy identity: deep → brand). */ --crm-gradient-brand: linear-gradient(135deg, var(--crm-brand-deep) 0%, var(--crm-brand) 100%); --crm-gradient-brand-h: linear-gradient(90deg, var(--crm-brand-deep), var(--crm-brand)); /* Links on the page surface, readable in both themes (Falcon's dark link colour is the navy brand on a navy page). An alias only: light = the brand, dark = the existing light brand ink. */ --crm-link: var(--crm-brand); /* ── Semantic surfaces & ink (theme-aware through Falcon primitives) ─── */ /* --falcon-card-bg is declared ON .card, not on :root, so referencing it here always fell through to the #fff fallback - making --crm-surface white in BOTH themes and silently non-theme-aware for every component built on it. Falcon's root-level equivalent is --falcon-emphasis-bg (#fff light / #121e2d dark), which is exactly what .card maps --falcon-card-bg to. */ --crm-surface: var(--falcon-emphasis-bg, var(--falcon-card-bg, #fff)); --crm-surface-2: var(--falcon-gray-100, #f9fafd); --crm-surface-3: var(--falcon-gray-200, #edf2f9); --crm-surface-tint: rgba(var(--crm-brand-rgb), 0.06); --crm-surface-border: rgba(var(--crm-brand-rgb), 0.18); /* Ink on a FILLED accent - a status chip, a gradient badge, a coloured banner. Deliberately constant in both themes and deliberately NOT --crm-surface: a surface flips with the theme, but white text on a saturated fill must not, or every badge in the app becomes unreadable in dark mode. Pages carried 99 raw #fff literals for this one job before it had a name. */ --crm-on-accent: #fff; --crm-ink: var(--falcon-gray-1100, #0b1727); --crm-ink-strong: var(--falcon-gray-900, #344050); --crm-ink-muted: var(--falcon-gray-700, #5e6e82); --crm-ink-faint: var(--falcon-gray-600, #748194); --crm-rule: var(--falcon-gray-300, #d8e2ef); --crm-rule-soft: var(--falcon-gray-200, #edf2f9); /* ── Status (map onto Falcon semantics) ─────────────────────────────── */ --crm-success: var(--falcon-success); /* #00d27a */ --crm-danger: var(--falcon-danger); /* #e63757 */ --crm-warning: var(--falcon-warning); /* #f5803e */ --crm-info: var(--falcon-info); /* #27bcfd */ --crm-success-rgb: var(--falcon-success-rgb); --crm-danger-rgb: var(--falcon-danger-rgb); --crm-warning-rgb: var(--falcon-warning-rgb); --crm-info-rgb: var(--falcon-info-rgb); /* Gradient status badges (the .badge-status-* look, centralised). */ --crm-grad-success: linear-gradient(135deg, #00d27a, #00b86b); --crm-grad-danger: linear-gradient(135deg, #e63757, #d02a4a); --crm-grad-warning: linear-gradient(135deg, #f5803e, #e8721c); /* Deep status shades — the darker stop of the gradients above; used standalone for hover/active states and the "…deep" badge variants. */ --crm-success-deep: #00b86b; --crm-danger-deep: #d02a4a; --crm-warning-deep: #e8721c; /* Soft status tints — subtle fills for badge/callout backgrounds. Alpha over the status RGB so they stay in sync with the base colour. */ --crm-success-soft: rgba(var(--crm-success-rgb), 0.12); --crm-danger-soft: rgba(var(--crm-danger-rgb), 0.12); --crm-warning-soft: rgba(var(--crm-warning-rgb), 0.12); --crm-info-soft: rgba(var(--crm-info-rgb), 0.12); /* ── Elevation ──────────────────────────────────────────────────────── */ --crm-shadow-sm: 0 1px 2px rgba(11, 23, 39, 0.06); --crm-shadow: 0 2px 8px rgba(11, 23, 39, 0.08); --crm-shadow-lg: 0 8px 36px rgba(11, 23, 39, 0.18); /* ── Radius ─────────────────────────────────────────────────────────── */ --crm-radius-sm: 6px; --crm-radius: 10px; /* A device screen rendered inside the app (e.g. the push-notification preview). Deliberately CONSTANT across themes: it depicts a handset's notification shade, not our own chrome, so it must not invert with the app theme. Restated verbatim in the dark block below so a future token sweep cannot accidentally flip it. */ --crm-device-shell: #0b1727; --crm-radius-lg: 14px; --crm-radius-pill: 20px; /* ── Motion ─────────────────────────────────────────────────────────── */ --crm-ease: cubic-bezier(0.4, 0, 0.2, 1); --crm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-INDEX SCALE ────────────────────────────────────────────────────── Bootstrap-aligned single source of truth for stacking order. The whole "dropdown hides behind a card / sticky header" class of bugs came from ad-hoc magic numbers (1..10 locally, 9999 in pages, 1075/1080/1090 in site.css) colliding with Bootstrap's native scale. Use these tokens and the order is guaranteed. In-content sticky headers (table thead, form bars) stay BELOW floating menus on purpose, so an open dropdown always clears them. ── */ --z-negative: -1; --z-base: 1; --z-raised: 2; --z-sticky-header: 3; /* in-content sticky table/form headers */ --z-dropdown: 1000; /* Bootstrap .dropdown-menu / Choices menu */ --z-mobile-nav-backdrop: 1018; /* phone menu backdrop: under Falcon's fixed menu (1019) and sticky top bar (1020), so the hamburger stays tappable to close it */ --z-open-control: 1016; /* the container of an OPEN searchable select: above Falcon's .sticky-sidebar (1015, a card under the form on a phone), below the sticky top bar */ --z-sticky: 1020; /* Bootstrap .sticky-top (page-level bars) */ --z-fixed: 1030; --z-offcanvas-backdrop: 1040; --z-offcanvas: 1045; --z-modal-backdrop: 1050; --z-modal: 1055; --z-popover: 1070; --z-tooltip: 1080; --z-command-palette: 1085; --z-toast: 1090; /* ── Sticky offset ────────────────────────────────────────────────────── .navbar-top is `position: sticky; top: 0; z-index: 1020` (theme.css). Every in-content sticky element must therefore stick BELOW it, not at viewport 0 — otherwise both occupy the same band and, because the navbar wins on z-index, the page heading / table head / toolbar slides underneath it and the two visibly overlap on scroll. Use `top: var(--crm-sticky-offset)` for anything sticky inside .content. Never `top: 0`. The nav is taller on the double-top-nav layout, so this tracks --falcon-top-nav-height rather than hard-coding a pixel value. */ --crm-sticky-offset: var(--falcon-top-nav-height, 4.3125rem); /* Second tier — for an element that must sit below BOTH the navbar and a sticky page header (e.g. a table head under a sticky toolbar). */ --crm-sticky-offset-2: calc(var(--crm-sticky-offset) + 3.25rem); } /* ── Dark-mode refinements ────────────────────────────────────────────────── Most --crm-* tokens flip automatically because they resolve to --falcon-* primitives that theme.css redefines under [data-bs-theme=dark]. Only the few tokens carrying literal alpha/brand values need a dark restatement. */ [data-bs-theme="dark"] { --falcon-primary-rgb: 21, 83, 126; /* Same value as light on purpose - see the note on the token above. */ --crm-device-shell: #0b1727; --crm-link: var(--crm-brand-link); --crm-surface-tint: rgba(255, 255, 255, 0.05); --crm-surface-border: rgba(255, 255, 255, 0.10); --crm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --crm-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --crm-shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.55); } /* ── Platform shared token names (v2026.10.12) ───────────────────────────── The SACC shared components (SACC_PLATFORM_SHARED_COMPONENTS.md) are byte-identical across ERP 2.0, TCYFleet and CFund and read THOSE products' token names, falling back to literals. The CRM uses them unchanged (first: timeline.css, D2), so the names are mapped here onto the --crm-* layer, which flips with the theme. Restated on every [data-bs-theme] scope so a nested theme recomputes them. Alias only - never give one of these a value of its own here; change the --crm-* token instead. */ :root, [data-bs-theme] { --surface-card-bg: var(--crm-surface); --surface-card-border: var(--crm-rule); --surface-card-header: var(--crm-surface-2); --surface-section-header-bg: var(--crm-surface-2); --surface-table-head-bg: var(--crm-surface-2); --surface-table-hover: var(--crm-surface-tint); --surface-input-bg: var(--crm-surface); --surface-text: var(--crm-ink); --surface-text-strong: var(--crm-ink-strong); --surface-text-muted: var(--crm-ink-muted); --surface-warn-bg: var(--crm-warning-soft); --surface-warn-text: var(--crm-warning-deep); --surface-warn-border: var(--crm-warning); --status-info: var(--crm-info); --status-success: var(--crm-success); --status-warning: var(--crm-warning); --status-danger: var(--crm-danger); --brand-primary: var(--crm-brand); --color-action: var(--crm-brand); --text-on-brand: var(--crm-on-accent); }