Fix: re-organized dialog and notification z-indices

- Notifications and toasts now appear higher than dialogs when appearing together
- Standardized dialog z-index
- Added documentation for z-index guide

src/components/HiddenDidDialog.vue

@@ -1,9 +1,6 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-  >
-    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
+  <div v-if="isOpen" class="dialog-overlay">
+    <div class="dialog">
       <!-- Header -->
       <div class="flex justify-between items-center mb-4">
         <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>