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/pages/DashboardPage.jsx

@@ -35,22 +35,26 @@ export function DashboardPage() {
   return (
     <div className="dashboard-page">
       <h2>Dashboard Overview</h2>
+      <p className="dashboard-subtitle">Real-time snapshot of monitored PostgreSQL targets.</p>
       <div className="grid three dashboard-kpis">
         <div className="card stat kpi-card">
+          <div className="kpi-orb blue" />
           <strong>{targets.length}</strong>
-          <span>Total Targets</span>
+          <span className="kpi-label">Total Targets</span>
         </div>
         <div className="card stat kpi-card ok">
+          <div className="kpi-orb green" />
           <strong>{okCount}</strong>
-          <span>Status OK</span>
+          <span className="kpi-label">Status OK</span>
         </div>
         <div className="card stat kpi-card alert">
+          <div className="kpi-orb amber" />
           <strong>{alerts}</strong>
-          <span>Alerts</span>
+          <span className="kpi-label">Alerts</span>
         </div>
       </div>
 
-      <div className="card">
+      <div className="card dashboard-targets-card">
         <div className="dashboard-targets-head">
           <h3>Targets</h3>
           <span>{targets.length} registered</span>
@@ -72,7 +76,7 @@ export function DashboardPage() {
                   <p><strong>DB:</strong> {t.dbname}</p>
                 </div>
                 <div className="target-actions">
-                  <Link className="details-btn" to={`/targets/${t.id}`}>Details</Link>
+                  <Link className="details-btn" to={`/targets/${t.id}`}>Details <span aria-hidden="true">→</span></Link>
                 </div>
               </article>
             );

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 {