Fix Angular 21 CDK overlay structure with nested backdrop

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>

Author: Copilot

eform-client/src/scss/styles.scss

@@ -1547,11 +1547,17 @@ app-footer {
   align-items: center !important;
 }
 
+// Angular 21 specific: handle the new cdk-overlay-popover wrapper
+.cdk-overlay-popover.cdk-global-overlay-wrapper {
+  position: fixed !important;
+  inset: 0 !important;
+}
+
 .cdk-overlay-pane {
   position: relative !important;
   pointer-events: auto !important;
   box-sizing: border-box !important;
-  z-index: 1000 !important;
+  z-index: 1001 !important;
   display: flex !important;
   max-width: 100vw !important;
   max-height: 100vh !important;
@@ -1570,6 +1576,12 @@ app-footer {
   opacity: 1 !important;
 }
 
+// Angular 21: When backdrop is inside the wrapper, ensure it's positioned correctly
+.cdk-overlay-popover .cdk-overlay-backdrop {
+  position: fixed !important;
+  inset: 0 !important;
+}
+
 .mat-mdc-dialog-container {
   display: flex !important;
   flex-direction: column !important;