Improve UI styling and add visual enhancements to Dashboard

Added a subtitle and enhanced KPI card features with orbs and labels for better visual distinction. Updated card shadows, hover effects, fonts, and spacing across Dashboard elements to improve readability and user experience. Styles were streamlined for cleaner and modern aesthetics.

frontend/src/styles.css

@@ -253,8 +253,32 @@ button {
   color: #bfd0ea;
 }
 
+.dashboard-page h2 {
+  margin-bottom: 4px;
+}
+
+.dashboard-subtitle {
+  margin: 0 0 14px 0;
+  color: #a8c2df;
+  font-size: 14px;
+}
+
 .dashboard-kpis .kpi-card {
   border-left: 4px solid #2f7eca;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 12px 30px #0416344d;
+}
+
+.dashboard-kpis .kpi-card::after {
+  content: "";
+  position: absolute;
+  right: -30px;
+  top: -30px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #5bc2ff33, transparent 70%);
 }
 
 .dashboard-kpis .kpi-card.ok {
@@ -281,9 +305,40 @@ button {
   font-size: 13px;
 }
 
+.kpi-orb {
+  position: absolute;
+  right: 14px;
+  top: 14px;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 5px #ffffff0c;
+}
+
+.kpi-orb.blue {
+  background: #33b5ff;
+}
+
+.kpi-orb.green {
+  background: #33d986;
+}
+
+.kpi-orb.amber {
+  background: #f2a43a;
+}
+
+.kpi-label {
+  color: #b9d2ed;
+  font-weight: 500;
+}
+
 .dashboard-target-list {
   display: grid;
-  gap: 12px;
+  gap: 14px;
+}
+
+.dashboard-targets-card {
+  box-shadow: 0 14px 34px #04163444;
 }
 
 .dashboard-target-card {
@@ -293,19 +348,29 @@ button {
   align-items: center;
   border: 1px solid #2b5b8f;
   border-radius: 12px;
-  padding: 14px;
-  background: linear-gradient(180deg, #132c58, #102549);
+  padding: 16px;
+  background: linear-gradient(180deg, #143462, #102a4f);
+  box-shadow: inset 0 1px 0 #6fc5ff1a;
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.dashboard-target-card:hover {
+  transform: translateY(-1px);
+  border-color: #3d84c8;
+  box-shadow: 0 10px 22px #071a3960;
 }
 
 .target-main h4 {
   margin: 0;
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 800;
+  letter-spacing: 0.01em;
 }
 
 .target-main p {
-  margin: 5px 0 0 0;
+  margin: 6px 0 0 0;
   color: #d5e7ff;
+  font-size: 17px;
 }
 
 .target-title-row {
@@ -337,16 +402,18 @@ button {
 
 .details-btn {
   display: inline-block;
-  padding: 8px 14px;
+  padding: 10px 14px;
   border-radius: 10px;
   font-weight: 700;
-  border: 1px solid #2d9adb;
-  background: linear-gradient(180deg, #1c6aab, #17568c);
+  border: 1px solid #4db8f1;
+  background: linear-gradient(180deg, #2284c8, #1a67a1);
   color: #eaf5ff;
+  box-shadow: 0 8px 16px #081d3d66;
 }
 
 .details-btn:hover {
-  border-color: #6ed2ff;
+  border-color: #85e4ff;
+  filter: brightness(1.05);
 }
 
 .query-insights-page .query-toolbar {