From 32d09b38f11f3e09a8a5f90f4a5deb300b1f76e7 Mon Sep 17 00:00:00 2001 From: Scott Pouliot Date: Wed, 27 May 2026 18:25:36 -0400 Subject: [PATCH] Fix invisible formula/AI badges: move custom bg-* colors to site.css bg-purple (formula, AI badges) was only defined in company-settings-lookups.css which is not loaded on Quote/Job pages. The badge element rendered with no background, appearing as a blank space in front of the item description. Moved all 13 custom color utilities (purple, pink, cyan, teal, indigo, lime, brown, gray, orange, yellow, green, blue, red) to site.css so they are available globally. company-settings-lookups.css retains its definitions for now (harmless duplication; can be cleaned up later). Co-Authored-By: Claude Sonnet 4.6 --- src/PowderCoating.Web/wwwroot/css/site.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/PowderCoating.Web/wwwroot/css/site.css b/src/PowderCoating.Web/wwwroot/css/site.css index fe070c2..d3b8dd6 100644 --- a/src/PowderCoating.Web/wwwroot/css/site.css +++ b/src/PowderCoating.Web/wwwroot/css/site.css @@ -838,6 +838,24 @@ th.sortable:hover i { color: #000 !important; } +/* Custom badge/background colours not included in Bootstrap 5 core. + Defined globally here so they work on every page (quotes, jobs, wizard, etc.). + Previously only defined in company-settings-lookups.css, which caused invisible + formula/AI item badges on any page that didn't load that stylesheet. */ +.bg-purple { background-color: #6f42c1 !important; color: #fff !important; } +.bg-pink { background-color: #d63384 !important; color: #fff !important; } +.bg-cyan { background-color: #0dcaf0 !important; color: #000 !important; } +.bg-teal { background-color: #20c997 !important; color: #fff !important; } +.bg-indigo { background-color: #6610f2 !important; color: #fff !important; } +.bg-lime { background-color: #84cc16 !important; color: #000 !important; } +.bg-brown { background-color: #795548 !important; color: #fff !important; } +.bg-gray { background-color: #6c757d !important; color: #fff !important; } +.bg-orange { background-color: #fd7e14 !important; color: #fff !important; } +.bg-yellow { background-color: #ffc107 !important; color: #000 !important; } +.bg-green { background-color: #198754 !important; color: #fff !important; } +.bg-blue { background-color: #0d6efd !important; color: #fff !important; } +.bg-red { background-color: #dc3545 !important; color: #fff !important; } + /* ============================================================ Tom Select — dark mode fixes Tom Select's Bootstrap 5 theme hardcodes color:#343a40 which