when the TeamId claim is 48599; that scopes every rule below to FGC users only and leaves every other team on the default Argenta palette. FGC palette: #EE7779 melon — primary accent (was Argenta teal #00A1BE) #1A8584 deep teal — secondary accent (was Argenta green #00CC78) #92C4B6 pastel teal — tertiary highlights (open icons, badges, date-range buttons) #FFFFFF white — text-on-color Original Argenta vars being overridden: --color-primary, --color-buttons, --color-buttons-hover, --color-secondary, --color-links-hover, --color-tertiary, --color-rfv, --color-icons, --color-links. ======================================================================== */ /* ===== Theme variable overrides ===== */ .fgc { --color-primary: #EE7779; --color-buttons: #EE7779; --color-buttons-hover: #d96a6c; --color-secondary: #1A8584; --color-links-hover: #1A8584; --color-tertiary: #EE7779; --color-rfv: #EE7779; --color-icons: #EE7779; --color-links: #EE7779; } /* ===== Top-right header icons (New Tab / Report Center / Help Center / Settings / Sign Out) — pastel teal #92C4B6 for FGC team. The icons use the global `.teal` class (color:#00A1BE !important). The Help Center icon also carries an inline `color:#00A1BE` (without !important on Blazor side, so external !important wins). */ .fgc .paywall-header .teal, .fgc .paywall-header i[style*="#00A1BE"] { color: #92C4B6 !important; } /* ===== Sidebar (left-hand main menu) — nav-header icons in FGC melon ===== Sidebar lives outside

, so PaywallLayout also adds .fgc to via JS interop. That makes both `.fgc .nav-header` (body-level) and `.fgc .cst-iconbar` (main-level) match. */ .fgc .nav-header i:first-child, .fgc .nav-header:hover i:first-child, .fgc .sidebar-menu .nav-link i:first-child, .fgc .sidebar-menu .nav-link:hover i:first-child, .fgc .sidebar-menu .nav-link.active i:first-child { color: #EE7779 !important; } /* ===== Workspace iconbar (cst-iconbar) — swap teal accents to FGC melon ===== */ .fgc .cst-iconbar a:hover { background: rgba(238,119,121,.10) !important; } .fgc .cst-iconbar a i, .fgc .cst-iconbar a:hover i, .fgc .cst-iconbar a.active i { color: #EE7779 !important; } .fgc .cst-iconbar a.active, .fgc .cst-iconbar a.active:hover { background: rgba(238,119,121,.15) !important; border-bottom-color: #EE7779 !important; } /* ===== Title-bar action icons (cst-title-link) — pastel teal ===== */ .fgc .cst-title-link, .fgc .cst-title-link i, .fgc .cst-title-link:hover, .fgc .cst-title-link:hover i { color: #92C4B6 !important; } /* ===== Record name (between workspace title and menu) — deep teal ===== */ .fgc strong[style*="var(--color-primary)"] { color: #1A8584 !important; } /* ===== HIDE FILTER pill hover state — pin to melon, no orange flash ===== */ .fgc .grid-filter-panel.is-open .grid-filter-header:hover .grid-filter-toggle-pill { background: #EE7779 !important; border-color: #EE7779 !important; } /* ===== Date-range quick-click filter buttons — pastel teal ===== */ .fgc .btn-date-range, .fgc .btn.btn-date-range { background-color: #92C4B6 !important; border-color: #92C4B6 !important; color: #fff !important; } .fgc .btn-date-range:hover, .fgc .btn.btn-date-range:hover { background-color: #7DB7A6 !important; border-color: #7DB7A6 !important; color: #fff !important; } /* ===== Grid Open-record button — pastel teal, no hover state change ===== */ .fgc .grid-action-btn.green, .fgc .grid-action-btn.green:hover, .fgc .grid-action-btn.green:focus, .fgc .grid-action-btn.green:active, .fgc .grid-action-btn.green:visited { background: #92C4B6 !important; color: #fff !important; text-decoration: none !important; } .fgc .grid-action-btn.green i, .fgc .grid-action-btn.green:hover i, .fgc .grid-action-btn.green:focus i { color: #fff !important; } /* ===== Argenta `.green` text + btn-green button — deep teal ===== */ .fgc .green { color: #1A8584 !important; } .fgc .btn.btn-green { background-color: #1A8584 !important; border-color: #1A8584 !important; } /* ===== Status badges in grids (Volunteers, Donors, etc.) — swap the global Argenta green/active background (#00CC78) to FGC pastel teal #92C4B6. Many grid pages set the badge color via INLINE style (e.g., `background:#00CC78`) which inline-CSS normally beats external CSS — `!important` on the attribute-selector match wins. We only swap "background" and "background-color" tokens, never border/text color. */ .fgc [style*="background:#00CC78"], .fgc [style*="background: #00CC78"], .fgc [style*="background-color:#00CC78"], .fgc [style*="background-color: #00CC78"] { background: #92C4B6 !important; background-color: #92C4B6 !important; } /* ===== Notifications-card record-type badge ("VolunteerTasks", "Clients", etc.). NotificationPanel.razor renders the badge with INLINE `background-color:#E0F5F9; color:#00A1BE`. Recolor for FGC users to melon. */ .fgc .badge[style*="#00A1BE"] { background-color: #FCE3E4 !important; color: #EE7779 !important; }