AB#29181: Use CHEFS CSS Files in Submission Panel Shadow DOM

applications/Unity.GrantManager/src/Unity.GrantManager.Web/Pages/GrantApplications/Details.js

@@ -465,17 +465,22 @@ $(function () {
         // Create shadow DOM with open mode (allows external JS access)
         const shadowRoot = formioContainer.attachShadow({mode: 'open'});
 
-        // Load form.io CSS inside shadow DOM
-        const formioStyle = document.createElement('link');
-        formioStyle.rel = 'stylesheet';
-        formioStyle.href = '/libs/formiojs/formio.form.css';
-        shadowRoot.appendChild(formioStyle);
-
-        // Load bootstrap CSS
-        const bootstrapStyle = document.createElement('link');
-        bootstrapStyle.rel = 'stylesheet';
-        bootstrapStyle.href = '/libs/bootstrap-4/dist/css/bootstrap.min.css';
-        shadowRoot.appendChild(bootstrapStyle);
+        // Load CHEFS CSS (replaces Bootstrap and formio CSS — CHEFS bundles both inside their index CSS)
+        const chefsIndexStyle = document.createElement('link');
+        chefsIndexStyle.rel = 'stylesheet';
+        chefsIndexStyle.href = '/Pages/GrantApplications/chefs-index.css';
+        shadowRoot.appendChild(chefsIndexStyle);
+
+        const chefsFormViewerStyle = document.createElement('link');
+        chefsFormViewerStyle.rel = 'stylesheet';
+        chefsFormViewerStyle.href = '/Pages/GrantApplications/chefs-form-viewer.css';
+        shadowRoot.appendChild(chefsFormViewerStyle);
+
+        // Override Bootstrap bg-* classes with CHEFS BC Government theme colors
+        const chefsVuetifyBsBridge = document.createElement('link');
+        chefsVuetifyBsBridge.rel = 'stylesheet';
+        chefsVuetifyBsBridge.href = '/Pages/GrantApplications/chefs-vuetify-bs-bridge.css';
+        shadowRoot.appendChild(chefsVuetifyBsBridge);
 
         // Load Details-shadow-dom.css into shadow DOM (CRITICAL for accordion, styling, etc.)
         const detailsStyle = document.createElement('link');

applications/Unity.GrantManager/src/Unity.GrantManager.Web/Pages/GrantApplications/chefs-vuetify-bs-bridge.css

@@ -0,0 +1,16 @@
+/*
+ * chefs-vuetify-bs-bridge.css
+ * Overrides Bootstrap bg-* utility classes with CHEFS BC Government theme colors.
+ * Color values are sourced from the CHEFS Vuetify chefsTheme (vuetify-theme-stylesheet).
+
+ *
+ * Formio panel themes are a fixed set (primary, secondary, info, success, warning, danger)
+ * so all cases are covered here without needing dynamic CSS variable resolution.
+ * Below values are extracted from inline  <style type="text/css" id="vuetify-theme-stylesheet"> inside CHEFS forms
+ */
+.bg-primary   { background-color: rgb(0,   51,  102) !important; color: rgb(255, 255, 255) !important; } /* --v-theme-primary */
+.bg-secondary { background-color: rgb(252, 186, 25)  !important; color: rgb(0,   0,   0)   !important; } /* --v-theme-secondary */
+.bg-success   { background-color: rgb(46,  133, 64)  !important; color: rgb(255, 255, 255) !important; } /* --v-theme-success */
+.bg-info      { background-color: rgb(33,  150, 243) !important; color: rgb(255, 255, 255) !important; } /* --v-theme-info */
+.bg-warning   { background-color: rgb(218, 113, 2)   !important; color: rgb(255, 255, 255) !important; } /* --v-theme-warning */
+.bg-danger    { background-color: rgb(216, 41,  47)  !important; color: rgb(255, 255, 255) !important; } /* --v-theme-error */