u

src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.css

@@ -1,27 +1,27 @@
-/* Organization Chart Level Styles - inherits from main chart styles */
+/* Organization Chart Level Styles */
 .org-level {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     position: relative;
-    margin-top: 20px;
+    margin-top: 40px;
 }
 
 .org-level::before {
     content: '';
     position: absolute;
-    top: -40px;
+    top: -80px;
     left: 50%;
     transform: translateX(-50%);
     width: 2px;
-    height: 20px;
+    height: 40px;
     background: #ddd;
 }
 
 .org-level::after {
     content: '';
     position: absolute;
-    top: -20px;
+    top: -40px;
     left: 0;
     right: 0;
     height: 2px;
@@ -29,28 +29,20 @@
     z-index: 1;
 }
 
-/* Responsive adjustments for levels */
-@media (max-width: 768px) {
-    .org-level {
-        flex-direction: column;
-        align-items: center;
-    }
+/* Node styles for levels */
+.org-node {
+    position: relative;
+    margin: 0px 15px 20px 15px;
 }
 
-/* Animation for level expansion */
-.org-level {
-    animation: fadeInLevel 0.3s ease-in-out;
-}
-
-@keyframes fadeInLevel {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.node-connector {
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 40px;
+    background: #ddd;
 }
 
 .node-card {
@@ -134,3 +126,46 @@
 .amount {
     font-weight: 600;
 }
+
+/* Responsive adjustments for levels */
+@media (max-width: 768px) {
+    .org-level {
+        flex-direction: column;
+        align-items: center;
+        margin-top: 20px;
+    }
+
+    .org-node {
+        margin: 10px 0;
+    }
+
+    .node-card {
+        min-width: 160px;
+        max-width: 220px;
+        padding: 12px;
+    }
+
+    .node-name {
+        font-size: 13px;
+    }
+
+    .node-amounts {
+        font-size: 11px;
+    }
+}
+
+/* Animation for level expansion */
+.org-level {
+    animation: fadeInLevel 0.3s ease-in-out;
+}
+
+@keyframes fadeInLevel {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}