/* ========================================================================== PayChain MIS — IDENTITY LAYER (BCDF Enterprise extension) -------------------------------------------------------------------------- The enterprise layer is deliberately monochrome: one accent, spent on action. That discipline is right for money and status — and wrong for WAYFINDING. With sixteen navigation items rendered in the same 78%-white, a clerk cannot tell Wallets from Audit trail at a glance, and every screen looks like every other screen. This file adds ONE thing the enterprise layer is missing: a small identity palette used for ICONOGRAPHY AND PLACE — never for action, never for state. · Identity hue → "where am I": nav chips, page medallions, entity avatars, section icons. Carries no meaning beyond location. · Accent (teal) → "you can click this". Unchanged. · Semantic → success / warning / danger / info. Unchanged, and still always paired with an icon and a label. The rule that keeps the two from fighting: an identity hue never appears on a control, a figure, a status, or a background larger than a 28px chip. If you are about to paint a button or a balance with one, you are doing it wrong. Every hue is duplicated for dark mode at the bottom of the file. ========================================================================== */ .theme-enterprise, :root { /* ── Identity hues ────────────────────────────────────────────────────── Deliberately NOT teal: teal is the action accent, and a teal icon that is not clickable breaks the system's one promise. Deliberately not pure red/green either — those are reserved for state. Each hue ships three values: -ink (on light surfaces, ≥4.5:1 on white), -soft (on the ink-navy sidebar, ≥7:1 on #102A43) and -bg (the chip wash). */ --cp-id-sky-ink: #0B6E9B; --cp-id-sky-soft: #7CCDF0; --cp-id-sky-bg: #E4F4FC; --cp-id-indigo-ink: #3B4FCB; --cp-id-indigo-soft: #A3B2FA; --cp-id-indigo-bg: #EBEEFE; --cp-id-violet-ink: #6B47C6; --cp-id-violet-soft: #C0AEF8; --cp-id-violet-bg: #F1ECFE; --cp-id-amber-ink: #8A5A00; --cp-id-amber-soft: #F7C766; --cp-id-amber-bg: #FDF3E0; --cp-id-emerald-ink: #05745A; --cp-id-emerald-soft: #6FD9BC; --cp-id-emerald-bg: #E3F7F1; --cp-id-rose-ink: #B03B63; --cp-id-rose-soft: #F4A8C0; --cp-id-rose-bg: #FDEBF1; --cp-id-slate-ink: #4E5D77; --cp-id-slate-soft: #AEBACD; --cp-id-slate-bg: #EEF1F6; /* Module assignment — one hue per navigation group (design brief §3 IA). Staff learn the colour of a group, not of sixteen items. */ --cp-mod-overview: var(--cp-id-sky-ink); --cp-mod-overview-soft: var(--cp-id-sky-soft); --cp-mod-overview-bg: var(--cp-id-sky-bg); --cp-mod-work: var(--cp-id-amber-ink); --cp-mod-work-soft: var(--cp-id-amber-soft); --cp-mod-work-bg: var(--cp-id-amber-bg); --cp-mod-inst: var(--cp-id-indigo-ink); --cp-mod-inst-soft: var(--cp-id-indigo-soft); --cp-mod-inst-bg: var(--cp-id-indigo-bg); --cp-mod-money: var(--cp-id-emerald-ink); --cp-mod-money-soft: var(--cp-id-emerald-soft); --cp-mod-money-bg: var(--cp-id-emerald-bg); --cp-mod-control: var(--cp-id-violet-ink); --cp-mod-control-soft: var(--cp-id-violet-soft); --cp-mod-control-bg: var(--cp-id-violet-bg); } /* ========================================================================== 1. SIDEBAR — the fix for "all the icons are white" -------------------------------------------------------------------------- Each item's icon sits in a 26px tinted chip in its group's hue. The chip is what the eye lands on when scanning; the label confirms it. The ACTIVE item is the only one with a solid chip, and it keeps the accent rule and white text, so "current position" still reads before "which module". ========================================================================== */ .bce-side .bce-nav__item .bc-i { width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 7px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.72); opacity: 1; /* the layer dims icons to .85; the chip carries emphasis instead */ transition: background var(--bce-motion-fast, 100ms) var(--bce-ease, ease), color var(--bce-motion-fast, 100ms) var(--bce-ease, ease); } /* Module tints. --cp-hue is set once per item by its group class. */ .bce-nav__item.cp-nav--overview { --cp-hue: var(--cp-mod-overview-soft); } .bce-nav__item.cp-nav--work { --cp-hue: var(--cp-mod-work-soft); } .bce-nav__item.cp-nav--inst { --cp-hue: var(--cp-mod-inst-soft); } .bce-nav__item.cp-nav--money { --cp-hue: var(--cp-mod-money-soft); } .bce-nav__item.cp-nav--control { --cp-hue: var(--cp-mod-control-soft); } .bce-side .bce-nav__item[class*="cp-nav--"] .bc-i { background: color-mix(in srgb, var(--cp-hue) 22%, transparent); color: var(--cp-hue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-hue) 18%, transparent); } .bce-side .bce-nav__item[class*="cp-nav--"]:hover .bc-i { background: color-mix(in srgb, var(--cp-hue) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-hue) 40%, transparent); } /* Current position: solid chip, ink icon — unmistakable in a 16-item list. */ .bce-side .bce-nav__item[class*="cp-nav--"].is-active .bc-i { background: var(--cp-hue); color: var(--bc-brand-700, #0C2135); box-shadow: 0 1px 6px color-mix(in srgb, var(--cp-hue) 45%, transparent); } .bce-side .bce-nav__item.is-active { font-weight: 600; } .bce-side .bce-nav__item { height: 36px; } /* Group headings: brighter, with the group's hue as a leading tick so the colour is explained rather than decorative. */ .bce-side .bce-nav__group { color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 7px; } .bce-side .bce-nav__group::before { content: ""; width: 10px; height: 2px; border-radius: 1px; background: currentColor; opacity: .5; flex: none; } .bce-side .bce-nav__group.cp-nav--overview::before { background: var(--cp-mod-overview-soft); opacity: 1; } .bce-side .bce-nav__group.cp-nav--work::before { background: var(--cp-mod-work-soft); opacity: 1; } .bce-side .bce-nav__group.cp-nav--inst::before { background: var(--cp-mod-inst-soft); opacity: 1; } .bce-side .bce-nav__group.cp-nav--money::before { background: var(--cp-mod-money-soft); opacity: 1; } .bce-side .bce-nav__group.cp-nav--control::before { background: var(--cp-mod-control-soft); opacity: 1; } /* Counts: the "Work" group is the only one that carries them (brief §3), so they get real presence rather than a grey pill. */ .bce-side .bce-nav__count { background: rgba(255,255,255,.14); color: #fff; font-variant-numeric: tabular-nums; } .bce-side .bce-nav__count--alert { background: var(--bc-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.18); } /* Brand lockup + tenant card: give the sidebar a top edge that reads as chrome. */ .bce-side__brand { background: rgba(0,0,0,.18); border-bottom-color: rgba(255,255,255,.10); } .bce-tenant { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); } .bce-tenant__avatar { background: var(--bc-accent-500); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset; } .bce-side__foot { background: rgba(0,0,0,.14); } .bce-side__user .bc-avatar { background: linear-gradient(140deg, var(--cp-id-indigo-soft), var(--bc-accent-400)); color: var(--bc-brand-700); font-weight: 700; } /* Collapsed rail: the chip IS the navigation, so it grows slightly. */ .is-collapsed .bce-side .bce-nav__item .bc-i { width: 30px; height: 30px; padding: 6px; border-radius: 8px; } /* ========================================================================== 2. PAGE HEADER — a medallion that says which module you are in ========================================================================== */ .cp-pagemark { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--cp-hue-bg, var(--cp-id-slate-bg)); color: var(--cp-hue-ink, var(--cp-id-slate-ink)); border: 1px solid color-mix(in srgb, var(--cp-hue-ink, var(--cp-id-slate-ink)) 16%, transparent); } .cp-pagemark .bc-i, .cp-pagemark i { width: 20px; height: 20px; font-size: 19px; } .bce-pagehead__title { gap: 10px; } .bce-pagehead__title h1 { letter-spacing: -.02em; } .cp-mark--overview { --cp-hue-bg: var(--cp-mod-overview-bg); --cp-hue-ink: var(--cp-mod-overview); } .cp-mark--work { --cp-hue-bg: var(--cp-mod-work-bg); --cp-hue-ink: var(--cp-mod-work); } .cp-mark--inst { --cp-hue-bg: var(--cp-mod-inst-bg); --cp-hue-ink: var(--cp-mod-inst); } .cp-mark--money { --cp-hue-bg: var(--cp-mod-money-bg); --cp-hue-ink: var(--cp-mod-money); } .cp-mark--control { --cp-hue-bg: var(--cp-mod-control-bg); --cp-hue-ink: var(--cp-mod-control); } .cp-mark--rose { --cp-hue-bg: var(--cp-id-rose-bg); --cp-hue-ink: var(--cp-id-rose-ink); } /* The breadcrumb gains a little weight — it is the level indicator. */ .bce-crumbs a { font-weight: 500; } .bce-crumbs a:hover { color: var(--bc-accent-600); text-decoration: none; } /* ========================================================================== 3. KPI STRIP — medallion + tone, so a number has a shape before it is read -------------------------------------------------------------------------- KPI tones ARE semantic (this is a figure, not a place), so they use the semantic palette. The medallion is what stops the strip reading as five identical grey paragraphs. ========================================================================== */ .bce-kpi { padding-left: 16px; } .bce-kpi__label { font-weight: 500; letter-spacing: .01em; } .bce-kpi__value { letter-spacing: -.025em; } .cp-kpi__mark { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; margin-bottom: 8px; background: var(--cp-kpi-bg, var(--bc-grey-100)); color: var(--cp-kpi-fg, var(--bc-text-muted)); } .cp-kpi__mark .bc-i, .cp-kpi__mark i { width: 16px; height: 16px; font-size: 15px; } .bce-kpi--accent { --cp-kpi-bg: var(--bc-accent-50); --cp-kpi-fg: var(--bc-accent-700); } .bce-kpi--ok { --cp-kpi-bg: var(--bc-success-bg); --cp-kpi-fg: var(--bc-success-fg); } .bce-kpi--warn { --cp-kpi-bg: var(--bc-warning-bg); --cp-kpi-fg: var(--bc-warning-fg); } .bce-kpi--alert { --cp-kpi-bg: var(--bc-danger-bg); --cp-kpi-fg: var(--bc-danger-fg); } .bce-kpi--info { --cp-kpi-bg: var(--bc-info-bg); --cp-kpi-fg: var(--bc-info-fg); } /* Only warn and alert keep the 3px rule the layer defines — a rule is a call to act, and five rules in a row is five calls nobody answers. The medallion carries the tone for the calm tiles. */ /* The compat-layer KPI (bc-kpi, used by the KpiCard view component) gets the same treatment so converted and unconverted dashboards match. */ .bc-kpi__icon { background: var(--cp-kpi-bg, var(--bc-accent-50)); color: var(--cp-kpi-fg, var(--bc-accent-700)); } .bc-kpi--accent { --cp-kpi-bg: var(--bc-accent-50); --cp-kpi-fg: var(--bc-accent-700); } .bc-kpi--danger { --cp-kpi-bg: var(--bc-danger-bg); --cp-kpi-fg: var(--bc-danger-fg); } .bc-kpi--success{ --cp-kpi-bg: var(--bc-success-bg); --cp-kpi-fg: var(--bc-success-fg); } .bc-kpi--warning{ --cp-kpi-bg: var(--bc-warning-bg); --cp-kpi-fg: var(--bc-warning-fg); } /* ── Money is one typeface, everywhere ───────────────────────────────────── the PayChain palette sets figures in IBM Plex Mono and the enterprise theme re-points .bc-money at it. The enterprise layer's own .bce-money was left on the display face, so the SAME rand amount changed shape between a converted screen and one still on the compat layer — the precise bug the money tag helper exists to prevent. One face, one set of tabular figures. */ .bce-money { font-family: var(--bc-font-money, ui-monospace, monospace); letter-spacing: -.01em; word-spacing: -.22em; } .bce-money__cur { font-family: var(--bc-font-money, ui-monospace, monospace); } .bce-kpi__value .bce-money { font-size: inherit; } /* ========================================================================== 4. ENTITY AVATARS — a register of 1 800 schools should not be 1 800 grey squares -------------------------------------------------------------------------- The hue is assigned by the view (cp-av--1…7, from a stable hash of the id), so the same school is always the same colour and the eye can re-find a row. ========================================================================== */ .bce-avatar { background: var(--cp-av-bg, var(--bc-grey-100)); color: var(--cp-av-fg, var(--bc-text-body)); font-weight: 700; letter-spacing: .01em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-av-fg, var(--bc-grey-400)) 22%, transparent); } .cp-av--1 { --cp-av-bg: var(--cp-id-sky-bg); --cp-av-fg: var(--cp-id-sky-ink); } .cp-av--2 { --cp-av-bg: var(--cp-id-indigo-bg); --cp-av-fg: var(--cp-id-indigo-ink); } .cp-av--3 { --cp-av-bg: var(--cp-id-violet-bg); --cp-av-fg: var(--cp-id-violet-ink); } .cp-av--4 { --cp-av-bg: var(--cp-id-emerald-bg); --cp-av-fg: var(--cp-id-emerald-ink); } .cp-av--5 { --cp-av-bg: var(--cp-id-amber-bg); --cp-av-fg: var(--cp-id-amber-ink); } .cp-av--6 { --cp-av-bg: var(--cp-id-rose-bg); --cp-av-fg: var(--cp-id-rose-ink); } .cp-av--7 { --cp-av-bg: var(--cp-id-slate-bg); --cp-av-fg: var(--cp-id-slate-ink); } /* ========================================================================== 5. TABLES, PANELS, STATES — colour where it carries information ========================================================================== */ /* Section icons on panel heads: identity hue, small, never competing with the title. */ .bce-panel__head, .bce-widget__head { gap: 10px; } /* The layer sets space-between so a head with tools pushes them right. A head that opens with an icon must keep the icon and the title together, so the split is done by the tools' own margin instead. */ .bce-panel__head:has(.cp-sectionmark), .bce-widget__head:has(.cp-sectionmark) { justify-content: flex-start; } .bce-panel__head:has(.cp-sectionmark) > :last-child:not(h3):not(.cp-sectionmark), .bce-widget__head:has(.cp-sectionmark) > .bce-widget__tools { margin-left: auto; } .cp-sectionmark { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--cp-hue-bg, var(--cp-id-slate-bg)); color: var(--cp-hue-ink, var(--cp-id-slate-ink)); } .cp-sectionmark .bc-i, .cp-sectionmark i { width: 15px; height: 15px; font-size: 14px; } /* A sorted / frozen column should feel anchored, not just sticky. */ .bce-table thead th.is-sorted { color: var(--bc-text-strong); } .bce-table thead th.is-sorted .bc-i { color: var(--bc-accent-600); } .bce-table tbody tr:hover { background: var(--bc-accent-50); } .bce-table tbody tr.is-attention { box-shadow: inset 3px 0 0 var(--bc-warning); } .bce-table tbody tr.is-selected { background: var(--bc-accent-50); box-shadow: inset 3px 0 0 var(--bc-accent-500); } /* Utilisation bars: a filled bar is data, so it takes the data-viz hue, and the warn/bad states stay semantic. */ .bce-hbar__fill { background: var(--bce-viz-1); } .bce-hbar__fill.is-warn { background: var(--bc-warning); } .bce-hbar__fill.is-bad { background: var(--bc-danger); } /* Empty / error states: the icon is the whole message, so it gets a medallion. */ .bce-state__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 12px; background: var(--cp-hue-bg, var(--bc-accent-50)); color: var(--cp-hue-ink, var(--bc-accent-600)); } .bce-state__icon .bc-i, .bce-state__icon i { width: 24px; height: 24px; font-size: 23px; } /* Toolbar chips: a filter that is ON is a selection, so it may use the accent. */ .bce-chip--view { border-color: var(--bc-accent-300); color: var(--bc-accent-700); background: var(--bc-accent-50); } .bce-chip--view .bc-i { color: var(--bc-accent-600); } /* ========================================================================== 6. COMPAT LAYER — the ~110 views still on Bootstrap class names -------------------------------------------------------------------------- These views render RemixIcon glyphs () inside buttons, alerts and headings. Left alone they inherit body ink and read as grey punctuation. Two rules give them the same life as the converted screens. ========================================================================== */ /* Icons inside a coloured control follow the control, not the body. */ .btn > i[class^="ri-"], .btn > i[class*=" ri-"], .bc-btn > i[class^="ri-"], .bc-btn > i[class*=" ri-"] { color: inherit; } /* An icon that opens a card or a heading is identity, not action — so it gets the same medallion the converted screens use, from CSS alone. This is the single highest-leverage rule in the file: it lifts every unconverted card header without touching a view. */ .card-header > i[class^="ri-"], .card-header > i[class*=" ri-"], .card-title > i[class^="ri-"], .card-title > i[class*=" ri-"], h4 > i[class^="ri-"], h5 > i[class^="ri-"] { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--bc-accent-50); color: var(--bc-accent-700); font-size: 15px; vertical-align: -7px; margin-right: 2px; } /* Alerts: the leading glyph carries the alert's own semantic colour. */ .alert > i[class^="ri-"] { color: inherit; opacity: .9; } /* Utility: paint any icon with an identity or semantic hue in one class. */ .cp-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--cp-hue-bg, var(--bc-grey-100)); color: var(--cp-hue-ink, var(--bc-text-body)); } .cp-ico--overview { --cp-hue-bg: var(--cp-mod-overview-bg); --cp-hue-ink: var(--cp-mod-overview); } .cp-ico--work { --cp-hue-bg: var(--cp-mod-work-bg); --cp-hue-ink: var(--cp-mod-work); } .cp-ico--inst { --cp-hue-bg: var(--cp-mod-inst-bg); --cp-hue-ink: var(--cp-mod-inst); } .cp-ico--money { --cp-hue-bg: var(--cp-mod-money-bg); --cp-hue-ink: var(--cp-mod-money); } .cp-ico--control { --cp-hue-bg: var(--cp-mod-control-bg); --cp-hue-ink: var(--cp-mod-control); } .cp-ico--ok { --cp-hue-bg: var(--bc-success-bg); --cp-hue-ink: var(--bc-success-fg); } .cp-ico--warn { --cp-hue-bg: var(--bc-warning-bg); --cp-hue-ink: var(--bc-warning-fg); } .cp-ico--bad { --cp-hue-bg: var(--bc-danger-bg); --cp-hue-ink: var(--bc-danger-fg); } .cp-ico--accent { --cp-hue-bg: var(--bc-accent-50); --cp-hue-ink: var(--bc-accent-700); } /* bg-label-* badges already carry a tint; make sure a glyph inside follows it. */ [class*="bg-label-"] > i[class^="ri-"] { color: inherit; } /* ========================================================================== 7. DARK MODE — the hues are re-cut, not merely dimmed -------------------------------------------------------------------------- The enterprise layer ships a designed dark mode that re-cuts the ACCENT to its own cobalt. Loaded after the enterprise theme, that silently repainted every PayChain button, link and active rule blue at night — the brand disappeared after dark. This block re-asserts Civic Teal, lifted for a dark surface, and it is the reason this file loads last. #3FCFC4 on #141B26 8.7:1 links, active nav, selected row, focus #0B807B with white 4.6:1 primary button fill ========================================================================== */ .theme-enterprise[data-theme="dark"], :root[data-theme="dark"] { --bc-accent-500: #3FCFC4; /* links, active nav rule, selection */ --bc-accent-600: #0B807B; /* primary button fill — white text 4.6:1 */ --bc-accent-700: #7EE0D7; /* small accent text on a tinted ground */ --bc-accent-400: #2FBFB5; --bc-accent-300: #7EE0D7; --bc-accent-50: rgba(63,207,196,.12); --bc-accent-100: rgba(63,207,196,.20); --bc-text-accent: #3FCFC4; --bc-focus-ring: 0 0 0 3px rgba(63,207,196,.40); } /* The sidebar must still read as chrome when the content behind it is dark. */ :root[data-theme="dark"] .bce-side { background: #0B1420; border-right: 1px solid rgba(232,236,242,.08); } :root[data-theme="dark"], .theme-enterprise[data-theme="dark"] { --cp-id-sky-ink: #6EC8EE; --cp-id-sky-soft: #7CCDF0; --cp-id-sky-bg: rgba(110,200,238,.14); --cp-id-indigo-ink: #9DAEFB; --cp-id-indigo-soft: #A3B2FA; --cp-id-indigo-bg: rgba(157,174,251,.14); --cp-id-violet-ink: #BFAAF9; --cp-id-violet-soft: #C0AEF8; --cp-id-violet-bg: rgba(191,170,249,.14); --cp-id-amber-ink: #F5C25C; --cp-id-amber-soft: #F7C766; --cp-id-amber-bg: rgba(245,194,92,.14); --cp-id-emerald-ink: #63D9BA; --cp-id-emerald-soft: #6FD9BC; --cp-id-emerald-bg: rgba(99,217,186,.14); --cp-id-rose-ink: #F3A2BC; --cp-id-rose-soft: #F4A8C0; --cp-id-rose-bg: rgba(243,162,188,.14); --cp-id-slate-ink: #AEBACD; --cp-id-slate-soft: #AEBACD; --cp-id-slate-bg: rgba(174,186,205,.12); } :root[data-theme="dark"] .bce-table tbody tr:hover { background: rgba(122,162,255,.08); } :root[data-theme="dark"] .bce-side__brand, :root[data-theme="dark"] .bce-side__foot { background: rgba(0,0,0,.22); } :root[data-theme="dark"] .cp-pagemark, :root[data-theme="dark"] .cp-sectionmark, :root[data-theme="dark"] .cp-ico { border-color: transparent; } /* ========================================================================== 8. MOTION — 100ms, and never on anything a person is reading ========================================================================== */ @media (prefers-reduced-motion: reduce) { .bce-side .bce-nav__item .bc-i { transition: none; } }