Update app.py

app.py

@@ -33,8 +33,11 @@ BASE_TEMPLATE = """
 body {
   margin: 0;
   font-family: 'Segoe UI', sans-serif;
-  background: #f5f5f5;
+  background: #f3f2f1;
+  color: #323130;
 }
+
+/* Sidebar */
 .sidebar {
   width: 240px;
   height: 100vh;
@@ -44,6 +47,8 @@ body {
   display: flex;
   flex-direction: column;
 }
+
+/* Sidebar header */
 .sidebar-header {
   display: flex;
   align-items: center;
@@ -52,12 +57,8 @@ body {
   font-weight: bold;
   background: #1f1f1f;
 }
-.sidebar-header svg {
-  width: 18px;
-  height: 18px;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
+
+/* Sidebar items */
 .sidebar-item {
   padding: 10px 18px;
   cursor: pointer;
@@ -89,11 +90,6 @@ body {
 .sidebar-item.active svg {
   fill: #fff;
 }
-.sidebar-item-arrow {
-  width: 14px;
-  height: 14px;
-  fill: #aaa;
-}
 .sidebar-section {
   margin-top: 14px;
   padding: 8px 18px;
@@ -102,6 +98,8 @@ body {
   text-transform: uppercase;
   color: #aaa;
 }
+
+/* Topbar */
 .topbar {
   height: 52px;
   background: #0078d4;
@@ -142,9 +140,87 @@ body {
   font-size: 12px;
   font-weight: bold;
 }
+
+/* --- MAIN CONTENT AREA --- */
 .main {
   margin-left: 240px;
+  padding: 30px 40px;
+  background: #faf9f8;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+/* Card Layout for PowerApps Look */
+.card {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
   padding: 20px;
+  margin-bottom: 20px;
+  transition: box-shadow 0.2s ease;
+}
+.card:hover {
+  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+}
+
+/* Headings and sections */
+.card h2, .card h3 {
+  margin-top: 0;
+  font-weight: 600;
+  color: #323130;
+}
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: #201f1e;
+}
+
+/* Grid layout for multiple cards */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
+}
+
+/* Buttons */
+button, .btn {
+  display: inline-block;
+  background: #0078d4;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 500;
+}
+button:hover, .btn:hover {
+  background: #106ebe;
+}
+.btn-secondary {
+  background: transparent;
+  border: 1px solid #8a8886;
+  color: #323130;
+}
+.btn-secondary:hover {
+  background: #f3f2f1;
+}
+
+/* Tables or lists inside cards */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+table th, table td {
+  border-bottom: 1px solid #edebe9;
+  padding: 8px;
+  text-align: left;
+}
+table th {
+  background: #f3f2f1;
+  font-weight: 600;
 }
 </style>
 </head>