From 3397d2094c07967c8409e86c0ed68481207337ec Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Tue, 5 Aug 2025 20:46:23 +0500
Subject: [PATCH] add/delete records

---
 .idea/workspace.xml                           |  7 +-
 .../templates/backup/backupDestinations.html  | 36 ++++----
 backup/templates/backup/googleDrive.html      | 84 +++++++++----------
 backup/templates/backup/remoteBackups.html    | 40 ++++-----
 .../templates/manageSSL/sslForHostName.html   | 26 +++---
 .../templates/manageSSL/sslForMailServer.html | 26 +++---
 .../templates/manageSSL/v2ManageSSL.html      | 32 +++----
 7 files changed, 126 insertions(+), 125 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index ae01bff0e..58ac254f5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,9 +6,10 @@
   <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/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" />
+      <change beforePath="$PROJECT_DIR$/backup/templates/backup/backupDestinations.html" beforeDir="false" afterPath="$PROJECT_DIR$/backup/templates/backup/backupDestinations.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/backup/templates/backup/googleDrive.html" beforeDir="false" afterPath="$PROJECT_DIR$/backup/templates/backup/googleDrive.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/backup/templates/backup/remoteBackups.html" beforeDir="false" afterPath="$PROJECT_DIR$/backup/templates/backup/remoteBackups.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/manageSSL/templates/manageSSL/v2ManageSSL.html" beforeDir="false" afterPath="$PROJECT_DIR$/manageSSL/templates/manageSSL/v2ManageSSL.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/backup/templates/backup/backupDestinations.html b/backup/templates/backup/backupDestinations.html
index 2f4caeff6..d98b0e1f6 100644
--- a/backup/templates/backup/backupDestinations.html
+++ b/backup/templates/backup/backupDestinations.html
@@ -18,7 +18,7 @@
             text-align: center;
             margin-bottom: 3rem;
             padding: 3rem 0;
-            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
             border-radius: 20px;
             animation: fadeInDown 0.5s ease-out;
         }
@@ -49,7 +49,7 @@
         
         .btn-primary {
             background: var(--accent-color, #5b5fcf);
-            color: var(--bg-secondary, white);
+            color: white;
             border: none;
             padding: 0.75rem 2rem;
             border-radius: 10px;
@@ -67,11 +67,11 @@
             background: var(--accent-hover, #4547a9);
             transform: translateY(-2px);
             box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
-            color: var(--bg-secondary, white);
+            color: white;
         }
         
         .btn-secondary {
-            background: var(--bg-secondary, #fff);
+            background: var(--bg-primary, #fff);
             color: var(--accent-color, #5b5fcf);
             border: 1px solid var(--border-color, #e8e9ff);
             padding: 0.75rem 2rem;
@@ -95,7 +95,7 @@
         
         .btn-danger {
             background: var(--danger-color, #ef4444);
-            color: var(--bg-secondary, white);
+            color: white;
             border: none;
             padding: 0.5rem 1rem;
             border-radius: 8px;
@@ -116,7 +116,7 @@
         
         .promo-banner {
             background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
-            color: var(--bg-secondary, white);
+            color: white;
             padding: 1.5rem 2rem;
             border-radius: 12px;
             margin-bottom: 2rem;
@@ -132,7 +132,7 @@
         }
         
         .promo-link {
-            background: var(--bg-secondary, white);
+            background: var(--bg-primary, white);
             color: var(--accent-color, #5b5fcf);
             padding: 0.5rem 1.5rem;
             border-radius: 8px;
@@ -143,13 +143,13 @@
         
         .promo-link:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px var(--shadow-dark, rgba(0,0,0,0.2));
+            box-shadow: 0 4px 12px var(--shadow-md, 0 4px 12px rgba(0,0,0,0.2));
         }
         
         .main-card {
-            background: var(--bg-secondary, white);
+            background: var(--bg-primary, white);
             border-radius: 16px;
-            box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+            box-shadow: 0 1px 3px 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-color, #e8e9ff);
             overflow: hidden;
             margin-bottom: 2rem;
@@ -157,7 +157,7 @@
         }
         
         .card-header {
-            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
             padding: 1.5rem 2rem;
             border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
@@ -194,7 +194,7 @@
         
         .tab-button {
             padding: 0.75rem 2rem;
-            background: var(--bg-secondary, #fff);
+            background: var(--bg-primary, #fff);
             border: 2px solid var(--border-color, #e8e9ff);
             border-radius: 10px;
             font-weight: 500;
@@ -205,7 +205,7 @@
         
         .tab-button.active {
             background: var(--accent-color, #5b5fcf);
-            color: var(--bg-secondary, white);
+            color: white;
             border-color: var(--accent-color, #5b5fcf);
         }
         
@@ -237,18 +237,18 @@
             border-radius: 10px;
             font-size: 0.875rem;
             transition: all 0.3s ease;
-            background: var(--bg-secondary, #fff);
+            background: var(--bg-primary, #fff);
         }
         
         .form-control:focus {
             outline: none;
             border-color: var(--accent-color, #5b5fcf);
-            box-shadow: 0 0 0 3px var(--accent-focus, rgba(91, 95, 207, 0.1));
+            box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(91, 95, 207, 0.1));
         }
         
         .destination-table {
             width: 100%;
-            background: var(--bg-secondary, white);
+            background: var(--bg-primary, white);
             border-radius: 12px;
             overflow: hidden;
             border: 1px solid var(--border-color, #e8e9ff);
@@ -256,7 +256,7 @@
         }
         
         .destination-table thead {
-            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         }
         
         .destination-table th {
@@ -297,7 +297,7 @@
         }
         
         .info-badge {
-            background: var(--accent-bg, #e0e7ff);
+            background: var(--accent-light, #e0e7ff);
             color: var(--accent-color, #5b5fcf);
             padding: 0.25rem 0.75rem;
             border-radius: 6px;
diff --git a/backup/templates/backup/googleDrive.html b/backup/templates/backup/googleDrive.html
index fbb36cea1..ca874d8ed 100644
--- a/backup/templates/backup/googleDrive.html
+++ b/backup/templates/backup/googleDrive.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;
         position: relative;
@@ -40,7 +40,7 @@
     .page-title {
         font-size: 3rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -53,17 +53,17 @@
     .google-drive-icon {
         width: 60px;
         height: 60px;
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
     }
     
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 1.5rem;
         position: relative;
         z-index: 1;
@@ -102,9 +102,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;
@@ -118,7 +118,7 @@
     }
     
     .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);
@@ -167,25 +167,25 @@
     }
     
     .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;
@@ -197,8 +197,8 @@
     }
     
     .account-selector {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -216,18 +216,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 {
@@ -238,36 +238,36 @@
     
     .gdrive-table {
         width: 100%;
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .gdrive-table thead {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
     }
     
     .gdrive-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);
     }
     
     .gdrive-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);
     }
     
     .gdrive-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
     }
     
     .gdrive-table tbody tr:last-child td {
@@ -275,7 +275,7 @@
     }
     
     .frequency-badge {
-        background: #e0e7ff;
+        background: var(--accent-light, #e0e7ff);
         color: #5b5fcf;
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
@@ -284,8 +284,8 @@
     }
     
     .retention-info {
-        background: #fef3c7;
-        border: 1px solid #fde68a;
+        background: var(--warning-light, #fef3c7);
+        border: 1px solid var(--warning-border, #fde68a);
         border-radius: 12px;
         padding: 1rem 1.5rem;
         margin-bottom: 2rem;
@@ -301,7 +301,7 @@
     
     .retention-info p {
         margin: 0;
-        color: #92400e;
+        color: var(--warning-text, #92400e);
         font-size: 0.875rem;
     }
     
@@ -318,7 +318,7 @@
     .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;
@@ -334,15 +334,15 @@
     }
     
     .modal-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
-        border-bottom: 1px solid #e8e9ff;
+        background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
         padding: 1.5rem 2rem;
     }
     
     .modal-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
     }
     
@@ -351,32 +351,32 @@
     }
     
     .modal-footer {
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-primary, #e8e9ff);
         padding: 1.5rem 2rem;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
     }
     
     .log-table {
         width: 100%;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 8px;
         overflow: hidden;
     }
     
     .log-table th {
-        background: #e8e9ff;
+        background: var(--bg-hover, #e8e9ff);
         padding: 0.75rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
     }
     
     .log-table td {
         padding: 0.75rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .log-type {
diff --git a/backup/templates/backup/remoteBackups.html b/backup/templates/backup/remoteBackups.html
index 3392c6c35..1ed4f5451 100644
--- a/backup/templates/backup/remoteBackups.html
+++ b/backup/templates/backup/remoteBackups.html
@@ -18,7 +18,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -68,7 +68,7 @@
     
     .btn-primary {
         background: var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -86,7 +86,7 @@
         background: var(--accent-hover, #4547a9);
         transform: translateY(-2px);
         box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
-        color: var(--bg-secondary, white);
+        color: white;
     }
     
     .btn-primary:disabled {
@@ -97,7 +97,7 @@
     }
     
     .btn-secondary {
-        background: var(--bg-secondary, #fff);
+        background: var(--bg-primary, #fff);
         color: var(--accent-color, #5b5fcf);
         border: 1px solid var(--border-color, #e8e9ff);
         padding: 0.75rem 2rem;
@@ -121,7 +121,7 @@
     
     .btn-success {
         background: var(--success-color, #10b981);
-        color: var(--bg-secondary, white);
+        color: white;
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -137,12 +137,12 @@
     .btn-success:hover {
         background: var(--success-hover, #059669);
         transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
+        box-shadow: 0 8px 20px var(--success-shadow, rgba(16, 185, 129, 0.4));
     }
     
     .btn-danger {
         background: var(--danger-color, #ef4444);
-        color: var(--bg-secondary, white);
+        color: white;
         border: none;
         padding: 0.75rem 2rem;
         border-radius: 10px;
@@ -162,9 +162,9 @@
     }
     
     .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);
+        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-color, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
@@ -172,7 +172,7 @@
     }
     
     .card-header {
-        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
         border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
@@ -214,13 +214,13 @@
         border-radius: 10px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: var(--bg-secondary, #fff);
+        background: var(--bg-primary, #fff);
     }
     
     .form-control:focus {
         outline: none;
         border-color: var(--accent-color, #5b5fcf);
-        box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(91, 95, 207, 0.1));
     }
     
     .alert {
@@ -234,13 +234,13 @@
     }
     
     .alert-success {
-        background: var(--success-bg, #d1fae5);
+        background: var(--success-light, #d1fae5);
         color: var(--success-text, #065f46);
         border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-danger {
-        background: var(--danger-bg, #fee2e2);
+        background: var(--danger-light, #fee2e2);
         color: var(--danger-text, #991b1b);
         border: 1px solid var(--danger-border, #fecaca);
     }
@@ -253,7 +253,7 @@
     
     .remote-table {
         width: 100%;
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         overflow: hidden;
         border: 1px solid var(--border-color, #e8e9ff);
@@ -261,7 +261,7 @@
     }
     
     .remote-table thead {
-        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
     }
     
     .remote-table th {
@@ -329,8 +329,8 @@
     .search-input:focus {
         outline: none;
         border-color: var(--accent-color, #5b5fcf);
-        box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
-        background: var(--bg-secondary, #fff);
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(91, 95, 207, 0.1));
+        background: var(--bg-primary, #fff);
     }
     
     .terminal-section {
@@ -338,7 +338,7 @@
         border-radius: 12px;
         overflow: hidden;
         margin-top: 2rem;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,0.1));
     }
     
     .terminal-header {
@@ -417,7 +417,7 @@
     }
     
     .php-badge {
-        background: var(--accent-bg, #e0e7ff);
+        background: var(--accent-light, #e0e7ff);
         color: var(--accent-color, #5b5fcf);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
diff --git a/manageSSL/templates/manageSSL/sslForHostName.html b/manageSSL/templates/manageSSL/sslForHostName.html
index 8970dc7ac..62bdbf151 100644
--- a/manageSSL/templates/manageSSL/sslForHostName.html
+++ b/manageSSL/templates/manageSSL/sslForHostName.html
@@ -17,7 +17,7 @@
     }
     
     .ssl-section {
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
@@ -63,7 +63,7 @@
     
     .ssl-docs-link:hover {
         background: var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
         text-decoration: none;
@@ -77,23 +77,23 @@
     }
     
     .deprecation-notice {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
+        background: var(--info-light, #e3f2fd);
+        border: 1px solid var(--info-border, #bbdefb);
         border-radius: 8px;
         padding: 15px;
         margin-bottom: 25px;
-        color: #1976d2;
+        color: var(--info-text, #1976d2);
         font-size: 14px;
     }
     
     .deprecation-notice a {
-        color: #1976d2;
+        color: var(--info-text, #1976d2);
         font-weight: 600;
         text-decoration: underline;
     }
     
     .form-container {
-        background: var(--bg-light, #fafbff);
+        background: var(--bg-secondary, #fafbff);
         border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 25px;
@@ -119,14 +119,14 @@
         border-radius: 8px;
         font-size: 14px;
         color: var(--text-primary, #2f3640);
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:focus {
         outline: none;
         border-color: var(--accent-color, #5b5fcf);
-        box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(91,95,207,0.1));
     }
     
     /* Windows selectbox fixes */
@@ -147,7 +147,7 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
+            color: var(--text-primary, #2f3640) !important;
             background-color: var(--bg-secondary, white) !important;
         }
     }
@@ -165,7 +165,7 @@
     .btn-primary {
         background: var(--accent-color, #5b5fcf);
         border: 1px solid var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         padding: 12px 24px;
         border-radius: 8px;
         font-size: 14px;
@@ -202,13 +202,13 @@
     }
     
     .alert-success {
-        background: var(--info-bg, #f0f9ff);
+        background: var(--success-light, #f0f9ff);
         border: 1px solid var(--info-border, #bae6fd);
         color: var(--info-text, #0c4a6e);
     }
     
     .alert-danger {
-        background: var(--danger-bg, #fef2f2);
+        background: var(--danger-light, #fef2f2);
         border: 1px solid var(--danger-border, #fecaca);
         color: var(--danger-text, #991b1b);
     }
diff --git a/manageSSL/templates/manageSSL/sslForMailServer.html b/manageSSL/templates/manageSSL/sslForMailServer.html
index a1436f659..d2aa71071 100644
--- a/manageSSL/templates/manageSSL/sslForMailServer.html
+++ b/manageSSL/templates/manageSSL/sslForMailServer.html
@@ -17,7 +17,7 @@
     }
     
     .ssl-section {
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
@@ -63,7 +63,7 @@
     
     .ssl-docs-link:hover {
         background: var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
         text-decoration: none;
@@ -77,23 +77,23 @@
     }
     
     .deprecation-notice {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
+        background: var(--info-light, #e3f2fd);
+        border: 1px solid var(--info-border, #bbdefb);
         border-radius: 8px;
         padding: 15px;
         margin-bottom: 25px;
-        color: #1976d2;
+        color: var(--info-text, #1976d2);
         font-size: 14px;
     }
     
     .deprecation-notice a {
-        color: #1976d2;
+        color: var(--info-text, #1976d2);
         font-weight: 600;
         text-decoration: underline;
     }
     
     .form-container {
-        background: var(--bg-light, #fafbff);
+        background: var(--bg-secondary, #fafbff);
         border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 25px;
@@ -119,14 +119,14 @@
         border-radius: 8px;
         font-size: 14px;
         color: var(--text-primary, #2f3640);
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:focus {
         outline: none;
         border-color: var(--accent-color, #5b5fcf);
-        box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(91,95,207,0.1));
     }
     
     /* Windows selectbox fixes */
@@ -147,7 +147,7 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
+            color: var(--text-primary, #2f3640) !important;
             background-color: var(--bg-secondary, white) !important;
         }
     }
@@ -165,7 +165,7 @@
     .btn-primary {
         background: var(--accent-color, #5b5fcf);
         border: 1px solid var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         padding: 12px 24px;
         border-radius: 8px;
         font-size: 14px;
@@ -202,13 +202,13 @@
     }
     
     .alert-success {
-        background: var(--info-bg, #f0f9ff);
+        background: var(--success-light, #f0f9ff);
         border: 1px solid var(--info-border, #bae6fd);
         color: var(--info-text, #0c4a6e);
     }
     
     .alert-danger {
-        background: var(--danger-bg, #fef2f2);
+        background: var(--danger-light, #fef2f2);
         border: 1px solid var(--danger-border, #fecaca);
         color: var(--danger-text, #991b1b);
     }
diff --git a/manageSSL/templates/manageSSL/v2ManageSSL.html b/manageSSL/templates/manageSSL/v2ManageSSL.html
index 119941aab..388cb90a9 100644
--- a/manageSSL/templates/manageSSL/v2ManageSSL.html
+++ b/manageSSL/templates/manageSSL/v2ManageSSL.html
@@ -17,7 +17,7 @@
     }
     
     .ssl-section {
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
@@ -63,7 +63,7 @@
     
     .ssl-docs-link:hover {
         background: var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 2px 4px rgba(91,95,207,0.3);
         text-decoration: none;
@@ -77,7 +77,7 @@
     }
     
     .video-container {
-        background: var(--bg-light, #fafbff);
+        background: var(--bg-secondary, #fafbff);
         border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 20px;
@@ -110,7 +110,7 @@
         justify-content: center;
         gap: 10px;
         padding: 15px 20px;
-        background: var(--bg-light, #fafbff);
+        background: var(--bg-secondary, #fafbff);
         border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         color: var(--text-primary, #2f3640);
@@ -122,13 +122,13 @@
     .nav-tabs li.active a,
     .nav-tabs a:hover {
         background: var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 2px 8px var(--accent-shadow, rgba(91,95,207,0.3));
     }
     
     .tab-content {
-        background: var(--bg-light, #fafbff);
+        background: var(--bg-secondary, #fafbff);
         border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 25px;
@@ -156,14 +156,14 @@
         border-radius: 8px;
         font-size: 14px;
         color: var(--text-primary, #2f3640);
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:focus {
         outline: none;
         border-color: var(--accent-color, #5b5fcf);
-        box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(91,95,207,0.1));
     }
     
     /* Windows selectbox fix */
@@ -184,7 +184,7 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
+            color: var(--text-primary, #2f3640) !important;
             background-color: var(--bg-secondary, white) !important;
         }
     }
@@ -209,7 +209,7 @@
     .btn-primary {
         background: var(--accent-color, #5b5fcf);
         border: 1px solid var(--accent-color, #5b5fcf);
-        color: var(--bg-secondary, white);
+        color: white;
         padding: 12px 24px;
         border-radius: 8px;
         font-size: 14px;
@@ -239,7 +239,7 @@
     
     /* SSL Details Panel */
     .ssl-details-panel {
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 20px;
@@ -252,7 +252,7 @@
         color: var(--text-primary, #2f3640);
         margin-bottom: 15px;
         padding-bottom: 10px;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .ssl-details-panel p {
@@ -276,15 +276,15 @@
     }
     
     .alert-success {
-        background: var(--info-bg, #f0f9ff);
+        background: var(--info-light, #f0f9ff);
         border: 1px solid var(--info-border, #bae6fd);
         color: var(--info-text, #0c4a6e);
     }
     
     .alert-info {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
-        color: #1976d2;
+        background: var(--info-light, #e3f2fd);
+        border: 1px solid var(--info-border, #bbdefb);
+        color: var(--info-text, #1976d2);
     }
     
     .loading-spinner {