u

src/FrontOffice.Main/wwwroot/css/site.css

@@ -126,4 +126,73 @@ html, body {
     background: var(--mud-palette-dark-background);
     border-top-color: var(--mud-palette-dark-divider);
 }
+
+/*#region Profile Page Styles*/
+.profile-avatar {
+    width: 80px;
+    height: 80px;
+}
+
+.profile-header {
+    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
+    color: white;
+}
+
+.profile-stats-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.profile-stats-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.settings-section {
+    border: 1px solid var(--mud-palette-divider);
+    border-radius: 8px;
+}
+
+.tab-content {
+    padding: 24px;
+}
+
+.form-section {
+    background: var(--mud-palette-surface);
+    border-radius: 12px;
+    padding: 24px;
+}
+
+.stats-grid .mud-paper {
+    background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-surface-variant) 100%);
+    border: 1px solid var(--mud-palette-divider);
+}
+
+@media (max-width: 768px) {
+    .tab-content {
+        padding: 16px;
+    }
+
+    .form-section {
+        padding: 16px;
+    }
+
+    .profile-avatar {
+        width: 60px;
+        height: 60px;
+    }
+}
+
+/* Dark mode adjustments for profile */
+.mud-theme-dark .profile-stats-card {
+    background: var(--mud-palette-dark-surface);
+}
+
+.mud-theme-dark .settings-section {
+    border-color: var(--mud-palette-dark-divider);
+}
+
+.mud-theme-dark .stats-grid .mud-paper {
+    background: linear-gradient(135deg, var(--mud-palette-dark-surface) 0%, var(--mud-palette-dark-surface-variant) 100%);
+}
+/*#endregion*/
 /*#endregion*/