From 7e61e507d0e5525547df97e712929a9b0edd08bd Mon Sep 17 00:00:00 2001
From: chrisnov-it <contact@chrisnov.com>
Date: Tue, 23 Jun 2026 13:55:50 +0800
Subject: [PATCH] UI-006: Polish cards, typography, spacing

- Consolidated card/activity styles into style.css
- Added hover effects with box-shadow for stat cards
- Indigo accent border on activity items
- Gradient section dividers between dashboard blocks
- Removed duplicate inline CSS from index.html
- Full dark mode support for all new styles

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/css/style.css | 39 ++++++++++++++++++++++++++++++++++++++-
 templates/index.html | 28 ++++++----------------------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 057e6ff..e90bd73 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -30,4 +30,41 @@
         /* Dark mode scrollbar */
         .dark .overflow-auto::-webkit-scrollbar { width: 6px; }
         .dark .overflow-auto::-webkit-scrollbar-track { background: #1e293b; }
-        .dark .overflow-auto::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
\ No newline at end of file
+        .dark .overflow-auto::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
+
+        /* Card & UI Polish */
+        .stat-card {
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .stat-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.05);
+        }
+        .dark .stat-card:hover {
+            box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -5px rgba(0, 0, 0, 0.2);
+        }
+        .chart-container {
+            position: relative;
+            height: 300px;
+        }
+        .activity-item {
+            border-left: 4px solid #6366f1;
+            transition: background-color 0.2s ease;
+        }
+        .activity-item:hover {
+            background-color: #f8fafc;
+        }
+        .dark .activity-item:hover {
+            background-color: rgba(51, 65, 85, 0.5);
+        }
+        .gradient-border {
+            border-left: 4px solid;
+            border-image: linear-gradient(to bottom, #6366f1, #8b5cf6) 1;
+        }
+        .section-divider {
+            height: 1px;
+            background: linear-gradient(to right, transparent, rgba(99, 102, 241, 0.3), transparent);
+        }
+        .dark .section-divider {
+            background: linear-gradient(to right, transparent, rgba(99, 102, 241, 0.15), transparent);
+        }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index effa768..d9b712e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,28 +9,6 @@
     border-radius: 12px;
 }
 
-.stat-card {
-    transition: transform 0.2s ease;
-}
-
-.stat-card:hover {
-    transform: translateY(-2px);
-}
-
-.activity-item {
-    border-left: 4px solid #3b82f6;
-    transition: background-color 0.2s ease;
-}
-
-.activity-item:hover {
-    background-color: #f8fafc;
-}
-
-.chart-container {
-    position: relative;
-    height: 300px;
-}
-
 .floating-ai-btn {
     position: fixed;
     bottom: 2rem;
@@ -189,6 +167,9 @@
   </div>
 </div>
 
+<!-- Section Divider -->
+<div class="section-divider my-6"></div>
+
 <!-- Three Column Layout -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
   <!-- Charts Column (2/3 width) -->
@@ -254,6 +235,9 @@
   </div>
 </div>
 
+<!-- Section Divider -->
+<div class="section-divider my-6"></div>
+
 <!-- BOT AKTIF -->
 <div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
   <div class="p-6 border-b dark:border-slate-700">