micro-users 1.6.2__py3-none-any.whl → 1.7.0__py3-none-any.whl

{micro_users-1.6.2.dist-info → micro_users-1.7.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: micro-users
-Version: 1.6.2
+Version: 1.7.0
 Summary: Arabic Django user management app with abstract user, permissions, and activity logging
 Home-page: https://github.com/debeski/micro-users
 Author: DeBeski
@@ -208,3 +208,5 @@ MICRO_USERS_THEME = {
 | v1.6.0   | • **Automated Activity Logging**: dynamic logging for all CREATE/UPDATE/DELETE actions via Middleware & Signals<br> • **Refactor**: Renamed `Department` model to `Scope` (Scope Management)<br> • Removed manual logging requirement<br> • **Architecture**: Decoupled models, forms, and tables using dynamic imports and `apps.get_model` <br> • **Soft Delete**: Users are now marked as inactive with a timestamp instead of being permanently deleted<br> • **Activity Log**: Deleted users appear with a strikethrough<br> • **CSS Refactor**: Extracted and cleaned up styling with CSS variables<br> • **Login**: Refactored login page with separated JS/CSS and a new modern default logo |
 | v1.6.1   | • **Theme Configuration**: Added `MICRO_USERS_THEME` setting for easy color customization <br> • **Bug Fixes**: Explicitly excluded unwanted columns (id, ip_address, user_agent) from Activity Log table <br> • **UI**: Improved Scope Manager button visibility |
 | v1.6.2   | • **UI**: Improved some tooltips for buttons and descriptions |
+| v1.6.3   | • **Bug Fixes**: Fixed a crash with a table tooltip |
+| v1.7.0   | • **New Theme**: Complete visual overhaul with modern, consistent styling <br> • **Refactor**: Updated Login, Profile, and Detail templates for better UX <br> • **Feature**: Added Scope filter to Activity Logs (superuser only) <br> • **UX**: Clear button in filters now preserves current sort order |

{micro_users-1.6.2.dist-info → micro_users-1.7.0.dist-info}/RECORD

@@ -1,12 +1,12 @@
 users/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 users/admin.py,sha256=CRS5muWUSXUC2pQteSCgUgpFjPtGnx1b5z1daODjUMM,1359
 users/apps.py,sha256=rX3NqBsz2zC_spZbHJ_tbhNwkEFaspPjpS19qil9WBo,1162
-users/filters.py,sha256=TwB47ffslp_H2ZEm8JBOKNktGgix23XDiQdy-HWG7yE,4798
+users/filters.py,sha256=_uvi1qLEE7aLqKLwjIpv6dflKlyFd0t0Muv6IXBfIxw,6094
 users/forms.py,sha256=4poq6wlFysX_r0KFxUd9I2K9eXhOHV36iSTjncRYHyc,16531
 users/middleware.py,sha256=CgzmKb6_4TUkwMZ0h7UgQd80DKUXsmzKvsc3V2JIujY,976
 users/models.py,sha256=XyA4UaRp4DufvgBJKtAGyal3Ci3fZxevyd1fIPqrpEw,2679
 users/signals.py,sha256=blAx8nHsfmn89hMyRBR0Jf706Z07N81ObQMY_MHaBv8,4543
-users/tables.py,sha256=wCno7TZM6nqBHwCzkHduPSAvMRd4t349lHRMwXD4AlQ,2997
+users/tables.py,sha256=6zsQBhlEA74BYsSzzmYeFE0Ll7vZmT8aKMsqRUw_l-k,2968
 users/urls.py,sha256=hg4fiVkWcQlbZ82SZ_HjeFPQUkmK1Y7c1ho_lWBFDRg,1491
 users/views.py,sha256=HGa0x8tVY4ltSelOxHdknjsft9fMKfQTKoXvMaMPlbg,14246
 users/migrations/0001_initial.py,sha256=lx9sSKS-lxHhI6gelVH52NOkwqEMJ32TvOJUn9zaOXM,4709
@@ -15,24 +15,26 @@ users/migrations/0003_scope_alter_customuser_options_and_more.py,sha256=sp3c_NFC
 users/migrations/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 users/static/img/default_profile.webp,sha256=BKUoQHo4z_fZnmc6z6I-KFvLEHahDr98U9LnDQKHLAM,3018
 users/static/img/login_logo.webp,sha256=LdLMqrBlBczctcJVfLk-oxasjqcOgYnvHZ17ZMusVNE,27570
-users/static/users/css/login.css,sha256=4HaGq7P6oPxP9Jayr4fC9TtYwUEuhhtQOum7mjrOxB4,2549
-users/static/users/css/style.css,sha256=RITpRciSynpYwjC7jpPumPA5BAB993RFyuKN9oDp_Y8,4817
+users/static/users/css/detail.css,sha256=YB1XMBmEQluk0WcM3AZ3XKNK4z6f2tFXurz-2igQH7c,1102
+users/static/users/css/login.css,sha256=9TdAt3Cfro4GCWrYK8W9-c-6zr3DbuwsbiFwZ4uBtZM,4171
+users/static/users/css/profile.css,sha256=AZVDK0gFwGo0vgPrmZ0BJVAxax8Icf2h8WFVNbt1UeU,2908
+users/static/users/css/style.css,sha256=rlLk1P4uxw9TKwsFTmXR77gYy0bVptwjzO_m3VGlYDo,1789
 users/static/users/js/anime.min.js,sha256=pD9KZEZQimTLQOMTT99lBhGT7AXyMPz3g92G1iyd470,17179
 users/static/users/js/login.js,sha256=ayXC8B5caDNNKL2UDwnDC2BA3lcNHkJu4PPXLDsviDw,1379
-users/templates/registration/login.html,sha256=2kkQR0TLsZM9gSzMY7J5y3dR7r2al6o_qgc_pGAEENs,3759
+users/templates/registration/login.html,sha256=D5BXzY5E3_Bh4iP5qZsekleRIqt559KpPRpNtWZX9ME,2862
 users/templates/users/manage_users.html,sha256=tIPkdFxm9lC_R184WQlm0UHV7sUS_xNo6f8AjgW18S8,6359
-users/templates/users/user_activity_log.html,sha256=Ns79XPbNegk_lyLRDZ2yZ0PZD32DFOM_6Qvt2qHlSEY,565
-users/templates/users/user_detail.html,sha256=yPiuOGF96rV8t2H1Fl2hhIq78N1588ZFbh5gbAezaxw,2053
+users/templates/users/user_activity_log.html,sha256=nKVOvmkbVjGWZZyYNJahs7drWQFh_hvyUDWuauwJV6U,571
+users/templates/users/user_detail.html,sha256=a_LqslwZOb15yFf1OItxrIWRbeoxK6Tp58ajjlodYc8,5290
 users/templates/users/user_form.html,sha256=jcyI7OQZOY4ue4DajPtfjAt2SmAYO5ZgHNOqTp2-FO0,1352
 users/templates/users/partials/scope_actions.html,sha256=pAcxNMmUHgeZ6baR9pHhy8HUU35emFEb8PDBPnqBSNo,273
 users/templates/users/partials/scope_form.html,sha256=XSUeEoRM-wzDZNFv7AJQBH5TFgaPF1FmwfrKRZ8fpdI,741
 users/templates/users/partials/scope_manager.html,sha256=mqhSg2NA2U_Dc5bIf3OUasTdPqdEfxvxGh5tOjBJ59Y,393
 users/templates/users/partials/user_actions.html,sha256=J44-sn0fMbLUWjdtlcf5YhgT5OYRykr1mFkeVXoI1ew,1543
-users/templates/users/profile/profile.html,sha256=Ir8zvYUgDm89BlwVuuCsPJIVvTPa_2wH3HAaitPc4s8,2911
-users/templates/users/profile/profile_edit.html,sha256=L9DUHlQHG-PmxwxBbSjgPk1dEmy0spPi6wXzT4hQe-U,4218
+users/templates/users/profile/profile.html,sha256=HXxOWsGEAZb731iF-nY00dzbFcgVh60oF0C1X8AySb4,5377
+users/templates/users/profile/profile_edit.html,sha256=hhltTIdl62NNX290nFNZcQwbW1idXEU_DYlrAp07MWk,5242
 users/templates/users/widgets/grouped_permissions.html,sha256=VE7Trm1xBdpMmCMLc--YAbjGxDQj6TxDVwpphe8WuQE,9950
-micro_users-1.6.2.dist-info/LICENSE,sha256=Fco89ULLSSxKkC2KKnx57SaT0R7WOkZfuk8IYcGiN50,1063
-micro_users-1.6.2.dist-info/METADATA,sha256=L8Kxga1f4BEUCvCb_l74JjoYe4v3fzbZN4LFD0xIKP8,9539
-micro_users-1.6.2.dist-info/WHEEL,sha256=pkctZYzUS4AYVn6dJ-7367OJZivF2e8RA9b_ZBjif18,92
-micro_users-1.6.2.dist-info/top_level.txt,sha256=tWT24ZcWau2wrlbpU_h3mP2jRukyLaVYiyHBuOezpLQ,6
-micro_users-1.6.2.dist-info/RECORD,,
+micro_users-1.7.0.dist-info/LICENSE,sha256=Fco89ULLSSxKkC2KKnx57SaT0R7WOkZfuk8IYcGiN50,1063
+micro_users-1.7.0.dist-info/METADATA,sha256=YHzBlmAidK9fcF5jWjfxVuuKsOvxA5CZM2312U8IAfI,9930
+micro_users-1.7.0.dist-info/WHEEL,sha256=pkctZYzUS4AYVn6dJ-7367OJZivF2e8RA9b_ZBjif18,92
+micro_users-1.7.0.dist-info/top_level.txt,sha256=tWT24ZcWau2wrlbpU_h3mP2jRukyLaVYiyHBuOezpLQ,6
+micro_users-1.7.0.dist-info/RECORD,,

users/filters.py

@@ -3,7 +3,7 @@
 import django_filters
 from django.contrib.auth import get_user_model
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Layout, Row, Column, Field, HTML
+from crispy_forms.layout import Layout, Row, Column, Field, HTML, Hidden
 from django.db.models import Q
 from django.apps import apps  # Import apps
 
@@ -23,11 +23,19 @@ class UserFilter(django_filters.FilterSet):
         self.form.helper.form_method = 'GET'
         self.form.helper.form_class = 'form-inline'
         self.form.helper.form_show_labels = False
-        self.form.helper.layout = Layout(
+        self.form.helper.layout = Layout()
+        if 'sort' in self.data:
+            self.form.helper.layout.append(Hidden('sort', self.data['sort']))
+        # Prepare clear button URL with sort parameter if exists
+        clear_url = '{% url "manage_users" %}'
+        if 'sort' in self.data:
+            clear_url += f"?sort={self.data['sort']}"
+
+        self.form.helper.layout.append(
             Row(
                 Column(Field('keyword', placeholder="البحث"), css_class='form-group col-auto flex-fill'),
                 Column(HTML('<button type="submit" class="btn btn-secondary w-100"><i class="bi bi-search bi-font text-light me-2"></i>بحـــث</button>'), css_class='col-auto text-center'),
-                Column(HTML('{% if request.GET and request.GET.keys|length > 1 %} <a href="{% url "manage_users" %}" class="btn btn-warning bi-font">clear</a> {% endif %}'), css_class='form-group col-auto text-center'),
+                Column(HTML(f'{{% if request.GET and request.GET.keys|length > 1 %}} <a href="{clear_url}" class="btn btn-warning bi-font">clear</a> {{% endif %}}'), css_class='form-group col-auto text-center'),
                 css_class='form-row'
             ),
         )
@@ -56,6 +64,13 @@ class UserActivityLogFilter(django_filters.FilterSet):
         choices=[],
         empty_label="السنة",
     )
+    scope = django_filters.ModelChoiceFilter(
+        queryset=apps.get_model('users', 'Scope').objects.all(),
+        field_name='user__scope',
+        label="النطاق",
+        empty_label="الكل",
+        required=False
+    )
     class Meta:
         model = apps.get_model('users', 'UserActivityLog')
         fields = {
@@ -70,27 +85,48 @@ class UserActivityLogFilter(django_filters.FilterSet):
         self.filters['year'].field.widget.attrs.update({
             'onchange': 'this.form.submit();'
         })
+        self.filters['scope'].field.widget.attrs.update({
+            'onchange': 'this.form.submit();'
+        })
+
+        if self.request and self.request.user.scope:
+            del self.filters['scope']
+        
         self.form.helper = FormHelper()
         self.form.helper.form_method = 'GET'
         self.form.helper.form_class = 'form-inline'
         self.form.helper.form_show_labels = False
         
-        self.form.helper.layout = Layout(
-            Row(
-                Column(Field('keyword', placeholder="البحث"), css_class='form-group col-auto flex-fill'),
-                Column(Field('year', placeholder="السنة", dir="rtl"), css_class='form-group col-auto'),
-                Column(
-                    Row(
-                        Column(Field('timestamp__gte', css_class='flatpickr', placeholder="من "), css_class='col-6'),
-                        Column(Field('timestamp__lte', css_class='flatpickr', placeholder="إلى "), css_class='col-6'),
-                    ), 
-                    css_class='col-auto flex-fill'
-                ),
-                Column(HTML('<button type="submit" class="btn btn-secondary w-100"><i class="bi bi-search bi-font text-light me-2"></i>بحـــث</button>'), css_class='col-auto text-center'),
-                Column(HTML('{% if request.GET and request.GET.keys|length > 1 %} <a href="{% url "user_activity_log" %}" class="btn btn-warning bi-font">clear</a> {% endif %}'), css_class='form-group col-auto text-center'),
-                css_class='form-row'
+        self.form.helper.layout = Layout()
+        if 'sort' in self.data:
+            self.form.helper.layout.append(Hidden('sort', self.data['sort']))
+            
+        row_fields = [
+            Column(Field('keyword', placeholder="البحث"), css_class='form-group col-auto flex-fill'),
+        ]
+        
+        if not (self.request and self.request.user.scope):
+             row_fields.append(Column(Field('scope', placeholder="النطاق", dir="rtl"), css_class='form-group col-auto'))
+
+        # Prepare clear button URL with sort parameter if exists
+        clear_url = '{% url "user_activity_log" %}'
+        if 'sort' in self.data:
+            clear_url += f"?sort={self.data['sort']}"
+
+        row_fields.extend([
+            Column(Field('year', placeholder="السنة", dir="rtl"), css_class='form-group col-auto'),
+            Column(
+                Row(
+                    Column(Field('timestamp__gte', css_class='flatpickr', placeholder="من "), css_class='col-6'),
+                    Column(Field('timestamp__lte', css_class='flatpickr', placeholder="إلى "), css_class='col-6'),
+                ), 
+                css_class='col-auto flex-fill'
             ),
-        )
+            Column(HTML('<button type="submit" class="btn btn-secondary w-100"><i class="bi bi-search bi-font text-light me-2"></i>بحـــث</button>'), css_class='col-auto text-center'),
+            Column(HTML(f'{{% if request.GET and request.GET.keys|length > 1 %}} <a href="{clear_url}" class="btn btn-warning bi-font">clear</a> {{% endif %}}'), css_class='form-group col-auto text-center'),
+        ])
+
+        self.form.helper.layout.append(Row(*row_fields, css_class='form-row'))
     def filter_keyword(self, queryset, name, value):
         """
         Filter the queryset by matching the keyword in username, email, phone, and occupation.
@@ -102,7 +138,6 @@ class UserActivityLogFilter(django_filters.FilterSet):
             Q(action__icontains=value) |
             Q(model_name__icontains=value) |
             Q(number__icontains=value) |
-            Q(scope__name__icontains=value) |
             Q(ip_address__icontains=value)
         )
 

users/static/users/css/detail.css

@@ -0,0 +1,47 @@
+.glass-detail {
+    background: rgba(255, 255, 255, 0.9); /* Increased opacity */
+    backdrop-filter: none !important; /* Explicitly disabled */
+    -webkit-backdrop-filter: none !important;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+    border-radius: 16px;
+    padding: 2rem;
+    margin-top: 1rem;
+}
+.info-group {
+    margin-bottom: 1.5rem;
+}
+.info-label-sm {
+    font-size: 0.85rem;
+    color: #6c757d;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+.info-value-lg {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--title);
+}
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+.status-active {
+    background-color: rgba(25, 135, 84, 0.15);
+    color: #198754;
+}
+.status-inactive {
+    background-color: rgba(220, 53, 69, 0.15);
+    color: #dc3545;
+}
+.section-header {
+    color: var(--primal_dark);
+    border-bottom: 2px solid rgba(0,0,0,0.05);
+    padding-bottom: 10px;
+    font-weight: 800;
+}

users/static/users/css/login.css

@@ -1,141 +1,184 @@
 :root {
   --selection-bg: #dbdbdb;
   --selection-moz-bg: #dbdbdb;
-  --left-bg: white;
-  --left-shadow: rgba(0,0,0,0.03);
-  --right-bg: #474745;
-  --right-shadow: rgba(0,0,0,0.07);
+  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  --left-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism */
+  --left-shadow: rgba(0,0,0,0.05); /* Softer shadow */
+  --right-bg: #2b3035; /* Darker accent */
+  --right-shadow: rgba(0,0,0,0.1);
   --right-text: #F1F1F2;
-  --label-color: #c2c2c5;
-  --input-text: #000000;
+  --label-color: #5a6474;
+  --input-text: #2c3e50;
   --submit-color: #707075;
   --submit-focus: #575757;
   --submit-active: #4d4d4d;
-  --gradient-start: #474745;
-  --gradient-end: #a2a2a7;
+  --primary-color: #2363c3;
 }
 
 ::selection { background: var(--selection-bg); }
 ::-webkit-selection { background: var(--selection-bg); }
 ::-moz-selection { background: var(--selection-moz-bg); }
 
+/* REMOVED body styles that break titlebar layout (display: flex, center, etc) */
+/* Instead, we style the page container to center content inside the main content area */
 .page {
   display: flex;
   flex-direction: column;
-  height: calc(100% - 15vh);
-  position: absolute;
-  place-content: center;
-  width: calc(100% - 40px);
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 100px); /* Ensure vertical centering within available space */
 }
 
-@media (max-width: 767px) {
-  .page {
-    height: auto;
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-  }
+/* Gradient background applied to body via style.css or separate logic, 
+   but since this login.css is likely scoped or loaded on login page, 
+   we can set background on .page or keep it on body if safe. 
+   To be safe and avoid breaking layout, we set background on body 
+   but NOT layout properties. */
+body {
+    background: var(--bg-gradient);
+    /* No display:flex here to avoid squishing the titlebar */
 }
 
 .container {
-  height: 320px;
+  height: 480px; /* Increased height */
   margin: 0 auto;
-  width: 640px;
+  width: 800px; /* Increased width */
+  display: flex;
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+  position: relative;
 }
 
 @media (max-width: 767px) {
   .container {
     flex-direction: column;
-    height: 630px;
-    width: 320px;
+    height: auto;
+    width: 90%;
   }
 }
 
 .left {
   background: var(--left-bg);
-  height: calc(100% - 40px);
-  top: 20px;
-  position: relative;
-  width: 60%;
-  box-shadow: 0px 0px 10px 4px var(--left-shadow);
+  height: 380px;
+  position: absolute;
+  left: 50px; /* Overlap effect */
+  width: 400px;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 @media (max-width: 767px) {
   .left {
-    height: 100%;
-    left: 5%;
-    width: 110%;
-    max-height: 270px;
+    position: relative;
+    width: 100%;
+    left: 0;
+    margin-bottom: 20px;
+    height: auto;
+    padding: 40px 0;
   }
 }
 
 .right {
   background: var(--right-bg);
-  box-shadow: 0px 0px 20px 8px var(--right-shadow);
+  box-shadow: 0 8px 32px 0 var(--right-shadow);
   color: var(--right-text);
-  position: relative;
-  width: 58%;
+  position: absolute;
+  right: 50px;
+  width: 350px;
+  height: 480px;
+  border-radius: 20px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 @media (max-width: 767px) {
   .right {
-    flex-shrink: 0;
-    height: 100%;
+    position: relative;
     width: 100%;
-    max-height: 350px;
+    right: 0;
+    height: 250px;
   }
 }
 
-svg {
-  position: absolute;
-  width: 320px;
-}
-
-path {
-  fill: none;
-  stroke: url(#linearGradient);
-  stroke-width: 3;
-  stroke-dasharray: 240 1386;
-}
-
 .form {
-  margin: 35px 35px 35px 20px;
-  position: absolute;
+  margin: 40px;
+  text-align: right; /* RTL */
+  width: calc(100% - 80px);
 }
 
 label {
   color: var(--label-color);
   display: block;
   font-size: 14px;
-  height: 16px;
+  font-weight: 600;
   margin-top: 20px;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
 }
 
 input {
-  background: transparent;
-  border: 0;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid #e1e8ed;
+  border-radius: 8px;
   color: var(--input-text);
-  font-size: 20px;
-  height: 30px;
-  line-height: 30px;
+  font-size: 16px;
+  height: 45px;
+  line-height: 45px;
   outline: none !important;
   width: 100%;
-  margin-top: 30px;
-  margin-bottom: 10px;
+  padding: 0 15px; /* Add padding */
+  margin-top: 5px; /* Reduced top margin since we use padding */
+  margin-bottom: 15px;
+  transition: all 0.3s ease;
+}
+
+input:focus {
+  border-color: var(--primary-color);
+  background: white;
+  box-shadow: 0 0 0 3px rgba(35, 99, 195, 0.1);
 }
 
 input::-moz-focus-inner { border: 0; }
 
 #submit {
-  color: var(--submit-color);
-  margin-top: 40px;
-  transition: color 300ms;
+  color: white;
+  margin-top: 30px;
+  transition: all 0.3s;
+  background-color: var(--primary-color);
+  border: none;
+  cursor: pointer;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  box-shadow: 0 4px 15px rgba(35, 99, 195, 0.3);
 }
 
-#submit:focus { color: var(--submit-focus); }
-#submit:active { color: var(--submit-active); }
+#submit:hover { 
+  background-color: #1e4f99; 
+  transform: translateY(-2px);
+}
+
+#submit:active { transform: translateY(0); }
 
 /* New Utility Classes for specific elements */
-.login-input { font-size: 28px !important; }
-.login-submit { font-size: 25px !important; }
-.logo-img { width: 100%; }
+.login-input { 
+  font-size: 18px !important; 
+}
+.login-submit { 
+  font-size: 18px !important; 
+}
+.logo-img { 
+  width: 80%;
+  max-width: 200px;
+  opacity: 0.9;
+}

users/static/users/css/profile.css

@@ -0,0 +1,123 @@
+/* Profile View Styles */
+.glass-profile {
+    background: rgba(255, 255, 255, 0.65);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+    border-radius: 16px;
+    padding: 2rem;
+}
+.profile-img-container {
+    position: relative;
+    overflow: hidden;
+    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    border: 4px solid rgba(255, 255, 255, 0.8);
+}
+.profile-img-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.info-label {
+    font-size: 0.9rem;
+    color: #6c757d;
+    margin-bottom: 0.2rem;
+}
+.info-value {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--title);
+    margin-bottom: 1.5rem;
+}
+
+/* Scoped Action Button for View Profile */
+.glass-profile .action-btn {
+    transition: all 0.3s ease;
+    border-radius: 12px;
+    padding: 10px 20px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+.glass-profile .action-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.glass-profile .page-title {
+    color: var(--primal_dark);
+    font-weight: 800;
+    margin-bottom: 2rem;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+/* Profile Edit Styles */
+.glass-card {
+    background: rgba(255, 255, 255, 0.65);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+    border-radius: 16px;
+    padding: 2rem;
+}
+
+.glass-card .page-title {
+    color: var(--primal_dark);
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.form-label-custom {
+    font-weight: 600;
+    color: #495057;
+    margin-bottom: 0.5rem;
+    display: block;
+}
+.form-control-glass {
+    background: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    padding: 0.6rem 1rem;
+    transition: all 0.3s ease;
+}
+.form-control-glass:focus {
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 0 4px rgba(35, 99, 195, 0.15);
+    border-color: var(--primal);
+}
+.profile-preview-container {
+    position: sticky;
+    top: 20px;
+    text-align: center;
+}
+.preview-img {
+    border-radius: 50%;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+    border: 5px solid rgba(255, 255, 255, 0.8);
+    transition: transform 0.3s ease;
+}
+.preview-img:hover {
+    transform: scale(1.02);
+}
+
+/* Scoped Action Button for Edit Profile */
+.glass-card .action-btn {
+    border-radius: 10px;
+    padding: 10px 25px;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s;
+}
+.glass-card .action-btn:hover {
+    transform: translateY(-2px);
+}