micro-users 1.8.3__tar.gz → 1.8.6__tar.gz

{micro_users-1.8.3 → micro_users-1.8.6}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: micro_users
-Version: 1.8.3
+Version: 1.8.6
 Summary: Arabic Django user management app with abstract user, permissions, and activity logging
 Home-page: https://github.com/debeski/micro-users
 Author: DeBeski
@@ -92,6 +92,21 @@ MIDDLEWARE = [
 ]
 ```
 
+3. Add Context Processor in `settings.py` (Optional, for `scope_enabled` variable in templates):
+```python
+TEMPLATES = [
+    {
+        # ...
+        'OPTIONS': {
+            'context_processors': [
+                # ...
+                'users.context_processors.scope_settings', # Add this line
+            ],
+        },
+    },
+]
+```
+
 3. Set custom user model in `settings.py`:
 ```python
 AUTH_USER_MODEL = 'users.CustomUser'
@@ -215,3 +230,6 @@ MICRO_USERS_THEME = {
 | v1.8.1   | • **UI Refinement**: Swapped `Email` and `Phone` positions across all forms, tables, and detail views<br>• **Field Logic**: Set `Email` and `Phone` as optional (not required) for all users<br>• **Security**: Added `manage_staff` custom permission to restrict `is_staff` management to authorized managers only<br>• **Bug Fix**: Reserved `manage_staff` assignment power strictly for Superusers and fixed UI grouping for custom permissions |
 | v1.8.2   | • **Login UX**: Enhanced login flow with auto-focus on username and improved "Enter to Submit" handling |
 | v1.8.3   | • **CSP Compliance**: Added `nonce` attribute support to all inline and external script tags (Login, Permissions, Manage Users) for Content Security Policy compliance |
+| v1.8.4   | • **Strict CSP**: Refactored inline JS event handlers to use Event Listeners, fully resolving CSP violation errors |
+| v1.8.5   | • **Optional Scopes**: Added ability for Superusers to toggle Scope system ON/OFF via User Management interface |
+| v1.8.6   | • **Strict CSP Repair**: Fixed remaining inline event handlers in User Management pages (`manage_users`, `scope_form`) that were violating CSP directives, moving all logic to external `manage_users.js` |

{micro_users-1.8.3 → micro_users-1.8.6}/README.md

@@ -60,6 +60,21 @@ MIDDLEWARE = [
 ]
 ```
 
+3. Add Context Processor in `settings.py` (Optional, for `scope_enabled` variable in templates):
+```python
+TEMPLATES = [
+    {
+        # ...
+        'OPTIONS': {
+            'context_processors': [
+                # ...
+                'users.context_processors.scope_settings', # Add this line
+            ],
+        },
+    },
+]
+```
+
 3. Set custom user model in `settings.py`:
 ```python
 AUTH_USER_MODEL = 'users.CustomUser'
@@ -182,4 +197,7 @@ MICRO_USERS_THEME = {
 | v1.8.0   | • **Permissions UI**: Complete redesign with App/Model-based grouping and hierarchical checkboxes<br>• **Aesthetics**: Applied modern glassmorphism theme to permission cards with interactive toggles<br>• **Security**: Implemented 3-level security logic (GM, SM, User) and "invisible" Superuser protection<br>• **Foolproofing**: Added self-editing protection for staff and scope enforcement for managers<br>• **Localization**: Fully translated system auth labels and metadata to Arabic |
 | v1.8.1   | • **UI Refinement**: Swapped `Email` and `Phone` positions across all forms, tables, and detail views<br>• **Field Logic**: Set `Email` and `Phone` as optional (not required) for all users<br>• **Security**: Added `manage_staff` custom permission to restrict `is_staff` management to authorized managers only<br>• **Bug Fix**: Reserved `manage_staff` assignment power strictly for Superusers and fixed UI grouping for custom permissions |
 | v1.8.2   | • **Login UX**: Enhanced login flow with auto-focus on username and improved "Enter to Submit" handling |
-| v1.8.3   | • **CSP Compliance**: Added `nonce` attribute support to all inline and external script tags (Login, Permissions, Manage Users) for Content Security Policy compliance |
+| v1.8.3   | • **CSP Compliance**: Added `nonce` attribute support to all inline and external script tags (Login, Permissions, Manage Users) for Content Security Policy compliance |
+| v1.8.4   | • **Strict CSP**: Refactored inline JS event handlers to use Event Listeners, fully resolving CSP violation errors |
+| v1.8.5   | • **Optional Scopes**: Added ability for Superusers to toggle Scope system ON/OFF via User Management interface |
+| v1.8.6   | • **Strict CSP Repair**: Fixed remaining inline event handlers in User Management pages (`manage_users`, `scope_form`) that were violating CSP directives, moving all logic to external `manage_users.js` |

{micro_users-1.8.3 → micro_users-1.8.6}/micro_users.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: micro-users
-Version: 1.8.3
+Version: 1.8.6
 Summary: Arabic Django user management app with abstract user, permissions, and activity logging
 Home-page: https://github.com/debeski/micro-users
 Author: DeBeski
@@ -92,6 +92,21 @@ MIDDLEWARE = [
 ]
 ```
 
+3. Add Context Processor in `settings.py` (Optional, for `scope_enabled` variable in templates):
+```python
+TEMPLATES = [
+    {
+        # ...
+        'OPTIONS': {
+            'context_processors': [
+                # ...
+                'users.context_processors.scope_settings', # Add this line
+            ],
+        },
+    },
+]
+```
+
 3. Set custom user model in `settings.py`:
 ```python
 AUTH_USER_MODEL = 'users.CustomUser'
@@ -215,3 +230,6 @@ MICRO_USERS_THEME = {
 | v1.8.1   | • **UI Refinement**: Swapped `Email` and `Phone` positions across all forms, tables, and detail views<br>• **Field Logic**: Set `Email` and `Phone` as optional (not required) for all users<br>• **Security**: Added `manage_staff` custom permission to restrict `is_staff` management to authorized managers only<br>• **Bug Fix**: Reserved `manage_staff` assignment power strictly for Superusers and fixed UI grouping for custom permissions |
 | v1.8.2   | • **Login UX**: Enhanced login flow with auto-focus on username and improved "Enter to Submit" handling |
 | v1.8.3   | • **CSP Compliance**: Added `nonce` attribute support to all inline and external script tags (Login, Permissions, Manage Users) for Content Security Policy compliance |
+| v1.8.4   | • **Strict CSP**: Refactored inline JS event handlers to use Event Listeners, fully resolving CSP violation errors |
+| v1.8.5   | • **Optional Scopes**: Added ability for Superusers to toggle Scope system ON/OFF via User Management interface |
+| v1.8.6   | • **Strict CSP Repair**: Fixed remaining inline event handlers in User Management pages (`manage_users`, `scope_form`) that were violating CSP directives, moving all logic to external `manage_users.js` |

{micro_users-1.8.3 → micro_users-1.8.6}/micro_users.egg-info/SOURCES.txt

@@ -11,6 +11,7 @@ micro_users.egg-info/top_level.txt
 users/__init__.py
 users/admin.py
 users/apps.py
+users/context_processors.py
 users/filters.py
 users/forms.py
 users/middleware.py
@@ -18,10 +19,12 @@ users/models.py
 users/signals.py
 users/tables.py
 users/urls.py
+users/utils.py
 users/views.py
 users/migrations/0001_initial.py
 users/migrations/0002_alter_useractivitylog_action.py
 users/migrations/0003_scope_alter_customuser_options_and_more.py
+users/migrations/0004_scopesettings.py
 users/migrations/__init__.py
 users/static/img/default_profile.webp
 users/static/img/login_logo.webp
@@ -31,6 +34,7 @@ users/static/users/css/permissions.css
 users/static/users/css/profile.css
 users/static/users/css/style.css
 users/static/users/js/login.js
+users/static/users/js/manage_users.js
 users/static/users/js/permissions.js
 users/templates/registration/login.html
 users/templates/users/manage_users.html

{micro_users-1.8.3 → micro_users-1.8.6}/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "micro_users"
-version = "1.8.3"
+version = "1.8.6"
 description = "Arabic Django user management app with abstract user, permissions, and activity logging"
 readme = "README.md"
 requires-python = ">=3.11"

{micro_users-1.8.3 → micro_users-1.8.6}/setup.py

@@ -5,7 +5,7 @@ with open("README.md", "r", encoding="utf-8") as fh:
 
 setup(
     name="micro_users",
-    version="1.8.3",
+    version="1.8.6",
     author="DeBeski",
     author_email="debeski1@gmail.com",
     description="Arabic django user management app with abstract user, permissions, and activity logging",

micro_users-1.8.6/users/context_processors.py

@@ -0,0 +1,9 @@
+from .utils import is_scope_enabled
+
+def scope_settings(request):
+    """
+    Context processor to add scope settings to all templates.
+    """
+    return {
+        'scope_enabled': is_scope_enabled()
+    }

{micro_users-1.8.3 → micro_users-1.8.6}/users/forms.py

@@ -5,7 +5,7 @@ from django.contrib.auth.models import Permission as Permissions
 from django.contrib.auth.forms import UserCreationForm, UserChangeForm, PasswordChangeForm, SetPasswordForm
 from django.contrib.auth import get_user_model
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Layout, Field, Div, HTML, Submit
+from crispy_forms.layout import Layout, Field, Div, HTML, Submit, Row
 from crispy_forms.bootstrap import FormActions
 from PIL import Image
 from django.core.exceptions import ValidationError
@@ -165,6 +165,12 @@ class CustomUserCreationForm(UserCreationForm):
             user_perms = self.user.user_permissions.all() | Permissions.objects.filter(group__user=self.user)
             self.fields['permissions'].queryset = self.fields['permissions'].queryset.filter(id__in=user_perms.values_list('id', flat=True))
         
+        ScopeSettings = apps.get_model('users', 'ScopeSettings')
+        if not ScopeSettings.load().is_enabled:
+            self.fields['scope'].disabled = True
+            self.fields['scope'].widget = forms.HiddenInput()
+            self.fields['scope'].required = False
+        
         if self.user and not self.user.is_superuser and self.user.scope:
             self.fields['scope'].initial = self.user.scope
             self.fields['scope'].disabled = True
@@ -187,14 +193,15 @@ class CustomUserCreationForm(UserCreationForm):
         self.fields["email"].label = "البريد الإلكتروني"
         self.fields["first_name"].label = "الاسم"
         self.fields["last_name"].label = "اللقب"
-        self.fields["is_staff"].label = "صلاحيات انشاء و تعديل المستخدمين"
+        self.fields["is_staff"].label = "صلاحيات انشاء و تعديل المستخدمين (مسؤول)"
         self.fields["password1"].label = "كلمة المرور"
         self.fields["password2"].label = "تأكيد كلمة المرور"
         self.fields["is_active"].label = "تفعيل الحساب"
 
         # Help Texts
-        self.fields["username"].help_text = "اسم المستخدم يجب أن يكون فريدًا، 50 حرفًا أو أقل. فقط حروف، أرقام و @ . + - _"
+        self.fields["username"].help_text = "اسم المستخدم يجب أن يكون فريدًا، 20 حرفًا أو أقل. فقط حروف، أرقام و @ . + - _"
         self.fields["email"].help_text = "أدخل عنوان البريد الإلكتروني الصحيح"
+        self.fields["phone"].help_text = "أدخل رقم الهاتف الصحيح بالصيغة الاتية 09XXXXXXXX"
         self.fields["is_staff"].help_text = "يحدد ما إذا كان بإمكان المستخدم الوصول إلى قسم ادارة المستخدمين."
         self.fields["is_active"].help_text = "يحدد ما إذا كان يجب اعتبار هذا الحساب نشطًا."
         self.fields["password1"].help_text = "كلمة المرور يجب ألا تكون مشابهة لمعلوماتك الشخصية، وأن تحتوي على 8 أحرف على الأقل، وألا تكون شائعة أو رقمية بالكامل.."
@@ -203,21 +210,21 @@ class CustomUserCreationForm(UserCreationForm):
         # Use Crispy Forms Layout helper
         self.helper = FormHelper()
         self.helper.layout = Layout(
-            "username",
-            "phone",
-            "password1",
-            "password2",
+            Row(Field("username", css_class="form-control")),            
+            Row(Field("password1", css_class="form-control")),
+            Row(Field("password2", css_class="form-control")),
             HTML("<hr>"),
-            Div(
-                Div(Field("first_name", css_class="col-md-6"), css_class="col-md-6"),
-                Div(Field("last_name", css_class="col-md-6"), css_class="col-md-6"),
+            Row(
+                Div(Field("first_name", css_class="form-control"), css_class="col-md-6"),
+                Div(Field("last_name", css_class="form-control"), css_class="col-md-6"),
                 css_class="row"
             ),
-            Div(
-                Div(Field("email", css_class="col-md-6"), css_class="col-md-6"),
-                Div(Field("scope", css_class="col-md-6"), css_class="col-md-6"),
+            Row(
+                Div(Field("phone", css_class="form-control"), css_class="col-md-6"),
+                Div(Field("email", css_class="form-control"), css_class="col-md-6"),
                 css_class="row"
             ),
+            Row(Field("scope", css_class="form-control")),
             HTML("<hr>"),
             Field("permissions", css_class="col-12"),
             "is_staff",
@@ -233,7 +240,7 @@ class CustomUserCreationForm(UserCreationForm):
                 ),
                 HTML(
                     """
-                    <a href="{% url 'manage_users' %}" class="btn btn-secondary">
+                    <a href="{% url 'manage_users' %}" class="btn btn-danger">
                         <i class="bi bi-arrow-return-left text-light me-1 h4"></i> إلغـــاء
                     </a>
                     """
@@ -288,11 +295,11 @@ class CustomUserChangeForm(UserChangeForm):
         self.fields["email"].label = "البريد الإلكتروني"
         self.fields["first_name"].label = "الاسم الاول"
         self.fields["last_name"].label = "اللقب"
-        self.fields["is_staff"].label = "صلاحيات انشاء و تعديل المستخدمين"
+        self.fields["is_staff"].label = "صلاحيات انشاء و تعديل المستخدمين (مسؤول)"
         self.fields["is_active"].label = "الحساب مفعل"
         
         # Help Texts
-        self.fields["username"].help_text = "اسم المستخدم يجب أن يكون فريدًا، 50 حرفًا أو أقل. فقط حروف، أرقام و @ . + - _"
+        self.fields["username"].help_text = "اسم المستخدم يجب أن يكون فريدًا، 20 حرفًا أو أقل. فقط حروف، أرقام و @ . + - _"
         self.fields["email"].help_text = "أدخل عنوان البريد الإلكتروني الصحيح"
         self.fields["is_staff"].help_text = "يحدد ما إذا كان بإمكان المستخدم الوصول إلى قسم ادارة المستخدمين."
         self.fields["is_active"].help_text = "يحدد ما إذا كان يجب اعتبار هذا الحساب نشطًا. قم بإلغاء تحديد هذا الخيار بدلاً من الحذف."
@@ -300,6 +307,12 @@ class CustomUserChangeForm(UserChangeForm):
         if user_instance:
             self.fields["permissions"].initial = user_instance.user_permissions.all()
 
+        ScopeSettings = apps.get_model('users', 'ScopeSettings')
+        if not ScopeSettings.load().is_enabled:
+            self.fields['scope'].disabled = True
+            self.fields['scope'].widget = forms.HiddenInput()
+            self.fields['scope'].required = False
+
         # --- Foolproofing & Role-based logic ---
         if self.user and not self.user.is_superuser:
             # 1. Self-Editing Protection (Prevents accidental demotion)
@@ -335,19 +348,19 @@ class CustomUserChangeForm(UserChangeForm):
         self.helper = FormHelper()
         self.helper.form_tag = False
         self.helper.layout = Layout(
-            "username",
-            "phone",
+            Row(Field("username", css_class="form-control")),            
             HTML("<hr>"),
-            Div(
-                Div(Field("first_name", css_class="col-md-6"), css_class="col-md-6"),
-                Div(Field("last_name", css_class="col-md-6"), css_class="col-md-6"),
+            Row(
+                Div(Field("first_name", css_class="form-control"), css_class="col-md-6"),
+                Div(Field("last_name", css_class="form-control"), css_class="col-md-6"),
                 css_class="row"
             ),
-            Div(
-                Div(Field("email", css_class="col-md-6"), css_class="col-md-6"),
-                Div(Field("scope", css_class="col-md-6"), css_class="col-md-6"),
+            Row(
+                Div(Field("phone", css_class="form-control"), css_class="col-md-6"),
+                Div(Field("email", css_class="form-control"), css_class="col-md-6"),
                 css_class="row"
             ),
+            Row(Field("scope", css_class="form-control")),
             HTML("<hr>"),
             Field("permissions", css_class="col-12"),
             "is_staff",
@@ -363,14 +376,14 @@ class CustomUserChangeForm(UserChangeForm):
                 ),
                 HTML(
                     """
-                    <a href="{% url 'manage_users' %}" class="btn btn-secondary">
+                    <a href="{% url 'manage_users' %}" class="btn btn-danger">
                         <i class="bi bi-arrow-return-left text-light me-1 h4"></i> إلغـــاء
                     </a>
                     """
                 ),
                 HTML(
                     """
-                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#resetPasswordModal">
+                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#resetPasswordModal">
                         <i class="bi bi-key-fill text-light me-1 h4"></i> إعادة تعيين كلمة المرور
                     </button>
                     """

micro_users-1.8.6/users/migrations/0004_scopesettings.py

@@ -0,0 +1,24 @@
+# Generated by Django 5.2.8 on 2026-01-30 21:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0003_scope_alter_customuser_options_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ScopeSettings',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('is_enabled', models.BooleanField(default=False, verbose_name='تفعيل النطاقات')),
+            ],
+            options={
+                'verbose_name': 'إعدادات النطاق',
+                'verbose_name_plural': 'إعدادات النطاق',
+            },
+        ),
+    ]

{micro_users-1.8.3 → micro_users-1.8.6}/users/models.py

@@ -14,6 +14,24 @@ class Scope(models.Model):
     class Meta:
         verbose_name = "نطاق"
         verbose_name_plural = "النطاقات"
+class ScopeSettings(models.Model):
+    is_enabled = models.BooleanField(default=False, verbose_name="تفعيل النطاقات")
+
+    class Meta:
+        verbose_name = "إعدادات النطاق"
+        verbose_name_plural = "إعدادات النطاق"
+
+    def save(self, *args, **kwargs):
+        self.pk = 1
+        super(ScopeSettings, self).save(*args, **kwargs)
+
+    @classmethod
+    def load(cls):
+        obj, created = cls.objects.get_or_create(pk=1)
+        return obj
+
+    def __str__(self):
+        return "إعدادات النطاق"
 
 class CustomUser(AbstractUser):
     phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="رقم الهاتف")

micro_users-1.8.6/users/static/users/css/login.css

@@ -0,0 +1,273 @@
+:root {
+  --selection-bg: #dbdbdb;
+  --selection-moz-bg: #dbdbdb;
+  --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: #5a6474;
+  --input-text: #2c3e50;
+  --submit-color: #707075;
+  --submit-focus: #575757;
+  --submit-active: #4d4d4d;
+  --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: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 100px); /* Ensure vertical centering within available space */
+}
+
+/* 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: 480px; /* Increased height */
+  margin: 0 auto;
+  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: auto;
+    width: 90%;
+  }
+}
+
+.left {
+  background: var(--left-bg);
+  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 {
+    position: relative;
+    width: 100%;
+    left: 0;
+    margin-bottom: 20px;
+    height: auto;
+    padding: 40px 0;
+  }
+}
+
+.right {
+  background: var(--right-bg);
+  box-shadow: 0 8px 32px 0 var(--right-shadow);
+  color: var(--right-text);
+  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 {
+    position: relative;
+    width: 100%;
+    right: 0;
+    height: 250px;
+  }
+}
+
+.form {
+  margin: 40px;
+  text-align: right; /* RTL */
+  width: calc(100% - 80px);
+}
+
+label {
+  color: var(--label-color);
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 20px;
+  margin-bottom: 8px;
+}
+
+input {
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid #e1e8ed;
+  border-radius: 8px;
+  color: var(--input-text);
+  font-size: 16px;
+  height: 45px;
+  line-height: 45px;
+  outline: none !important;
+  width: 100%;
+  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: white;
+  margin-top: 30px;
+  transition: all 0.3s;
+  background-color: var(--submit-color);
+  border: none;
+  cursor: pointer;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+#submit:hover { 
+  background-color: var(--submit-focus); 
+  transform: translateY(-2px);
+}
+
+#submit:active { transform: translateY(0); }
+
+/* New Utility Classes for specific elements */
+.login-input { 
+  font-size: 18px !important; 
+}
+.login-submit { 
+  font-size: 18px !important; 
+}
+.logo-img { 
+  width: 80%;
+  max-width: 200px;
+  opacity: 0.9;
+}
+
+@media (max-width: 767px) {
+  .logo-img {
+    /* Mask the image to color it with the theme color */
+    -webkit-mask-image: url("/static/img/login_logo.webp");
+    mask-image: url("/static/img/login_logo.webp");
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    background-color: var(--primal, var(--primary-color));
+    /* Hide the original image content so background color shows through mask */
+    object-position: -9999px -9999px; /* Fallback to hide original if mask fails or ensuring background color dominates? 
+                                          Actually, on an IMG tag, background-color renders BEHIND the content. 
+                                          To make this work on an IMG tag, we interpret the img content as the mask 
+                                          and the background-color as the fill. 
+                                          BUT standard behavior: mask cuts out the element. 
+                                          To color it, we need the element to be a block of color. 
+                                          So we set background-color and move the object content away? 
+                                          No, 'content: ""' is invalid on img. 
+                                          The accepted way to recolor an img via CSS only is using mask on a wrapper OR 
+                                          using a filter. 
+                                          Since I can't easily add a wrapper without editing HTML (templates), 
+                                          I will use the mask property directly on the img tag but I need to ensure 
+                                          the image content itself doesn't show?
+                                          Wait, 'mask' creates transparency. It doesn't fill with color.
+                                          A BETTER approach for a single IMG tag:
+                                          Use the mask on a pseudo element? No, img tags don't support pseudo elements.
+                                          
+                                          CORRECT APPROACH: 
+                                          Use `content: url(...)`? No.
+                                          Use `filter: drop-shadow(0 0 0 var(--primal))`? No (adds shadow).
+                                          
+                                          The "Mask" trick for coloring an icon usually requires the element to differ.
+                                          
+                                          However, since I can edit `login.html`?
+                                          Wait, user said "this element... should change color". 
+                                          If I can edit `login.html`, I can add a wrapper.
+                                          But user specified `login.css` context implicitly.
+                                          
+                                          Let's try the `mask` approach on the img tag ITSELF:
+                                          If you set `mask-image` on an element, the element is clipped.
+                                          The visible part is the element's own content (the image) where the mask is opaque.
+                                          So `mask-image: url(self)` just shows the original image.
+                                          
+                                          To RECOLOR it, we need a block of color `background-color: var(--primal)` 
+                                          and mask *that* block with the image shape.
+                                          We can turn the `img` into a block of color by:
+                                          1. Setting `padding` equal to size? No.
+                                          2. Hiding the `src`? 
+                                          
+                                          Alternative: `filter: sepia(1) saturate(10000%) hue-rotate(...)`
+                                          This is hard to match exact theme color.
+                                          
+                                          Let's look at `login.html` to see if I can add a class or wrapper.
+                                          Actually, I'll use the `mask` trick by making the img transparent? 
+                                          No.
+                                          
+                                          Okay, I will replace the img with a div in `login.html`? 
+                                          That might break things.
+                                          
+                                          Let's stick to CSS if possible.
+                                          Ah! `mask-image` works on the *box* of the element.
+                                          If we can make the element's content invisible (e.g. `object-position` off screen) 
+                                          but keep the box size, then `background-color` fills the box.
+                                          Then `mask-image` cuts the background.
+                                          
+                                          Let's try:
+                                          height: (keep same); width: (keep same);
+                                          object-position: -99999px; (moves the image content away)
+                                          background-color: var(--primal);
+                                          mask-image: url(...);
+                                          mask-size: contain;
+                                          mask-repeat: no-repeat;
+                                          mask-position: center;
+                                          
+                                          This works on Chrome/Firefox for `img` tags.
+                                          */
+    
+    height: 100px; /* Need explicit height if object-position moves content? */
+                   /* Actually .logo-img has width 80%, max-width 200px. */
+                   /* WebP aspect ratio might define height. */
+                   /* If I move content, does intrinsic size remain? Usually yes. */
+    object-position: -99999px 0; 
+    background-color: var(--primal, var(--primary-color));
+  }
+}