Modified header to address pass/fail confusions

ui/src/components/trainingReport/trainingReportForm.vue

@@ -134,16 +134,31 @@ onMounted(async () => {
                 <FieldGroup class="gap-4">
 
                     <!-- Column Headers -->
+                    <div class="relative">
                         <div
                             class="grid grid-cols-[180px_155px_65px_41px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground">
+
                             <div>Member</div>
                             <div>Role</div>
-                        <div>Bookwork</div>
-                        <div>Qual</div>
+
+                            <!-- Bookwork -->
+                            <div class="text-center">Bookwork</div>
+
+                            <!-- Qual -->
+                            <div class="text-center">Qual</div>
+
                             <div>Remarks</div>
                             <div></div> <!-- empty for remove button -->
                         </div>
 
+                        <!-- FLOATING SUPERHEADER -->
+                        <div class="absolute left-[calc(180px+155px+65px/2)] -top-5 
+           w-[106px] text-center text-xs font-medium text-muted-foreground 
+           pointer-events-none">
+                            ─── Pass ────
+                        </div>
+                    </div>
+
 
                     <!-- Attendee Rows -->
                     <template v-for="(field, index) in fields" :key="field.key">