fix: finish widget modernization audit

apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css

@@ -70,7 +70,7 @@
 .surfaceHostAdvanced {
   position: fixed;
   inset: 0;
-  z-index: calc(var(--mantine-z-index-modal) - 1);
+  z-index: var(--homarr-z-index-widget-focus);
   width: auto;
   height: auto;
   pointer-events: none;

apps/nextjs/src/components/board/advanced-focus/context.tsx

@@ -229,6 +229,19 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
     if (isEditMode && activeRef.current) close(false);
   }, [close, isEditMode]);
 
+  useEffect(() => {
+    if (active?.activation !== "manual") return;
+    const background = document.querySelectorAll<HTMLElement>("[data-advanced-focus-background]");
+    background.forEach((element) => {
+      element.inert = true;
+    });
+    return () => {
+      background.forEach((element) => {
+        element.inert = false;
+      });
+    };
+  }, [active?.activation]);
+
   const value = useMemo(
     () => ({ active, open, close, dismiss, hover, leave }),
     [active, close, dismiss, hover, leave, open],
@@ -244,7 +257,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
             data-advanced-focus-overlay
             backgroundOpacity={0.38}
             blur={0}
-            zIndex="calc(var(--mantine-z-index-modal) - 2)"
+            zIndex="var(--homarr-z-index-widget-preview-backdrop)"
             className={`${classes.backdrop} ${active.phase === "closing" ? classes.backdropClosing : ""}`}
             aria-hidden
           />

apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx

@@ -59,7 +59,7 @@ export const AdvancedFocusManualSurface = ({
       radius={radius}
       padding={0}
       shadow="none"
-      zIndex="calc(var(--mantine-z-index-modal) - 1)"
+      zIndex="var(--homarr-z-index-widget-focus)"
       closeOnEscape={false}
       closeOnClickOutside
       lockScroll

apps/nextjs/src/components/layout/header.tsx

@@ -18,7 +18,13 @@ interface Props {
 
 export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
   return (
-    <AppShellHeader maw="100vw" zIndex={201} style={{ overflowX: "hidden" }} data-app-shell-header>
+    <AppShellHeader
+      maw="100vw"
+      zIndex="var(--homarr-z-index-board-header)"
+      style={{ overflowX: "hidden" }}
+      data-advanced-focus-background
+      data-app-shell-header
+    >
       <Group h="100%" gap="xl" px="md" justify="apart" wrap="nowrap">
         <Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
           {hasNavigation && <ClientBurger />}