From ab6a9403cc4262fdb62558cbd1756d04f76ed933 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Tue, 5 Aug 2025 02:28:40 +0500
Subject: [PATCH] services

---
 .idea/workspace.xml                           |  12 +-
 .../templates/emailPremium/MailScanner.html   |  56 ++++-----
 .../templates/emailPremium/Rspamd.html        | 109 +++++++++---------
 .../manageServices/applications.html          |  58 +++++-----
 .../templates/serverStatus/services.html      |  10 +-
 5 files changed, 120 insertions(+), 125 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 380db721c..7b6694abb 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,16 +6,8 @@
   <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$/emailMarketing/templates/emailMarketing/composeMessages.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/composeMessages.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/configureVerify.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/configureVerify.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/createEmailList.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/createEmailList.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/emailMarketing.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/emailMarketing.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/manageLists.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/manageLists.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/manageSMTPHosts.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/manageSMTPHosts.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/sendEmails.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/sendEmails.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/website.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailMarketing/templates/emailMarketing/website.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailPremium/templates/emailPremium/SpamAssassin.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailPremium/templates/emailPremium/SpamAssassin.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/emailPremium/templates/emailPremium/mailQueue.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailPremium/templates/emailPremium/mailQueue.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailPremium/templates/emailPremium/MailScanner.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailPremium/templates/emailPremium/MailScanner.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/emailPremium/templates/emailPremium/Rspamd.html" beforeDir="false" afterPath="$PROJECT_DIR$/emailPremium/templates/emailPremium/Rspamd.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/emailPremium/templates/emailPremium/MailScanner.html b/emailPremium/templates/emailPremium/MailScanner.html
index 2ee723833..6e37119bc 100644
--- a/emailPremium/templates/emailPremium/MailScanner.html
+++ b/emailPremium/templates/emailPremium/MailScanner.html
@@ -17,18 +17,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .page-header h1 {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -50,18 +50,18 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     /* Installation Section */
@@ -73,7 +73,7 @@
     .install-icon {
         width: 80px;
         height: 80px;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -86,13 +86,13 @@
     .install-title {
         font-size: 24px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
     .install-description {
         font-size: 16px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 25px;
     }
     
@@ -127,7 +127,7 @@
     .access-icon {
         width: 80px;
         height: 80px;
-        background: #d1fae5;
+        background: var(--success-bg, #d1fae5);
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -140,13 +140,13 @@
     .access-title {
         font-size: 24px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
     .access-description {
         font-size: 16px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 25px;
     }
     
@@ -177,8 +177,8 @@
     
     /* Installation Log */
     .install-log {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         padding: 15px;
         margin-top: 20px;
@@ -194,17 +194,17 @@
     .install-log-title {
         font-size: 16px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     .log-textarea {
         width: 100%;
         padding: 12px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 13px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-primary, white);
         resize: vertical;
         font-family: 'Monaco', 'Consolas', monospace;
         line-height: 1.5;
@@ -227,9 +227,9 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-success .alert-icon {
@@ -237,9 +237,9 @@
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--error-bg, #fee2e2);
+        color: var(--error-text, #991b1b);
+        border: 1px solid var(--error-border, #fecaca);
     }
     
     .alert-danger .alert-icon {
@@ -250,7 +250,7 @@
     .loading-spinner {
         width: 24px;
         height: 24px;
-        border: 3px solid #e8e9ff;
+        border: 3px solid var(--border-light, #e8e9ff);
         border-top-color: #5856d6;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -272,7 +272,7 @@
     }
     
     .feature-card {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 12px;
         padding: 20px;
         text-align: center;
@@ -300,13 +300,13 @@
     .feature-title {
         font-size: 16px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .feature-description {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     /* Responsive */
diff --git a/emailPremium/templates/emailPremium/Rspamd.html b/emailPremium/templates/emailPremium/Rspamd.html
index 10bf20dd9..e04d5366b 100644
--- a/emailPremium/templates/emailPremium/Rspamd.html
+++ b/emailPremium/templates/emailPremium/Rspamd.html
@@ -17,18 +17,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .page-header h1 {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -50,24 +50,24 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -145,7 +145,7 @@
     .install-icon {
         width: 80px;
         height: 80px;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -158,13 +158,13 @@
     .install-title {
         font-size: 24px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
     .install-description {
         font-size: 16px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 25px;
     }
     
@@ -176,7 +176,7 @@
     .form-label {
         font-size: 14px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
         display: block;
         text-transform: none;
@@ -185,11 +185,11 @@
     .form-control {
         width: 100%;
         padding: 10px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-primary, white);
         transition: all 0.3s ease;
     }
     
@@ -202,11 +202,11 @@
     .form-select {
         width: 100%;
         padding: 10px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-primary, white);
         transition: all 0.3s ease;
         cursor: pointer;
     }
@@ -224,12 +224,12 @@
         width: 70px !important;
         height: 32px !important;
         border-radius: 8px !important;
-        border: 1px solid #e8e9ff !important;
+        border: 1px solid var(--border-light, #e8e9ff) !important;
     }
     
     .toggle.off {
-        background: #f8f9ff !important;
-        border-color: #e8e9ff !important;
+        background: var(--bg-secondary, #f8f9ff) !important;
+        border-color: var(--border-light, #e8e9ff) !important;
     }
     
     .toggle.btn-success {
@@ -278,14 +278,14 @@
     
     .toggle-off {
         background: transparent !important;
-        color: #64748b !important;
+        color: var(--text-secondary, #64748b) !important;
         box-shadow: none !important;
     }
     
     .btn-secondary {
-        background: #f8f9ff !important;
-        border-color: #e8e9ff !important;
-        color: #64748b !important;
+        background: var(--bg-secondary, #f8f9ff) !important;
+        border-color: var(--border-light, #e8e9ff) !important;
+        color: var(--text-secondary, #64748b) !important;
     }
     
     /* Fix for Bootstrap Toggle visibility */
@@ -318,7 +318,7 @@
     
     .toggle-label-text {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 500;
     }
     
@@ -347,8 +347,8 @@
     
     /* Installation Log */
     .install-log {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         padding: 15px;
         margin-top: 20px;
@@ -364,17 +364,17 @@
     .install-log-title {
         font-size: 16px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     .log-textarea {
         width: 100%;
         padding: 12px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-light, #e8e9ff);
         border-radius: 8px;
         font-size: 13px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-primary, white);
         resize: vertical;
         font-family: 'Monaco', 'Consolas', monospace;
         line-height: 1.5;
@@ -397,9 +397,9 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--alert-success-bg, #d1fae5);
+        color: var(--alert-success-text, #065f46);
+        border: 1px solid var(--alert-success-border, #a7f3d0);
     }
     
     .alert-success .alert-icon {
@@ -407,9 +407,9 @@
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--alert-danger-bg, #fee2e2);
+        color: var(--alert-danger-text, #991b1b);
+        border: 1px solid var(--alert-danger-border, #fecaca);
     }
     
     .alert-danger .alert-icon {
@@ -418,8 +418,8 @@
     
     /* Warning Box */
     .warning-box {
-        background: #fef3c7;
-        border: 1px solid #fde68a;
+        background: var(--alert-warning-bg, #fef3c7);
+        border: 1px solid var(--alert-warning-border, #fde68a);
         border-radius: 8px;
         padding: 15px;
         margin-bottom: 20px;
@@ -436,7 +436,7 @@
     
     .warning-text {
         font-size: 14px;
-        color: #92400e;
+        color: var(--alert-warning-text, #92400e);
         line-height: 1.5;
     }
     
@@ -445,11 +445,12 @@
         border: none;
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0,0,0,0.15);
+        background: var(--bg-primary, white);
     }
     
     .modal-header {
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         border-radius: 12px 12px 0 0;
         padding: 20px;
         display: flex;
@@ -460,17 +461,19 @@
     .modal-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0;
     }
     
     .modal-body {
         padding: 25px;
+        background: var(--bg-primary, white);
+        color: var(--text-primary, #2f3640);
     }
     
     .modal-footer {
-        background: #f8f9ff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border-top: 1px solid var(--border-light, #e8e9ff);
         border-radius: 0 0 12px 12px;
         padding: 15px 20px;
         display: flex;
@@ -502,21 +505,21 @@
     }
     
     .modal-btn.secondary {
-        background: white;
-        color: #64748b;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-primary, white);
+        color: var(--text-secondary, #64748b);
+        border: 1px solid var(--border-light, #e8e9ff);
     }
     
     .modal-btn.secondary:hover {
-        background: #f8f9ff;
-        color: #2f3640;
+        background: var(--bg-secondary, #f8f9ff);
+        color: var(--text-primary, #2f3640);
     }
     
     /* Loading Spinner */
     .loading-spinner {
         width: 24px;
         height: 24px;
-        border: 3px solid #e8e9ff;
+        border: 3px solid var(--border-light, #e8e9ff);
         border-top-color: #5856d6;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -532,7 +535,7 @@
     /* Help Text */
     .help-text {
         font-size: 13px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         margin-top: 5px;
     }
     
@@ -996,7 +999,7 @@
                     </div>
                     <div class="modal-body">
                         <p>{% trans "Do you want to uninstall Rspamd?" %}</p>
-                        <p class="text-danger">{% trans "This action cannot be undone." %}</p>
+                        <p style="color: var(--text-danger, #dc2626);">{% trans "This action cannot be undone." %}</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="modal-btn primary" data-dismiss="modal" ng-click="unistallRspamd()">
diff --git a/manageServices/templates/manageServices/applications.html b/manageServices/templates/manageServices/applications.html
index 4f5465f2e..2420c68e2 100644
--- a/manageServices/templates/manageServices/applications.html
+++ b/manageServices/templates/manageServices/applications.html
@@ -17,18 +17,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .page-header h1 {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -50,24 +50,24 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
     /* Content Section */
     .content-section {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -90,8 +90,8 @@
     }
     
     .app-card {
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-primary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px;
         padding: 25px;
         transition: all 0.3s ease;
@@ -137,7 +137,7 @@
         justify-content: center;
         flex-shrink: 0;
         overflow: hidden;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         padding: 12px;
     }
     
@@ -154,7 +154,7 @@
     .app-name {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 5px;
     }
     
@@ -169,8 +169,8 @@
     }
     
     .app-status.installed {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
     }
     
     .app-status.installed i {
@@ -178,8 +178,8 @@
     }
     
     .app-status.not-installed {
-        background: #fee2e2;
-        color: #991b1b;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
     }
     
     .app-status.not-installed i {
@@ -188,7 +188,7 @@
     
     .app-description {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         line-height: 1.6;
         margin-bottom: 20px;
     }
@@ -243,8 +243,8 @@
     }
     
     .modal-header {
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px 12px 0 0;
         padding: 20px;
     }
@@ -252,7 +252,7 @@
     .modal-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         display: flex;
         align-items: center;
         gap: 10px;
@@ -263,8 +263,8 @@
     }
     
     .install-log {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 15px;
     }
@@ -272,11 +272,11 @@
     .log-textarea {
         width: 100%;
         padding: 12px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 13px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-primary, white);
         resize: vertical;
         font-family: 'Monaco', 'Consolas', monospace;
         line-height: 1.5;
@@ -286,7 +286,7 @@
     .loading-spinner {
         width: 24px;
         height: 24px;
-        border: 3px solid #e8e9ff;
+        border: 3px solid var(--border-color, #e8e9ff);
         border-top-color: #5856d6;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -307,26 +307,26 @@
     .empty-icon {
         width: 80px;
         height: 80px;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 20px;
         font-size: 36px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .empty-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
     .empty-description {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     /* Responsive */
diff --git a/serverStatus/templates/serverStatus/services.html b/serverStatus/templates/serverStatus/services.html
index 2e141e42e..65481d6c0 100644
--- a/serverStatus/templates/serverStatus/services.html
+++ b/serverStatus/templates/serverStatus/services.html
@@ -105,7 +105,7 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary);
         margin: 0;
     }
     
@@ -175,7 +175,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: #f8f9ff;
+        background: var(--bg-secondary);
         border-radius: 16px;
         padding: 15px;
     }
@@ -241,7 +241,7 @@
     
     .service-stats p {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary);
         margin: 0;
     }
     
@@ -366,7 +366,7 @@
     
     /* System Overview */
     .system-overview {
-        background: #f8f9ff;
+        background: var(--bg-secondary);
         border-radius: 12px;
         padding: 20px;
         margin-bottom: 20px;
@@ -381,7 +381,7 @@
     
     .overview-label {
         font-size: 13px;
-        color: #64748b;
+        color: var(--text-secondary);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         margin-bottom: 5px;