feat(dashboard): reorganize budget and risk cards

web/src/assets/styles/views/overview-view.css

@@ -7,24 +7,8 @@
   animation: fadeUp 260ms var(--ease) both;
 }
 
-.dashboard-loading-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 20;
-  display: grid;
-  place-content: center;
-  justify-items: center;
-  gap: 10px;
-  min-height: 320px;
-  padding: 24px;
-  border: 1px solid #e2e8f0;
-  border-radius: 4px;
-  background: rgba(248, 250, 252, .88);
-  backdrop-filter: blur(2px);
-}
-
-.dashboard.is-loading > :not(.dashboard-loading-overlay) {
-  pointer-events: none;
+.dashboard-loading-state {
+  min-height: 0;
 }
 
 .kpi-grid {
@@ -151,6 +135,7 @@
 .bottom-grid .dashboard-card:nth-child(1) { animation-delay: 290ms; }
 .bottom-grid .dashboard-card:nth-child(2) { animation-delay: 360ms; }
 .bottom-grid .dashboard-card:nth-child(3) { animation-delay: 430ms; }
+.bottom-grid .dashboard-card:nth-child(4) { animation-delay: 500ms; }
 
 .dashboard-card:hover {
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
@@ -171,9 +156,11 @@
 .rank-panel,
 .employee-rank-panel,
 .top-claim-panel,
-.budget-metrics-panel,
-.bottleneck-panel,
-.budget-panel {
+.bottleneck-panel {
+  grid-column: span 6;
+}
+
+.budget-metrics-panel {
   grid-column: span 6;
 }
 
@@ -448,7 +435,6 @@
 
 .bottleneck-panel,
 .budget-metrics-panel,
-.budget-panel,
 .top-claim-panel,
 .model-panel,
 .feedback-panel {
@@ -456,8 +442,7 @@
   flex-direction: column;
 }
 
-.bottleneck-panel .text-link,
-.budget-panel .text-link {
+.bottleneck-panel .text-link {
   margin-top: auto;
 }
 
@@ -522,10 +507,33 @@
   font-size: 12px;
 }
 
+.budget-metrics-content {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(190px, .86fr) minmax(0, 1.14fr);
+  gap: 16px;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.budget-gauge-block {
+  min-width: 0;
+  display: grid;
+  place-items: center;
+  padding-right: 16px;
+  border-right: 1px solid #f1f5f9;
+}
+
+.budget-gauge-block :deep(.gauge-chart) {
+  width: 100%;
+  min-height: 210px;
+}
+
 .budget-metric-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
+  align-content: stretch;
 }
 
 .budget-metric-item {
@@ -533,7 +541,8 @@
   align-items: flex-start;
   gap: 10px;
   min-width: 0;
-  padding: 12px;
+  min-height: 68px;
+  padding: 10px;
   border: 1px solid #e2e8f0;
   border-radius: 4px;
   background: #f8fafc;
@@ -576,7 +585,7 @@
 .budget-metric-item strong {
   margin-top: 5px;
   color: #0f172a;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 850;
 }
 
@@ -856,13 +865,15 @@
   }
 
   .donut-panel,
-  .budget-metrics-panel,
   .bottleneck-panel,
-  .budget-panel,
   .model-panel,
   .feedback-panel {
     grid-column: span 6;
   }
+
+  .budget-metrics-panel {
+    grid-column: span 12;
+  }
 }
 
 @media (max-width: 1440px) {
@@ -923,7 +934,6 @@
   .donut-panel,
   .budget-metrics-panel,
   .bottleneck-panel,
-  .budget-panel,
   .model-panel,
   .feedback-panel {
     grid-column: span 1;
@@ -957,6 +967,17 @@
     grid-template-columns: 1fr;
   }
 
+  .budget-metrics-content {
+    grid-template-columns: 1fr;
+  }
+
+  .budget-gauge-block {
+    padding-right: 0;
+    padding-bottom: 14px;
+    border-right: 0;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
   .rank-value {
     grid-column: 2 / -1;
   }