/* =====================================================================
BBCRM Theme System — light / dark
---------------------------------------------------------------------
Single home for the app's color-mode system. Two layers stay in sync:
1. Bootstrap 5.3 native color modes via [data-bs-theme="light|dark"]
on . The attribute is set before first paint by the no-FOUC
snippet in each standalone master (BaseMaster, FamilyPortal,
Mobile, Referrals) from the UserSettings "Theme" cookie, falling
back to the OS prefers-color-scheme on first visit.
2. DevExpress Office365 / Office365Dark, applied server-side via
ASPxWebControl.GlobalTheme (Global.asax) from the same cookie.
===================================================================== */
/* ---------- Light (default) ---------- */
:root,
[data-bs-theme="light"] {
--background-color: #edf0f5;
--box-bg-color: rgba(255, 255, 255, 0.5);
--box-border-color: #000;
--text-color: #121212;
--text-secondary-color: #232D3F;
--transition-duration: 0.3s;
/* App top header bar — light chrome (QA 2026-06-05: light and dark must read
as distinct themes). Ivory→pale-slate gradient; navy text. The dark theme
keeps its navy/slate slab. */
--app-header-bg: linear-gradient(to bottom, #f0f4f9 0%, #e2e8f1 100%);
--app-header-text: #1b2a4a;
--app-header-muted: #51607a;
--app-header-border: #c8d3e2;
/* Brand gold — the third brand colour (2026-08-19). It carries "CRM" in the logo
and every active/highlight state in the app. Two values, because #e0b54a measures
1.93:1 on white: light grounds get the deeper one, dark grounds the bright one.
Pick by the surface behind the element, not by the theme name. */
--bb-gold: #a87c1b;
--bb-gold-soft: rgba(168, 124, 27, 0.14);
--app-accent: #a87c1b;
--app-accent-soft: rgba(168, 124, 27, 0.14);
/* Some surfaces are dark in BOTH themes — the login panel, the portal-assistance
page, the merchant promo card. They always need the bright gold, so they must
not follow --bb-gold. Same value in both blocks, on purpose. */
--bb-gold-on-dark: #e0b54a;
--bb-gold-on-dark-soft: rgba(224, 181, 74, 0.16);
/* Page title bar */
--titlebar-bg: linear-gradient(to bottom, #ffffff 0%, #f9fbfd 100%);
--titlebar-border: #e1e8ed;
--titlebar-title: #1E293B;
--titlebar-pill-bg: #f3f4f6;
--titlebar-pill-border: #dee2e6;
/* Field caption (value uses default text color). Synced with the dashboard
card-label color (--bb-kpi-label) so every caption reads the same app-wide. */
--field-label: #345f8a;
/* Semantic status palette (accent + soft background), shared app-wide */
--bb-ok: #1f9d57; --bb-ok-bg: #e7f6ed;
/* Warn is orange, not gold: gold now belongs to the brand, and the old #b8860b sat
1 degree of hue from --bb-gold, so "careful" and "brand" looked identical. */
--bb-warn: #c2410c; --bb-warn-bg: #fdf0e7; --bb-warn-bd: #f6c9a8;
--bb-danger: #d6453d; --bb-danger-bg: #fbe7e6;
--bb-info: #1f6fb2; --bb-info-bg: #e6f0f8;
/* Card headline (member/family card name) — the brightest thing on its card. */
--bb-card-title: #355681;
/* Quiet glyph text, e.g. a birthday that is this month but not today. */
--bb-quiet: #94a3b8;
}
/* ---------- Dark ---------- */
[data-bs-theme="dark"] {
--background-color: #121212;
--box-bg-color: #282828;
--box-border-color: rgba(255, 255, 255, 0.2);
--text-color: #ffffff;
--text-secondary-color: #03DAC6;
/* App top header bar — a slate surface a step lighter than the
#121212 body, so the bar reads as an elevated layer with contrast
rather than black-on-black. */
--app-header-bg: linear-gradient(135deg, #2a2f3e 0%, #232d3f 100%);
--app-header-text: #ffffff;
--app-header-muted: #aeb7c6;
--app-header-border: rgba(255, 255, 255, 0.08);
/* Page title bar */
--titlebar-bg: linear-gradient(to bottom, #202020 0%, #1a1a1a 100%);
--titlebar-border: rgba(255, 255, 255, 0.10);
--titlebar-title: #f1f3f5;
--titlebar-pill-bg: rgba(255, 255, 255, 0.06);
--titlebar-pill-border: rgba(255, 255, 255, 0.14);
/* Field caption — synced with dashboard --bb-kpi-label (near-white blue) */
--field-label: #cfe0f5;
/* Brand gold on dark grounds — the bright value, which reads 9.46:1 here.
--app-accent had no dark definition at all before this, so var(--app-accent)
was resolving to nothing in dark mode and the rail's gold bar fell back to
the text colour. */
--bb-gold: #e0b54a;
--bb-gold-soft: rgba(224, 181, 74, 0.16);
--app-accent: #e0b54a;
--app-accent-soft: rgba(224, 181, 74, 0.16);
/* Always-dark surfaces — same value as the light block by design. */
--bb-gold-on-dark: #e0b54a;
--bb-gold-on-dark-soft: rgba(224, 181, 74, 0.16);
/* Semantic status palette (dark) */
--bb-ok: #37d07f; --bb-ok-bg: rgba(55, 208, 127, 0.12);
/* Warn is orange here too — it was the SAME hex as the accent above. */
--bb-warn: #e8883c; --bb-warn-bg: rgba(232, 136, 60, 0.13); --bb-warn-bd: rgba(232, 136, 60, 0.42);
--bb-danger: #ef6a62; --bb-danger-bg: rgba(239, 106, 98, 0.12);
--bb-info: #5aa9e6; --bb-info-bg: rgba(90, 169, 230, 0.12);
/* Near-white, not pure white — a bold #fff headline glares on the dark card. */
--bb-card-title: #f1f3f5;
--bb-quiet: #6b7689;
}
/* Dark-mode icon legibility: most FA SVG icons are baked at neutral #5a5a5a for light
themes, so neutral glyphs (list-check, upload, refresh, search, print…) nearly vanish
on dark toolbars/buttons. Brighten icon images in dark mode — brightness() preserves
hue, so colored icons (trash red, edit green…) stay their color while neutral grays
become readable. Applies to ![]()
-rendered icons only; mask / FA icons already
follow currentColor and are untouched. */
[data-bs-theme="dark"] img[src*="/Images/Icons/"] {
filter: brightness(1.9);
}
/* The row lock is a state marker, not an action glyph — it must sit below the cell
text. The brightness boost above blows its neutral fill out to white, so exempt it
and fade it per theme. Must stay after that rule: equal specificity in dark. */
img[src*="RowLocked"] {
filter: none;
opacity: .55;
}
[data-bs-theme="dark"] img[src*="RowLocked"] {
filter: brightness(1.35);
opacity: .7;
}
/* Dark-mode grid legibility: DX renders data-cell text pure white, so bold names/titles
glare against the dark rows. Soften cell text to a calm off-white for a professional,
easy-to-read grid. Applies to every ASPxGridView (class-suffix-independent); column
headers keep their DX theme styling, and inline cell colors (status greens, badges)
win via their own inline style. */
[data-bs-theme="dark"] [class*="dxgvDataCell"] {
color: #dfe3ea !important;
}
/* Tame heavy bold in grid data cells (member names, class titles, etc.) to a medium
weight across ALL grids — bold + bright reads as glare. Targets inline font-weight:bold
/ / inside data cells; normal text, footer/summary, and header cells are
untouched. */
[class*="dxgvDataCell"] [style*="bold"],
[class*="dxgvDataCell"] b,
[class*="dxgvDataCell"] strong {
font-weight: 500 !important;
}
/* Headings had no colour rule at all, so they kept the browser default and went near-black
on the dark theme. Pages that colour their own headings (e.g. .bb-msum__name) still win. */
h1, h2, h3, h4, h5, h6 {
color: var(--text-color);
}
/* Headings are bold, so pure white glares in dark. Same softening as .bb-total. */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
color: #c9d1db;
}
/* Focused/selected grid row: soft theme tint, row icons stay legible.
[class*=] matches both _Office365 (light) and _Office365Dark (dark) suffixes. */
[class*="dxgvFocusedRow"],
[class*="dxgvFocusedRow"] td,
[class*="dxgvSelectedRow"],
[class*="dxgvSelectedRow"] td,
.bb-row-hl,
.bb-row-hl td {
background-color: var(--bb-info-bg) !important;
color: var(--text-color) !important;
}
/* Emphasis/total text: soften in dark so bold isn't pure-white glare (halation). */
[data-bs-theme="dark"] .bb-total,
[data-bs-theme="dark"] .bb-total [class*="dxeBase"],
[data-bs-theme="dark"] .bb-total span { color: #c9d1db !important; }
/* =====================================================================
App top header bar
.app-topbar is the full-width bar surface; it adapts per theme
(navy in light, slate in dark). Layout/box-model of the inner blocks
(.SchoolInfo / .Darkbox / .DivLogOut) stays with the master that owns
them — only their theme colors live here.
===================================================================== */
.app-topbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 12px 20px;
background: var(--app-header-bg);
color: var(--app-header-text);
}
/* =====================================================================
Merge the top bar + left rail into ONE seamless navy "L" chrome:
de-float both panels (no rounding / margin / shadow) so they hug the
viewport edges and meet flush at the top-left corner. FIRST CUT — the
exact rounding source may need a tighter selector after a screenshot.
===================================================================== */
.app-topbar-panel {
background: var(--app-header-bg) !important; /* kill the white panel box around the navy bar */
border-radius: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.app-topbar-panel * {
background-color: transparent !important;
}
/* preserve the subtle chips on the navy bar (these beat the * reset above) */
.app-topbar-panel .app-school-badge {
background-color: rgba(255, 255, 255, 0.10) !important;
}
.app-topbar-panel .bb-theme-toggle:hover {
background-color: rgba(127, 127, 127, 0.15) !important;
}
.app-topbar-panel .bb-testmode {
background-color: var(--bb-warn-bg) !important;
}
/* Same override as .bb-testmode above: the DX header panel resets child backgrounds,
so without !important the support strip renders fully transparent. */
.app-topbar-panel .bb-supportmode {
background-color: var(--bb-danger-bg) !important;
}
.app-rail,
.app-rail > div {
border-radius: 0 !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
/* The DX panel gives the rail its own scroll box. When the nav is a little taller than that
box it becomes a nested scroller that swallows the first wheel gesture — the pointer is
usually right there after clicking a nav item, so the page appears frozen and users reach
for Tab instead (QA, member setup, 2026-07-29). Let the rail size to its content and scroll
with the PAGE: one scroll region, no gesture goes missing. */
.app-rail .dxpnl-acc,
.app-rail .dxpnl-scc {
height: auto !important;
max-height: none !important;
overflow-y: visible !important;
}
/* --- School identity block --- */
.app-school {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.app-school-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid var(--app-header-border);
font-size: 22px;
color: var(--app-header-text);
}
.app-school-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.app-school-name {
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: var(--app-header-text);
}
.app-school-meta {
display: flex;
flex-direction: column;
gap: 1px;
}
.app-school-line {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--app-header-muted);
}
.app-school-line .dx-label {
color: var(--app-header-muted);
}
.app-school-line i {
width: 14px;
text-align: center;
opacity: .8;
}
/* --- Action buttons cluster --- */
.app-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.app-actions-row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
/* Clock line beneath the action buttons. */
.app-topbar-clock {
color: var(--app-header-muted);
font-size: x-small;
}
/* Top-bar block layout (lifted out of App.Master's inline