Refactor styles to use 'background' shorthand property instead of 'background-color' for consistency across components. Updated various components including confirmation pop-up, input fields, lists, marketplace, menu, module toggle, simulation, and more. Enhanced visual effects with backdrop filters and adjusted padding/margins for improved layout. Removed unnecessary styles and optimized hover effects for better user experience.

app/src/styles/components/visualization/floating/common.scss

@@ -3,7 +3,7 @@
 
 .throughput-wrapper,
 .card {
-  background-color: var(--background-color);
+  background: var(--background-color);
   box-shadow: var(--box-shadow-heavy);
   @include flex-center;
   flex-direction: column;
@@ -105,7 +105,7 @@
 }
 
 .productionCapacity-wrapper {
-  background-color: var(--background-color);
+  background: var(--background-color);
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -116,7 +116,7 @@
   .headeproductionCapacityr-wrapper,
   .bar-chart {
     padding: 14px;
-    background-color: var(--background-color);
+    background: var(--background-color);
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -276,7 +276,7 @@
   .icon {
     width: 45px;
     height: 45px;
-    background-color: var(--accent-color);
+    background: var(--accent-color);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -289,7 +289,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  background-color: var(--background-color);
+  background: var(--background-color);
   padding: 14px;
 
   .header {
@@ -307,7 +307,7 @@
 
 .productivity-dashboard {
   width: 100%;
-  background-color: var(--background-color);
+  background: var(--background-color);
   color: white;
   padding: 20px;
   border-radius: 8px;
@@ -324,7 +324,7 @@
     }
 
     .options {
-      background-color: #343b47;
+      background: #343b47;
       width: 30px;
       height: 30px;
       display: flex;
@@ -334,7 +334,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: #49505a;
+        background: #49505a;
       }
     }
   }
@@ -350,7 +350,7 @@
       gap: 10px;
 
       .metric {
-        background-color: #2c3e50;
+        background: #2c3e50;
         padding: 15px;
         border-radius: 4px;
 
@@ -445,7 +445,7 @@
 }
 
 .scaleLabels {
-  background-color: var(--background-color);
+  background: var(--background-color);
   box-shadow: var(--box-shadow-heavy);
   display: flex;
   justify-content: space-between;