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 */
+/* Node styles for levels */
-@media (max-width: 768px) {
+.org-node {
-    .org-level {
+    position: relative;
-        flex-direction: column;
+    margin: 0px 15px 20px 15px;
-        align-items: center;
-    }
 }
 
-/* Animation for level expansion */
+.node-connector {
-.org-level {
+    position: absolute;
-    animation: fadeInLevel 0.3s ease-in-out;
+    top: -40px;
-}
+    left: 50%;
-
+    transform: translateX(-50%);
-@keyframes fadeInLevel {
+    width: 2px;
-    from {
+    height: 40px;
-        opacity: 0;
+    background: #ddd;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
 }
 
 .node-card {
@@ -64,10 +56,10 @@
     transition: all 0.3s ease;
 }
 
-    .node-card:hover {
+.node-card:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     border-color: #e0e0e0;
-    }
+}
 
 .node-avatar {
     position: relative;
@@ -94,10 +86,10 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-    .expand-btn:hover {
+.expand-btn:hover {
     background: #026a9e;
     transform: translateX(-50%) scale(1.1);
-    }
+}
 
 .node-info {
     text-align: center;
@@ -114,9 +106,9 @@
     font-size: 12px;
 }
 
-    .node-amounts > div {
+.node-amounts > div {
     margin-bottom: 4px;
-    }
+}
 
 .personal-amount {
     color: #0380C0;
@@ -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);
+    }
+}