From 58d301e994f63a400d7e101d519b7b62a44b49e0 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Tue, 5 Aug 2025 15:35:56 +0500
Subject: [PATCH] add/delete records

---
 .idea/workspace.xml                           |  6 +-
 backup/templates/backup/restore.html          | 78 +++++++--------
 .../dns/addDeleteDNSRecordsCloudFlare.html    | 98 +++++++++----------
 .../templates/mailServer/EmailLimits.html     | 64 ++++++------
 .../templates/mailServer/dkimManager.html     | 88 ++++++++---------
 5 files changed, 167 insertions(+), 167 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 03d7f27f9..ae01bff0e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,9 +6,9 @@
   <component name="ChangeListManager">
     <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/dns/templates/dns/addDeleteDNSRecords.html" beforeDir="false" afterPath="$PROJECT_DIR$/dns/templates/dns/addDeleteDNSRecords.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/dns/templates/dns/createNameServer.html" beforeDir="false" afterPath="$PROJECT_DIR$/dns/templates/dns/createNameServer.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/websiteFunctions/templates/websiteFunctions/launchChild.html" beforeDir="false" afterPath="$PROJECT_DIR$/websiteFunctions/templates/websiteFunctions/launchChild.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/dns/templates/dns/addDeleteDNSRecordsCloudFlare.html" beforeDir="false" afterPath="$PROJECT_DIR$/dns/templates/dns/addDeleteDNSRecordsCloudFlare.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/mailServer/templates/mailServer/EmailLimits.html" beforeDir="false" afterPath="$PROJECT_DIR$/mailServer/templates/mailServer/EmailLimits.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/mailServer/templates/mailServer/dkimManager.html" beforeDir="false" afterPath="$PROJECT_DIR$/mailServer/templates/mailServer/dkimManager.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/backup/templates/backup/restore.html b/backup/templates/backup/restore.html
index 93d87ca85..39c59b4b6 100644
--- a/backup/templates/backup/restore.html
+++ b/backup/templates/backup/restore.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
     }
@@ -26,7 +26,7 @@
     .page-title {
         font-size: 3rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -36,7 +36,7 @@
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 1.5rem;
         max-width: 800px;
         margin-left: auto;
@@ -51,8 +51,8 @@
     }
     
     .info-box {
-        background: #e0e7ff;
-        border: 1px solid #c7d2fe;
+        background: var(--accent-light, #e0e7ff);
+        border: 1px solid var(--accent-border, #c7d2fe);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -68,7 +68,7 @@
     
     .info-box p {
         margin: 0;
-        color: #3730a3;
+        color: var(--info-dark, #3730a3);
         font-size: 0.925rem;
     }
     
@@ -96,9 +96,9 @@
     }
     
     .btn-secondary {
-        background: #fff;
+        background: var(--bg-primary, #fff);
         color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
         padding: 0.75rem 2rem;
         border-radius: 10px;
         font-weight: 500;
@@ -112,32 +112,32 @@
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-color: #5b5fcf;
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
     }
     
     .main-card {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 16px;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-primary, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -160,18 +160,18 @@
         display: block;
         margin-bottom: 0.5rem;
         font-weight: 500;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
     }
     
     .form-control {
         width: 100%;
         padding: 0.875rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 10px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-primary, #fff);
     }
     
     .form-control:focus {
@@ -181,8 +181,8 @@
     }
     
     .restore-progress-card {
-        background: #fff3cd;
-        border: 1px solid #ffeaa7;
+        background: var(--warning-light, #fff3cd);
+        border: 1px solid var(--warning-border, #ffeaa7);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -214,20 +214,20 @@
     
     .status-details h4 {
         margin: 0;
-        color: #856404;
+        color: var(--warning-text, #856404);
         font-size: 1rem;
     }
     
     .status-details p {
         margin: 0;
-        color: #856404;
+        color: var(--warning-text, #856404);
         font-size: 0.875rem;
         opacity: 0.8;
     }
     
     .backup-select-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 12px;
         padding: 2rem;
         margin-bottom: 2rem;
@@ -251,21 +251,21 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-light, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-light, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 3px solid #e8e9ff;
+        border: 3px solid var(--border-primary, #e8e9ff);
         border-top-color: #5b5fcf;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -275,31 +275,31 @@
     
     .progress-table {
         width: 100%;
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .progress-table th {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         padding: 0.75rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .progress-table td {
         padding: 0.75rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #f3f4f6;
+        border-bottom: 1px solid var(--border-light, #f3f4f6);
     }
     
     .file-badge {
-        background: #e0e7ff;
+        background: var(--accent-light, #e0e7ff);
         color: #5b5fcf;
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
diff --git a/dns/templates/dns/addDeleteDNSRecordsCloudFlare.html b/dns/templates/dns/addDeleteDNSRecordsCloudFlare.html
index ec836f4da..a52aa0de5 100644
--- a/dns/templates/dns/addDeleteDNSRecordsCloudFlare.html
+++ b/dns/templates/dns/addDeleteDNSRecordsCloudFlare.html
@@ -23,7 +23,7 @@
         .page-title {
             font-size: 2.5rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 0.5rem;
             display: flex;
             align-items: center;
@@ -33,7 +33,7 @@
         
         .page-subtitle {
             font-size: 1.125rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 0;
         }
         
@@ -42,8 +42,8 @@
             align-items: center;
             gap: 0.5rem;
             padding: 0.5rem 1rem;
-            background: #fff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-primary, #fff);
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 8px;
             color: #5b5fcf;
             text-decoration: none;
@@ -59,24 +59,24 @@
         }
         
         .main-card {
-            background: white;
+            background: var(--bg-primary, white);
             border-radius: 16px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-            border: 1px solid #e8e9ff;
+            box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.08));
+            border: 1px solid var(--border-primary, #e8e9ff);
             overflow: hidden;
             animation: fadeInUp 0.5s ease-out;
         }
         
         .card-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-primary, #e8e9ff);
         }
         
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin: 0;
             display: flex;
             align-items: center;
@@ -89,7 +89,7 @@
         
         .modern-tabs {
             display: flex;
-            border-bottom: 2px solid #e8e9ff;
+            border-bottom: 2px solid var(--border-primary, #e8e9ff);
             margin-bottom: 2rem;
             gap: 1rem;
         }
@@ -97,7 +97,7 @@
         .modern-tab {
             position: relative;
             padding: 1rem 2rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             text-decoration: none;
             font-weight: 500;
             transition: all 0.3s ease;
@@ -148,18 +148,18 @@
             display: block;
             margin-bottom: 0.5rem;
             font-weight: 500;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
         }
         
         .form-control {
             width: 100%;
             padding: 0.75rem 1rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 8px;
             font-size: 0.875rem;
             transition: all 0.3s ease;
-            background: #fff;
+            background: var(--bg-primary, #fff);
         }
         
         .form-control:focus {
@@ -189,9 +189,9 @@
         }
         
         .btn-secondary {
-            background: #fff;
+            background: var(--bg-primary, #fff);
             color: #5b5fcf;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-primary, #e8e9ff);
             padding: 0.75rem 2rem;
             border-radius: 8px;
             font-weight: 500;
@@ -200,7 +200,7 @@
         }
         
         .btn-secondary:hover {
-            background: #f8f9ff;
+            background: var(--bg-secondary, #f8f9ff);
             border-color: #5b5fcf;
         }
         
@@ -215,26 +215,26 @@
         }
         
         .alert-success {
-            background: #d1fae5;
-            color: #065f46;
-            border: 1px solid #a7f3d0;
+            background: var(--success-light, #d1fae5);
+            color: var(--success-text, #065f46);
+            border: 1px solid var(--success-border, #a7f3d0);
         }
         
         .alert-danger {
-            background: #fee2e2;
-            color: #991b1b;
-            border: 1px solid #fecaca;
+            background: var(--danger-light, #fee2e2);
+            color: var(--danger-text, #991b1b);
+            border: 1px solid var(--danger-border, #fecaca);
         }
         
         .alert-warning {
-            background: #fef3c7;
-            color: #92400e;
-            border: 1px solid #fde68a;
+            background: var(--warning-light, #fef3c7);
+            color: var(--warning-text, #92400e);
+            border: 1px solid var(--warning-border, #fde68a);
         }
         
         .disabled-notice {
-            background: #fef3c7;
-            border: 1px solid #fde68a;
+            background: var(--warning-light, #fef3c7);
+            border: 1px solid var(--warning-border, #fde68a);
             border-radius: 12px;
             padding: 2rem;
             text-align: center;
@@ -242,7 +242,7 @@
         }
         
         .disabled-notice h3 {
-            color: #92400e;
+            color: var(--warning-text, #92400e);
             margin-bottom: 1rem;
         }
         
@@ -252,24 +252,24 @@
             gap: 0.5rem;
             margin-bottom: 1.5rem;
             padding: 0.75rem;
-            background: #f8f9ff;
+            background: var(--bg-secondary, #f8f9ff);
             border-radius: 8px;
         }
         
         .record-tab {
             padding: 0.5rem 1rem;
-            background: white;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-primary, white);
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 6px;
             cursor: pointer;
             transition: all 0.3s ease;
             font-weight: 500;
             font-size: 0.875rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
         }
         
         .record-tab:hover {
-            background: #f0f1ff;
+            background: var(--bg-hover, #f0f1ff);
             color: #5b5fcf;
             border-color: #5b5fcf;
         }
@@ -305,37 +305,37 @@
         
         .records-table {
             width: 100%;
-            background: white;
+            background: var(--bg-primary, white);
             border-radius: 8px;
             overflow: hidden;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-primary, #e8e9ff);
             margin-top: 2rem;
         }
         
         .records-table thead {
-            background: #f8f9ff;
+            background: var(--bg-secondary, #f8f9ff);
         }
         
         .records-table th {
             padding: 1rem;
             text-align: left;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-primary, #e8e9ff);
         }
         
         .records-table td {
             padding: 1rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             font-size: 0.875rem;
-            border-bottom: 1px solid #f3f4f6;
+            border-bottom: 1px solid var(--border-light, #f3f4f6);
         }
         
         .records-table tbody tr:hover {
-            background: #f8f9ff;
+            background: var(--bg-secondary, #f8f9ff);
         }
         
         .delete-icon {
@@ -426,7 +426,7 @@
             left: 2px;
             width: 20px;
             height: 20px;
-            background: white;
+            background: var(--bg-primary, white);
             border-radius: 50%;
             transition: all 0.3s ease;
             box-shadow: 0 2px 4px rgba(0,0,0,0.2);
@@ -477,7 +477,7 @@
                 {% else %}
                     {% if not CloudFlare %}
                         <div class="form-section">
-                            <h3 class="mb-4" style="color: #1e293b; font-weight: 600;">
+                            <h3 class="mb-4" style="color: var(--text-primary, #1e293b); font-weight: 600;">
                                 <i class="fas fa-cog"></i>
                                 {% trans "CloudFlare Configuration" %}
                             </h3>
@@ -548,7 +548,7 @@
                                 </div>
                                 
                                 <div ng-hide="addRecordsBox">
-                                    <h4 class="mb-3" style="color: #1e293b; font-weight: 600;">
+                                    <h4 class="mb-3" style="color: var(--text-primary, #1e293b); font-weight: 600;">
                                         <i class="fas fa-plus-circle"></i>
                                         {% trans "Add DNS Record" %}
                                     </h4>
@@ -769,7 +769,7 @@
                                     <!-- DNS Records Table -->
 
                                     <div ng-hide="currentRecords" style="margin-top: 3rem;">
-                                        <h4 class="mb-3" style="color: #1e293b; font-weight: 600;">
+                                        <h4 class="mb-3" style="color: var(--text-primary, #1e293b); font-weight: 600;">
                                             <i class="fas fa-list"></i>
                                             {% trans "DNS Records" %}
                                         </h4>
@@ -790,7 +790,7 @@
                                                 <tr ng-repeat="record in records track by $index">
                                                     <td ng-bind="record.name"></td>
                                                     <td>
-                                                        <span style="padding: 0.25rem 0.75rem; background: #f0f1ff; color: #5b5fcf; border-radius: 4px; font-weight: 500; font-size: 0.75rem;">
+                                                        <span style="padding: 0.25rem 0.75rem; background: var(--bg-hover, #f0f1ff); color: #5b5fcf; border-radius: 4px; font-weight: 500; font-size: 0.75rem;">
                                                             {{ record.type }}
                                                         </span>
                                                     </td>
@@ -865,7 +865,7 @@
                         
                         <div id="api-settings" class="tab-content">
                             <div class="form-section">
-                                <h4 class="mb-4" style="color: #1e293b; font-weight: 600;">
+                                <h4 class="mb-4" style="color: var(--text-primary, #1e293b); font-weight: 600;">
                                     <i class="fas fa-key"></i>
                                     {% trans "CloudFlare API Configuration" %}
                                 </h4>
diff --git a/mailServer/templates/mailServer/EmailLimits.html b/mailServer/templates/mailServer/EmailLimits.html
index 7c382400e..6a7364f76 100644
--- a/mailServer/templates/mailServer/EmailLimits.html
+++ b/mailServer/templates/mailServer/EmailLimits.html
@@ -23,7 +23,7 @@
         .page-title {
             font-size: 2.5rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 0.5rem;
             display: flex;
             align-items: center;
@@ -33,7 +33,7 @@
         
         .page-subtitle {
             font-size: 1.125rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 0;
         }
         
@@ -42,8 +42,8 @@
             align-items: center;
             gap: 0.5rem;
             padding: 0.5rem 1rem;
-            background: #fff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-primary, #fff);
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 8px;
             color: #5b5fcf;
             text-decoration: none;
@@ -60,24 +60,24 @@
         }
         
         .main-card {
-            background: white;
+            background: var(--bg-primary, white);
             border-radius: 16px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-            border: 1px solid #e8e9ff;
+            box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.08));
+            border: 1px solid var(--border-primary, #e8e9ff);
             overflow: hidden;
             animation: fadeInUp 0.5s ease-out;
         }
         
         .card-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-primary, #e8e9ff);
         }
         
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin: 0;
             display: flex;
             align-items: center;
@@ -100,18 +100,18 @@
             display: block;
             margin-bottom: 0.5rem;
             font-weight: 500;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
         }
         
         .form-control {
             width: 100%;
             padding: 0.75rem 1rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 8px;
             font-size: 0.875rem;
             transition: all 0.3s ease;
-            background: #fff;
+            background: var(--bg-primary, #fff);
         }
         
         .form-control:focus {
@@ -151,26 +151,26 @@
         }
         
         .alert-success {
-            background: #d1fae5;
-            color: #065f46;
-            border: 1px solid #a7f3d0;
+            background: var(--success-light, #d1fae5);
+            color: var(--success-text, #065f46);
+            border: 1px solid var(--success-border, #a7f3d0);
         }
         
         .alert-danger {
-            background: #fee2e2;
-            color: #991b1b;
-            border: 1px solid #fecaca;
+            background: var(--danger-light, #fee2e2);
+            color: var(--danger-text, #991b1b);
+            border: 1px solid var(--danger-border, #fecaca);
         }
         
         .alert-info {
-            background: #dbeafe;
-            color: #1e40af;
-            border: 1px solid #bfdbfe;
+            background: var(--info-light, #dbeafe);
+            color: var(--info-text, #1e40af);
+            border: 1px solid var(--info-border, #bfdbfe);
         }
         
         .disabled-notice {
-            background: #fef3c7;
-            border: 1px solid #fde68a;
+            background: var(--warning-light, #fef3c7);
+            border: 1px solid var(--warning-border, #fde68a);
             border-radius: 12px;
             padding: 2rem;
             text-align: center;
@@ -178,22 +178,22 @@
         }
         
         .disabled-notice h3 {
-            color: #92400e;
+            color: var(--warning-text, #92400e);
             margin-bottom: 1rem;
         }
         
         .loading-spinner {
             width: 20px;
             height: 20px;
-            border: 2px solid #e8e9ff;
+            border: 2px solid var(--border-primary, #e8e9ff);
             border-top-color: #5b5fcf;
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
         
         .limits-config {
-            background: #f8f9ff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-secondary, #f8f9ff);
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 12px;
             padding: 2rem;
             margin-top: 1.5rem;
@@ -214,13 +214,13 @@
         }
         
         .preview-box {
-            background: #e0e7ff;
-            border: 1px solid #c7d2fe;
+            background: var(--accent-light, #e0e7ff);
+            border: 1px solid var(--accent-border, #c7d2fe);
             border-radius: 8px;
             padding: 1rem 1.5rem;
             margin-bottom: 1.5rem;
             font-size: 0.95rem;
-            color: #3730a3;
+            color: var(--info-dark, #3730a3);
         }
         
         .preview-box i {
@@ -334,7 +334,7 @@
                         </div>
 
                         <div ng-hide="creationBox" class="limits-config">
-                            <h3 style="color: #1e293b; font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem;">
+                            <h3 style="color: var(--text-primary, #1e293b); font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem;">
                                 <i class="fas fa-sliders-h"></i>
                                 {% trans "Configure Email Limits" %}
                             </h3>
diff --git a/mailServer/templates/mailServer/dkimManager.html b/mailServer/templates/mailServer/dkimManager.html
index 1fe068ba1..56d263e15 100644
--- a/mailServer/templates/mailServer/dkimManager.html
+++ b/mailServer/templates/mailServer/dkimManager.html
@@ -23,7 +23,7 @@
         .page-title {
             font-size: 2.5rem;
             font-weight: 700;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 0.5rem;
             display: flex;
             align-items: center;
@@ -33,7 +33,7 @@
         
         .page-subtitle {
             font-size: 1.125rem;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 0;
         }
         
@@ -42,8 +42,8 @@
             align-items: center;
             gap: 0.5rem;
             padding: 0.5rem 1rem;
-            background: #fff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-primary, #fff);
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 8px;
             color: #5b5fcf;
             text-decoration: none;
@@ -60,24 +60,24 @@
         }
         
         .main-card {
-            background: white;
+            background: var(--bg-primary, white);
             border-radius: 16px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-            border: 1px solid #e8e9ff;
+            box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.08));
+            border: 1px solid var(--border-primary, #e8e9ff);
             overflow: hidden;
             animation: fadeInUp 0.5s ease-out;
         }
         
         .card-header {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+            background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-primary, #e8e9ff);
         }
         
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin: 0;
             display: flex;
             align-items: center;
@@ -100,18 +100,18 @@
             display: block;
             margin-bottom: 0.5rem;
             font-weight: 500;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
         }
         
         .form-control {
             width: 100%;
             padding: 0.75rem 1rem;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 8px;
             font-size: 0.875rem;
             transition: all 0.3s ease;
-            background: #fff;
+            background: var(--bg-primary, #fff);
         }
         
         .form-control:focus {
@@ -151,35 +151,35 @@
         }
         
         .alert-success {
-            background: #d1fae5;
-            color: #065f46;
-            border: 1px solid #a7f3d0;
+            background: var(--success-light, #d1fae5);
+            color: var(--success-text, #065f46);
+            border: 1px solid var(--success-border, #a7f3d0);
         }
         
         .alert-danger {
-            background: #fee2e2;
-            color: #991b1b;
-            border: 1px solid #fecaca;
+            background: var(--danger-light, #fee2e2);
+            color: var(--danger-text, #991b1b);
+            border: 1px solid var(--danger-border, #fecaca);
         }
         
         .alert-info {
-            background: #dbeafe;
-            color: #1e40af;
-            border: 1px solid #bfdbfe;
+            background: var(--info-light, #dbeafe);
+            color: var(--info-text, #1e40af);
+            border: 1px solid var(--info-border, #bfdbfe);
         }
         
         .loading-spinner {
             width: 20px;
             height: 20px;
-            border: 2px solid #e8e9ff;
+            border: 2px solid var(--border-primary, #e8e9ff);
             border-top-color: #5b5fcf;
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
         
         .install-notice {
-            background: #f8f9ff;
-            border: 2px solid #e8e9ff;
+            background: var(--bg-secondary, #f8f9ff);
+            border: 2px solid var(--border-primary, #e8e9ff);
             border-radius: 12px;
             padding: 3rem;
             text-align: center;
@@ -187,7 +187,7 @@
         }
         
         .install-notice h3 {
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             margin-bottom: 1.5rem;
             font-size: 1.5rem;
         }
@@ -220,26 +220,26 @@
         
         .keys-table {
             width: 100%;
-            background: white;
+            background: var(--bg-primary, white);
             border-radius: 8px;
             overflow: hidden;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-primary, #e8e9ff);
             margin-top: 1.5rem;
         }
         
         .keys-table thead {
-            background: #f8f9ff;
+            background: var(--bg-secondary, #f8f9ff);
         }
         
         .keys-table th {
             padding: 1rem;
             text-align: left;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--text-primary, #1e293b);
             font-size: 0.875rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            border-bottom: 1px solid #e8e9ff;
+            border-bottom: 1px solid var(--border-primary, #e8e9ff);
         }
         
         .keys-table td {
@@ -249,8 +249,8 @@
         
         .key-textarea {
             width: 100%;
-            background: #f8f9ff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-secondary, #f8f9ff);
+            border: 1px solid var(--border-primary, #e8e9ff);
             border-radius: 8px;
             padding: 1rem;
             font-family: monospace;
@@ -262,12 +262,12 @@
         .key-textarea:focus {
             outline: none;
             border-color: #5b5fcf;
-            background: #fff;
+            background: var(--bg-primary, #fff);
         }
         
         .generate-notice {
-            background: #fef3c7;
-            border: 1px solid #fde68a;
+            background: var(--warning-light, #fef3c7);
+            border: 1px solid var(--warning-border, #fde68a);
             border-radius: 12px;
             padding: 2rem;
             text-align: center;
@@ -275,7 +275,7 @@
         }
         
         .generate-notice h3 {
-            color: #92400e;
+            color: var(--warning-text, #92400e);
             margin-bottom: 1rem;
         }
         
@@ -293,13 +293,13 @@
         }
         
         .info-box {
-            background: #e0e7ff;
-            border: 1px solid #c7d2fe;
+            background: var(--accent-light, #e0e7ff);
+            border: 1px solid var(--accent-border, #c7d2fe);
             border-radius: 8px;
             padding: 1rem 1.5rem;
             margin-bottom: 1.5rem;
             font-size: 0.875rem;
-            color: #3730a3;
+            color: var(--info-dark, #3730a3);
         }
         
         .info-box i {
@@ -407,7 +407,7 @@
 
                     <!-- Installation Log -->
                     <div ng-hide="openDKIMInstallBox">
-                        <h3 style="color: #1e293b; font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem;">
+                        <h3 style="color: var(--text-primary, #1e293b); font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem;">
                             <i class="fas fa-terminal"></i>
                             {% trans "Installation Progress" %}
                         </h3>
@@ -473,21 +473,21 @@
                                 <tbody>
                                 <tr>
                                     <td>
-                                        <span style="padding: 0.5rem 1rem; background: #e0e7ff; color: #5b5fcf; border-radius: 6px; font-weight: 600; display: inline-block;">
+                                        <span style="padding: 0.5rem 1rem; background: var(--accent-light, #e0e7ff); color: #5b5fcf; border-radius: 6px; font-weight: 600; display: inline-block;">
                                             <i class="fas fa-globe"></i>
                                             <span ng-bind="domainName"></span>
                                         </span>
                                     </td>
                                     <td>
                                         <textarea ng-bind="privateKey" rows="10" class="key-textarea" readonly></textarea>
-                                        <small style="color: #64748b; margin-top: 0.5rem; display: block;">
+                                        <small style="color: var(--text-secondary, #64748b); margin-top: 0.5rem; display: block;">
                                             <i class="fas fa-lock"></i>
                                             {% trans "Keep this private key secure" %}
                                         </small>
                                     </td>
                                     <td>
                                         <textarea ng-bind="publicKey" rows="10" class="key-textarea" readonly></textarea>
-                                        <small style="color: #64748b; margin-top: 0.5rem; display: block;">
+                                        <small style="color: var(--text-secondary, #64748b); margin-top: 0.5rem; display: block;">
                                             <i class="fas fa-info-circle"></i>
                                             {% trans "Add this as a TXT record in your DNS" %}
                                         </small>