modalbox for appoiments

dashboard/assets/custom.css

@@ -10,8 +10,9 @@ body {
 
 /* page-content (rechts neben der Sidebar) */
 .page-content {
-    margin-left: 220px;
+    flex: 1 1 0%;
     padding: 20px;
+    min-width: 0; /* verhindert Überlauf bei zu breitem Inhalt */
     transition: margin-left 0.3s ease;
     min-height: calc(100vh - 60px); /* Mindesthöhe minus Header-Höhe */
 }
@@ -69,10 +70,10 @@ body {
     background-color: #e4d5c1;
     color: black;
     height: calc(100vh - 60px); /* Höhe minus Header */
-    position: fixed;
     top: 60px; /* Den gleichen Wert wie Header-Höhe verwenden */
     left: 0;
     z-index: 1000;
+    position: relative; /* oder fixed, je nach Layout */
     overflow-x: hidden;
     overflow-y: auto;
 }
@@ -185,4 +186,34 @@ body {
     .sidebar.collapsed ~ .page-content {
         margin-left: 0;
     }
-}
+}
+
+/* :root {
+    --mb-z-index: 2000 !important;
+    --mantine-z-index-popover: 2100 !important;
+    --mantine-z-index-overlay: 2100 !important;
+    --mantine-z-index-dropdown: 2100 !important;
+    --mantine-z-index-max: 9999 !important;
+}
+
+.mantine-Modal-root,
+.mantine-Modal-modal,
+.mantine-Modal-overlay {
+    z-index: 3000 !important;
+}
+
+.mantine-Modal-overlay {
+    z-index: 2000 !important;
+}
+
+.mantine-Modal-modal {
+    z-index: 2100 !important;
+}
+
+.mantine-Popover-dropdown,
+.mantine-DatePicker-dropdown,
+.mantine-Select-dropdown {
+    z-index: 2200 !important;
+} */
+
+