From 1b045eb26ba659f8d496b2a12b623dbea14384de Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Tue, 5 Aug 2025 01:47:22 +0500
Subject: [PATCH] enable dark mode

---
 .idea/workspace.xml                           |   7 +-
 aiScanner/templates/aiScanner/scanner.html    | 174 +++++++++---------
 firewall/templates/firewall/csf.html          |  61 +++---
 firewall/templates/firewall/modSecurity.html  |  59 +++---
 .../templates/firewall/modSecurityRules.html  |  47 ++---
 .../firewall/modSecurityRulesPacks.html       |  58 +++---
 6 files changed, 209 insertions(+), 197 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b2cef837b..9a76c4bf9 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,12 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="" />
+    <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$/firewall/templates/firewall/modSecurity.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurity.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRules.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRules.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRulesPacks.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRulesPacks.html" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
diff --git a/aiScanner/templates/aiScanner/scanner.html b/aiScanner/templates/aiScanner/scanner.html
index a80b374bf..fa6b7c848 100644
--- a/aiScanner/templates/aiScanner/scanner.html
+++ b/aiScanner/templates/aiScanner/scanner.html
@@ -20,18 +20,18 @@ AI Security Scanner - CyberPanel
     
     /* Section Headers */
     .scanner-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-primary, #e8e9ff);
     }
     
     .scanner-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -60,27 +60,27 @@ AI Security Scanner - CyberPanel
     }
     
     .scanner-alert-info {
-        background: #e0f2fe;
-        border-color: #0ea5e9;
-        color: #0c4a6e;
+        background: var(--alert-info-bg, #e0f2fe);
+        border-color: var(--alert-info-border, #0ea5e9);
+        color: var(--alert-info-text, #0c4a6e);
     }
     
     .scanner-alert-success {
-        background: #d1fae5;
-        border-color: #10b981;
-        color: #065f46;
+        background: var(--alert-success-bg, #d1fae5);
+        border-color: var(--alert-success-border, #10b981);
+        color: var(--alert-success-text, #065f46);
     }
     
     .scanner-alert-warning {
-        background: #fef3c7;
-        border-color: #f59e0b;
-        color: #92400e;
+        background: var(--alert-warning-bg, #fef3c7);
+        border-color: var(--alert-warning-border, #f59e0b);
+        color: var(--alert-warning-text, #92400e);
     }
     
     .scanner-alert-danger {
-        background: #fee2e2;
-        border-color: #ef4444;
-        color: #991b1b;
+        background: var(--alert-danger-bg, #fee2e2);
+        border-color: var(--alert-danger-border, #ef4444);
+        color: var(--alert-danger-text, #991b1b);
     }
     
     .scanner-alert i {
@@ -112,8 +112,8 @@ AI Security Scanner - CyberPanel
     }
     
     .stat-card {
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-primary, white);
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 12px;
         padding: 25px;
         text-align: center;
@@ -157,12 +157,12 @@ AI Security Scanner - CyberPanel
         font-size: 32px;
         font-weight: 700;
         margin: 0 0 8px 0;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     .stat-card p {
         margin: 0;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 14px;
         font-weight: 500;
     }
@@ -170,7 +170,7 @@ AI Security Scanner - CyberPanel
     .stat-card small {
         display: block;
         margin-top: 8px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 12px;
     }
     
@@ -203,8 +203,8 @@ AI Security Scanner - CyberPanel
     }
     
     .btn-default {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-primary, #e8e9ff);
         padding: 10px 20px;
         border-radius: 8px;
         font-weight: 600;
@@ -217,7 +217,7 @@ AI Security Scanner - CyberPanel
     }
     
     .btn-default:hover {
-        background: #e8e9ff;
+        background: var(--border-primary, #e8e9ff);
         color: #4644c0;
     }
     
@@ -240,18 +240,19 @@ AI Security Scanner - CyberPanel
         display: block;
         margin-bottom: 8px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-size: 14px;
     }
     
     .form-control {
         width: 100%;
         padding: 10px 15px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
         transition: all 0.3s ease;
-        background: white;
+        background: var(--bg-primary, white);
+        color: var(--text-primary, #2f3640);
     }
     
     .form-control:focus {
@@ -262,7 +263,7 @@ AI Security Scanner - CyberPanel
     
     /* Table Styles */
     .table-container {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         overflow: hidden;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
@@ -274,31 +275,31 @@ AI Security Scanner - CyberPanel
     }
     
     .scanner-table th {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         padding: 15px;
         text-align: left;
         font-size: 12px;
         font-weight: 700;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.8px;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-primary, #e8e9ff);
     }
     
     .scanner-table td {
         padding: 15px;
-        border-bottom: 1px solid #f0f0ff;
-        color: #2f3640;
+        border-bottom: 1px solid var(--border-light, #f0f0ff);
+        color: var(--text-primary, #2f3640);
         font-size: 14px;
     }
     
     .scanner-table tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
     }
     
     /* Progress Bar */
     .progress {
-        background: #e8e9ff;
+        background: var(--border-primary, #e8e9ff);
         height: 8px;
         border-radius: 4px;
         overflow: hidden;
@@ -335,23 +336,23 @@ AI Security Scanner - CyberPanel
     }
     
     .status-label.success {
-        background: #d1fae5;
-        color: #10b981;
+        background: var(--alert-success-bg, #d1fae5);
+        color: var(--alert-success-border, #10b981);
     }
     
     .status-label.warning {
-        background: #fef3c7;
-        color: #f59e0b;
+        background: var(--alert-warning-bg, #fef3c7);
+        color: var(--alert-warning-border, #f59e0b);
     }
     
     .status-label.danger {
-        background: #fee2e2;
-        color: #ef4444;
+        background: var(--alert-danger-bg, #fee2e2);
+        color: var(--alert-danger-border, #ef4444);
     }
     
     .status-label.info {
-        background: #e0f2fe;
-        color: #3b82f6;
+        background: var(--alert-info-bg, #e0f2fe);
+        color: var(--alert-info-border, #3b82f6);
     }
     
     /* Modal Styles */
@@ -367,8 +368,8 @@ AI Security Scanner - CyberPanel
     }
     
     .modal-header {
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 16px 16px 0 0;
         padding: 20px 25px;
     }
@@ -376,7 +377,7 @@ AI Security Scanner - CyberPanel
     .modal-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         display: flex;
         align-items: center;
         gap: 10px;
@@ -384,11 +385,13 @@ AI Security Scanner - CyberPanel
     
     .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-primary, #e8e9ff);
         border-radius: 0 0 16px 16px;
         padding: 15px 25px;
     }
@@ -468,16 +471,16 @@ AI Security Scanner - CyberPanel
                             <h6 style="font-weight: 600; margin-bottom: 10px;">Current Pricing:</h6>
                             <ul style="list-style: none; padding: 0; margin: 0;">
                                 <li style="margin-bottom: 5px;"><strong>{{ pricing_data.plan.name }}</strong></li>
-                                <li style="margin-bottom: 5px; color: #64748b;">Max Files: {{ pricing_data.plan.limits.max_files_per_scan|floatformat:0 }}</li>
-                                <li style="color: #64748b;">Max File Size: {{ pricing_data.plan.limits.max_file_size_mb }}MB</li>
+                                <li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Max Files: {{ pricing_data.plan.limits.max_files_per_scan|floatformat:0 }}</li>
+                                <li style="color: var(--text-secondary, #64748b);">Max File Size: {{ pricing_data.plan.limits.max_file_size_mb }}MB</li>
                             </ul>
                         </div>
                         <div>
                             <h6 style="font-weight: 600; margin-bottom: 10px;">Example Costs:</h6>
                             <ul style="list-style: none; padding: 0; margin: 0;">
-                                <li style="margin-bottom: 5px; color: #64748b;">Small Scan: ${{ pricing_data.plan.example_costs.small_scan.estimated_cost_usd }}</li>
-                                <li style="margin-bottom: 5px; color: #64748b;">Medium Scan: ${{ pricing_data.plan.example_costs.medium_scan.estimated_cost_usd }}</li>
-                                <li style="color: #64748b;">Large Scan: ${{ pricing_data.plan.example_costs.large_scan.estimated_cost_usd }}</li>
+                                <li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Small Scan: ${{ pricing_data.plan.example_costs.small_scan.estimated_cost_usd }}</li>
+                                <li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Medium Scan: ${{ pricing_data.plan.example_costs.medium_scan.estimated_cost_usd }}</li>
+                                <li style="color: var(--text-secondary, #64748b);">Large Scan: ${{ pricing_data.plan.example_costs.large_scan.estimated_cost_usd }}</li>
                             </ul>
                         </div>
                     </div>
@@ -500,7 +503,7 @@ AI Security Scanner - CyberPanel
                     <h4>VPS Free Scans Available</h4>
                     <p>Great news! Your CyberPanel VPS hosting includes <strong>{{ vps_info.free_scans_available|default:0 }} free AI security scans</strong> this month ({{ vps_info.scans_used_this_month|default:0 }}/{{ vps_info.free_scans_per_month|default:0 }} used).</p>
                     {% if not is_payment_configured %}
-                    <p style="margin-top: 10px;"><small style="color: #64748b;">You can still add a payment method below for additional scans beyond your free allowance.</small></p>
+                    <p style="margin-top: 10px;"><small style="color: var(--text-secondary, #64748b);">You can still add a payment method below for additional scans beyond your free allowance.</small></p>
                     {% endif %}
                 </div>
             </div>
@@ -581,21 +584,21 @@ AI Security Scanner - CyberPanel
             </div>
             
             {% if vps_info.is_vps|default:False and not is_payment_configured %}
-            <p style="color: #64748b; margin-bottom: 15px;">
+            <p style="color: var(--text-secondary, #64748b); margin-bottom: 15px;">
                 <i class="fas fa-info-circle"></i> 
                 Payment setup is optional for VPS users. You have {{ vps_info.free_scans_available|default:0 }} free scans available.
             </p>
             {% else %}
-            <p style="color: #64748b; margin-bottom: 15px;">
+            <p style="color: var(--text-secondary, #64748b); margin-bottom: 15px;">
                 <i class="fas fa-info-circle"></i> 
                 Your account uses automatic billing. Add multiple payment methods for backup security.
             </p>
             {% endif %}
             <div id="paymentMethodsList">
                 {% if is_payment_configured %}
-                <p style="color: #94a3b8;">Payment methods will be managed through the platform.</p>
+                <p style="color: var(--text-muted, #94a3b8);">Payment methods will be managed through the platform.</p>
                 {% else %}
-                <p style="color: #94a3b8;">No payment methods configured yet.</p>
+                <p style="color: var(--text-muted, #94a3b8);">No payment methods configured yet.</p>
                 {% endif %}
             </div>
         </div>
@@ -716,7 +719,7 @@ AI Security Scanner - CyberPanel
                                     <div class="progress" style="height: 20px;">
                                         <div class="progress-bar progress-bar-animated" 
                                              role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-                                            <span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: #2f3640; font-size: 12px;">0%</span>
+                                            <span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: var(--text-primary, #2f3640); font-size: 12px;">0%</span>
                                         </div>
                                     </div>
                                 {% else %}
@@ -791,7 +794,7 @@ AI Security Scanner - CyberPanel
                             <div class="progress" style="height: 25px;">
                                 <div id="scanProgressBar" class="progress-bar progress-bar-animated" 
                                      role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-                                    <span id="scanProgressText" style="position: absolute; width: 100%; text-align: center; line-height: 25px; color: #2f3640; font-weight: 600;">0%</span>
+                                    <span id="scanProgressText" style="position: absolute; width: 100%; text-align: center; line-height: 25px; color: var(--text-primary, #2f3640); font-weight: 600;">0%</span>
                                 </div>
                             </div>
                         </div>
@@ -801,38 +804,38 @@ AI Security Scanner - CyberPanel
                     <div class="row" style="margin-bottom: 15px;">
                         <div class="col-md-6">
                             <strong>Current Activity:</strong>
-                            <br><span id="currentActivity" class="text-muted">Initializing...</span>
+                            <br><span id="currentActivity" style="color: var(--text-secondary, #64748b);">Initializing...</span>
                         </div>
                         <div class="col-md-6">
                             <strong>Current File:</strong>
-                            <br><code id="currentFile" class="text-primary">N/A</code>
+                            <br><code id="currentFile" style="color: #5856d6;">N/A</code>
                         </div>
                     </div>
 
                     <!-- Statistics -->
                     <div class="row">
                         <div class="col-md-3">
-                            <div style="background: #e0f2fe; border-radius: 8px; padding: 15px; text-align: center;">
-                                <h4 id="filesDiscovered" style="margin: 0 0 5px 0; color: #3b82f6;">0</h4>
-                                <small style="color: #64748b;">Files Discovered</small>
+                            <div style="background: var(--alert-info-bg, #e0f2fe); border-radius: 8px; padding: 15px; text-align: center;">
+                                <h4 id="filesDiscovered" style="margin: 0 0 5px 0; color: var(--alert-info-border, #3b82f6);">0</h4>
+                                <small style="color: var(--text-secondary, #64748b);">Files Discovered</small>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div style="background: #e8e6ff; border-radius: 8px; padding: 15px; text-align: center;">
+                            <div style="background: var(--bg-secondary, #e8e6ff); border-radius: 8px; padding: 15px; text-align: center;">
                                 <h4 id="filesScanned" style="margin: 0 0 5px 0; color: #5856d6;">0</h4>
-                                <small style="color: #64748b;">Files Scanned</small>
+                                <small style="color: var(--text-secondary, #64748b);">Files Scanned</small>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div style="background: #fef3c7; border-radius: 8px; padding: 15px; text-align: center;">
-                                <h4 id="filesRemaining" style="margin: 0 0 5px 0; color: #f59e0b;">0</h4>
-                                <small style="color: #64748b;">Files Remaining</small>
+                            <div style="background: var(--alert-warning-bg, #fef3c7); border-radius: 8px; padding: 15px; text-align: center;">
+                                <h4 id="filesRemaining" style="margin: 0 0 5px 0; color: var(--alert-warning-border, #f59e0b);">0</h4>
+                                <small style="color: var(--text-secondary, #64748b);">Files Remaining</small>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div style="background: #fee2e2; border-radius: 8px; padding: 15px; text-align: center;">
-                                <h4 id="threatsFound" style="margin: 0 0 5px 0; color: #ef4444;">0</h4>
-                                <small style="color: #64748b;">Threats Found</small>
+                            <div style="background: var(--alert-danger-bg, #fee2e2); border-radius: 8px; padding: 15px; text-align: center;">
+                                <h4 id="threatsFound" style="margin: 0 0 5px 0; color: var(--alert-danger-border, #ef4444);">0</h4>
+                                <small style="color: var(--text-secondary, #64748b);">Threats Found</small>
                             </div>
                         </div>
                     </div>
@@ -849,7 +852,7 @@ AI Security Scanner - CyberPanel
                     <!-- Last Updated -->
                     <div class="row" style="margin-top: 15px;">
                         <div class="col-md-12">
-                            <small class="text-muted">Last updated: <span id="lastUpdated">Never</span></small>
+                            <small style="color: var(--text-muted, #94a3b8);">Last updated: <span id="lastUpdated">Never</span></small>
                         </div>
                     </div>
                 </div>
@@ -1240,13 +1243,13 @@ function displayCompletedScanDetails(scan) {
                                 finding.severity === 'medium' ? 'warning' : 'info';
             
             findingsHtml += `
-                <div style="background: white; border: 1px solid #e8e9ff; border-radius: 8px; padding: 15px;">
-                    <h6 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px;">
+                <div style="background: var(--bg-primary, white); border: 1px solid var(--border-primary, #e8e9ff); border-radius: 8px; padding: 15px;">
+                    <h6 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px; color: var(--text-primary, #2f3640);">
                         <span class="status-label ${severityClass}" style="text-transform: uppercase;">${finding.severity}</span>
                         ${finding.title}
                     </h6>
-                    <p style="margin: 0 0 10px 0; color: #64748b;">${finding.description}</p>
-                    ${finding.file ? `<small style="color: #94a3b8;">File: ${finding.file}</small>` : ''}
+                    <p style="margin: 0 0 10px 0; color: var(--text-secondary, #64748b);">${finding.description}</p>
+                    ${finding.file ? `<small style="color: var(--text-muted, #94a3b8);">File: ${finding.file}</small>` : ''}
                 </div>
             `;
         });
@@ -1282,7 +1285,7 @@ function displayCompletedScanDetails(scan) {
                 </div>
                 <h4 style="margin: 0; font-size: 24px; font-weight: 700;">${threatsFound}</h4>
                 <p style="margin: 5px 0 0 0; font-size: 13px;">Threats Found</p>
-                ${(criticalThreats > 0 || highThreats > 0) ? `<small style="color: #ef4444; font-size: 11px;">${criticalThreats > 0 ? `${criticalThreats} Critical` : ''}${criticalThreats > 0 && highThreats > 0 ? ', ' : ''}${highThreats > 0 ? `${highThreats} High` : ''}</small>` : ''}
+                ${(criticalThreats > 0 || highThreats > 0) ? `<small style="color: var(--alert-danger-border, #ef4444); font-size: 11px;">${criticalThreats > 0 ? `${criticalThreats} Critical` : ''}${criticalThreats > 0 && highThreats > 0 ? ', ' : ''}${highThreats > 0 ? `${highThreats} High` : ''}</small>` : ''}
             </div>
             <div class="stat-card" style="padding: 20px;">
                 <div class="stat-card-icon info" style="width: 40px; height: 40px; font-size: 18px; margin-bottom: 10px;">
@@ -1412,7 +1415,7 @@ function updateTableRowProgress(row, data) {
                     <div class="progress-bar progress-bar-animated" 
                          role="progressbar" style="width: ${data.progress}%" 
                          aria-valuenow="${data.progress}" aria-valuemin="0" aria-valuemax="100">
-                        <span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: #2f3640; font-size: 12px;">${data.progress}%</span>
+                        <span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: var(--text-primary, #2f3640); font-size: 12px;">${data.progress}%</span>
                     </div>
                 </div>
             `;
@@ -1598,7 +1601,7 @@ function displayScheduledScans(scans) {
     const container = document.getElementById('scheduledScansContainer');
     
     if (!scans || scans.length === 0) {
-        container.innerHTML = '<p style="color: #94a3b8; text-align: center; padding: 20px;">No scheduled scans configured yet.</p>';
+        container.innerHTML = '<p style="color: var(--text-muted, #94a3b8); text-align: center; padding: 20px;">No scheduled scans configured yet.</p>';
         return;
     }
     
@@ -1970,10 +1973,10 @@ document.addEventListener('DOMContentLoaded', function() {
 }
 
 .scheduled-scan-card {
-    border: 1px solid #e8e9ff;
+    border: 1px solid var(--border-primary, #e8e9ff);
     border-radius: 8px;
     padding: 20px;
-    background: white;
+    background: var(--bg-primary, white);
 }
 
 .scheduled-scan-header {
@@ -1985,13 +1988,13 @@ document.addEventListener('DOMContentLoaded', function() {
 
 .scheduled-scan-header h4 {
     margin: 0;
-    color: #2f3640;
+    color: var(--text-primary, #2f3640);
     font-size: 16px;
 }
 
 .scheduled-scan-info p {
     margin: 5px 0;
-    color: #64748b;
+    color: var(--text-secondary, #64748b);
     font-size: 14px;
 }
 
@@ -2003,7 +2006,8 @@ document.addEventListener('DOMContentLoaded', function() {
 }
 
 .checkbox-group {
-    background: #f8f9fa;
+    background: var(--bg-secondary, #f8f9fa);
+    border-color: var(--border-primary, #ddd);
 }
 
 .form-check {
diff --git a/firewall/templates/firewall/csf.html b/firewall/templates/firewall/csf.html
index b00ed414d..660a3062b 100644
--- a/firewall/templates/firewall/csf.html
+++ b/firewall/templates/firewall/csf.html
@@ -97,10 +97,10 @@
     
     /* Install Panel */
     .install-panel {
-        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;
+        border: 1px solid var(--border-primary, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
         text-align: center;
@@ -116,12 +116,12 @@
     .install-title {
         font-size: 1.5rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
     }
     
     .install-subtitle {
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 2rem;
     }
     
@@ -147,10 +147,10 @@
     
     /* Installation Progress */
     .install-progress {
-        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;
+        border: 1px solid var(--border-primary, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
         padding: 2rem;
@@ -173,13 +173,13 @@
     .progress-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
     }
     
     .log-textarea {
         width: 100%;
         padding: 1rem;
-        border: 2px solid #e8e9ff;
+        border: 2px solid var(--border-primary, #e8e9ff);
         border-radius: 10px;
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.875rem;
@@ -191,10 +191,10 @@
     
     /* Configuration Panel */
     .config-panel {
-        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;
+        border: 1px solid var(--border-primary, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
@@ -204,7 +204,7 @@
         display: flex;
         gap: 0.25rem;
         padding: 0.5rem;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 12px;
         margin-bottom: 2rem;
     }
@@ -217,7 +217,7 @@
         border-radius: 8px;
         font-weight: 600;
         font-size: 0.9375rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
@@ -253,8 +253,8 @@
     
     /* Native GUI Button */
     .native-gui-btn {
-        background: #f8f9ff;
-        border: 2px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 2px solid var(--border-primary, #e8e9ff);
         color: #5b5fcf;
         padding: 0.75rem 1.5rem;
         border-radius: 10px;
@@ -279,17 +279,17 @@
     
     /* Form Styles */
     .form-section {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 12px;
         padding: 2rem;
         margin-bottom: 1.5rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
     }
     
     .form-section-title {
         font-size: 1.125rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1.5rem;
         display: flex;
         align-items: center;
@@ -306,7 +306,7 @@
     .form-label {
         flex: 0 0 200px;
         font-weight: 600;
-        color: #334155;
+        color: var(--text-secondary, #334155);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
@@ -315,17 +315,18 @@
     .form-control {
         flex: 1;
         padding: 0.75rem 1rem;
-        border: 2px solid #e8e9ff;
+        border: 2px solid var(--border-primary, #e8e9ff);
         border-radius: 10px;
         font-size: 0.9375rem;
         transition: all 0.3s ease;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        color: var(--text-primary, #1e293b);
     }
     
     .form-control:focus {
         outline: none;
         border-color: #5b5fcf;
-        background: white;
+        background: var(--bg-primary, white);
         box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
     }
     
@@ -370,7 +371,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #cbd5e1;
+        background-color: var(--bg-tertiary, #cbd5e1);
         transition: .4s;
         border-radius: 26px;
     }
@@ -454,15 +455,15 @@
     }
     
     .alert-success {
-        background: #e8e6ff;
-        color: #5856d6;
-        border: 1px solid #d4d4ff;
+        background: var(--alert-success-bg, #e8e6ff);
+        color: var(--alert-success-text, #5856d6);
+        border: 1px solid var(--alert-success-border, #d4d4ff);
     }
     
     .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-icon {
@@ -489,7 +490,7 @@
     .coming-soon {
         text-align: center;
         padding: 3rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 1.125rem;
     }
     
@@ -716,7 +717,7 @@
             <div class="tab-content" id="lfd">
                 <div class="coming-soon">
                     <i class="fas fa-clock fa-3x" style="color: #5b5fcf; margin-bottom: 1rem;"></i>
-                    <h3 style="color: #1e293b; margin-bottom: 0.5rem;">{% trans 'LFD Configuration' %}</h3>
+                    <h3 style="color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">{% trans 'LFD Configuration' %}</h3>
                     <p>{% trans 'Login Failure Daemon configuration coming soon.' %}</p>
                 </div>
             </div>
diff --git a/firewall/templates/firewall/modSecurity.html b/firewall/templates/firewall/modSecurity.html
index 922766073..dfbb73c5a 100644
--- a/firewall/templates/firewall/modSecurity.html
+++ b/firewall/templates/firewall/modSecurity.html
@@ -116,10 +116,10 @@
     
     /* Install Panel */
     .install-panel {
-        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;
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
         text-align: center;
@@ -135,12 +135,12 @@
     .install-title {
         font-size: 1.5rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
     }
     
     .install-subtitle {
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 2rem;
     }
     
@@ -166,10 +166,10 @@
     
     /* Installation Progress */
     .install-progress {
-        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;
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
         padding: 2rem;
@@ -191,28 +191,28 @@
     .progress-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
     }
     
     .log-textarea {
         width: 100%;
         padding: 1rem;
-        border: 2px solid #e8e9ff;
+        border: 2px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.875rem;
-        background: #1e293b;
-        color: #5b5fcf;
+        background: var(--bg-tertiary, #1e293b);
+        color: var(--text-accent, #5b5fcf);
         resize: vertical;
         min-height: 300px;
     }
     
     /* Configuration Panel */
     .config-panel {
-        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;
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
@@ -259,7 +259,7 @@
     .form-label {
         flex: 0 0 200px;
         font-weight: 600;
-        color: #334155;
+        color: var(--text-secondary, #334155);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
@@ -268,17 +268,18 @@
     .form-control {
         flex: 1;
         padding: 0.75rem 1rem;
-        border: 2px solid #e8e9ff;
+        border: 2px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         font-size: 0.9375rem;
         transition: all 0.3s ease;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        color: var(--text-primary, #1e293b);
     }
     
     .form-control:focus {
         outline: none;
         border-color: #22c55e;
-        background: white;
+        background: var(--bg-primary, white);
         box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
     }
     
@@ -312,7 +313,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #cbd5e1;
+        background-color: var(--bg-tertiary, #cbd5e1);
         transition: .4s;
         border-radius: 26px;
     }
@@ -376,15 +377,15 @@
     }
     
     .alert-success {
-        background: #e8e6ff;
-        color: #5856d6;
-        border: 1px solid #d4d4ff;
+        background: var(--alert-success-bg, #e8e6ff);
+        color: var(--alert-success-text, #5856d6);
+        border: 1px solid var(--alert-success-border, #d4d4ff);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--alert-error-bg, #fee2e2);
+        color: var(--alert-error-text, #991b1b);
+        border: 1px solid var(--alert-error-border, #fecaca);
     }
     
     .alert-icon {
@@ -393,8 +394,8 @@
     
     /* Info Box */
     .info-box {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
+        background: var(--alert-info-bg, #f0f9ff);
+        border: 1px solid var(--alert-info-border, #bae6fd);
         border-radius: 10px;
         padding: 1rem 1.5rem;
         margin-bottom: 1.5rem;
@@ -404,12 +405,12 @@
     }
     
     .info-icon {
-        color: #0284c7;
+        color: var(--alert-info-text, #0284c7);
         font-size: 1.25rem;
     }
     
     .info-text {
-        color: #075985;
+        color: var(--alert-info-text, #075985);
         font-size: 0.875rem;
     }
     
@@ -417,7 +418,7 @@
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
+        border: 2px solid var(--border-color, #f3f3f3);
         border-top: 2px solid #5b5fcf;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -537,7 +538,7 @@
                     </div>
                     {% trans "ModSecurity Configuration" %}
                 </div>
-                <div ng-show="!modsecLoading" class="loading-spinner"></div>
+                <div ng-show="modsecLoading" class="loading-spinner"></div>
             </div>
             
             <div class="panel-content">
diff --git a/firewall/templates/firewall/modSecurityRules.html b/firewall/templates/firewall/modSecurityRules.html
index 51bd6b2b3..36b6dd3e9 100644
--- a/firewall/templates/firewall/modSecurityRules.html
+++ b/firewall/templates/firewall/modSecurityRules.html
@@ -116,10 +116,10 @@
     
     /* Rules Editor Panel */
     .rules-panel {
-        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;
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
@@ -153,12 +153,13 @@
     
     .panel-content {
         padding: 2rem;
+        background: var(--bg-primary, white);
     }
     
     /* Info Box */
     .info-box {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
+        background: var(--bg-secondary, #f0f9ff);
+        border: 1px solid var(--border-color-light, #bae6fd);
         border-radius: 10px;
         padding: 1rem 1.5rem;
         margin-bottom: 1.5rem;
@@ -168,12 +169,12 @@
     }
     
     .info-icon {
-        color: #0284c7;
+        color: var(--accent-primary, #0284c7);
         font-size: 1.25rem;
     }
     
     .info-text {
-        color: #075985;
+        color: var(--text-secondary, #075985);
         font-size: 0.875rem;
     }
     
@@ -181,12 +182,12 @@
     .rules-textarea {
         width: 100%;
         padding: 1rem;
-        border: 2px solid #e8e9ff;
+        border: 2px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.875rem;
         background: #1e293b;
-        color: #5b5fcf;
+        color: var(--text-primary, #5b5fcf);
         resize: vertical;
         min-height: 400px;
         transition: all 0.3s ease;
@@ -194,16 +195,16 @@
     
     .rules-textarea:focus {
         outline: none;
-        border-color: #5b5fcf;
+        border-color: var(--accent-primary, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
     }
     
     /* Install Panel */
     .install-panel {
-        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;
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
         text-align: center;
@@ -212,19 +213,19 @@
     
     .install-icon {
         font-size: 4rem;
-        color: #5b5fcf;
+        color: var(--accent-primary, #5b5fcf);
         margin-bottom: 1.5rem;
     }
     
     .install-title {
         font-size: 1.5rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
     }
     
     .install-subtitle {
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 2rem;
     }
     
@@ -281,15 +282,15 @@
     }
     
     .alert-success {
-        background: #e8e6ff;
-        color: #5856d6;
-        border: 1px solid #d4d4ff;
+        background: var(--success-bg, #e8e6ff);
+        color: var(--success-text, #5856d6);
+        border: 1px solid var(--success-border, #d4d4ff);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-icon {
@@ -300,8 +301,8 @@
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border: 2px solid var(--border-color-light, #f3f3f3);
+        border-top: 2px solid var(--accent-primary, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
@@ -376,7 +377,7 @@
                     </div>
                     {% trans "Edit Rules" %}
                 </div>
-                <div ng-show="!modsecLoading" class="loading-spinner"></div>
+                <div ng-show="modsecLoading" class="loading-spinner"></div>
             </div>
             
             <div class="panel-content">
diff --git a/firewall/templates/firewall/modSecurityRulesPacks.html b/firewall/templates/firewall/modSecurityRulesPacks.html
index 0c792c675..fde6f1f22 100644
--- a/firewall/templates/firewall/modSecurityRulesPacks.html
+++ b/firewall/templates/firewall/modSecurityRulesPacks.html
@@ -117,10 +117,10 @@
     
     /* Install Panel */
     .install-panel {
-        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;
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
         text-align: center;
@@ -136,7 +136,7 @@
     .install-title {
         font-size: 1.5rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
     }
     
@@ -162,10 +162,10 @@
     
     /* Rules Panel */
     .rules-panel {
-        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;
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
@@ -177,25 +177,25 @@
     }
     
     .custom-table thead th {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         padding: 1rem 1.5rem;
         text-align: left;
         font-weight: 600;
-        color: #334155;
+        color: var(--text-secondary, #334155);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-light, #e8e9ff);
     }
     
     .custom-table tbody td {
         padding: 1.25rem 1.5rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         vertical-align: middle;
     }
     
     .custom-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
     }
     
     .custom-table tbody tr:last-child td {
@@ -204,7 +204,7 @@
     
     .package-name {
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 1rem;
     }
     
@@ -229,7 +229,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #cbd5e1;
+        background-color: var(--bg-tertiary, #cbd5e1);
         transition: .4s;
         border-radius: 26px;
     }
@@ -256,8 +256,8 @@
     
     /* Buttons */
     .btn-configure {
-        background: #f8f9ff;
-        border: 2px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 2px solid var(--border-light, #e8e9ff);
         color: #5b5fcf;
         padding: 0.75rem 1.5rem;
         border-radius: 10px;
@@ -295,15 +295,15 @@
     }
     
     .alert-success {
-        background: #e8e6ff;
-        color: #5856d6;
-        border: 1px solid #d4d4ff;
+        background: var(--alert-success-bg, #e8e6ff);
+        color: var(--alert-success-text, #5856d6);
+        border: 1px solid var(--alert-success-border, #d4d4ff);
     }
     
     .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-icon {
@@ -313,10 +313,10 @@
     /* Rule Files Table */
     .rule-files-section {
         margin-top: 2rem;
-        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;
+        border: 1px solid var(--border-light, #e8e9ff);
         overflow: hidden;
         padding: 2rem;
     }
@@ -327,25 +327,25 @@
     }
     
     .rule-files-table thead th {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #334155;
+        color: var(--text-secondary, #334155);
         font-size: 0.875rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 2px solid #e8e9ff;
+        border-bottom: 2px solid var(--border-light, #e8e9ff);
     }
     
     .rule-files-table tbody td {
         padding: 1rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-light, #e8e9ff);
         vertical-align: middle;
     }
     
     .rule-files-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
     }
     
     .rule-files-table tbody tr:last-child td {
@@ -362,7 +362,7 @@
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
+        border: 2px solid var(--bg-tertiary, #f3f3f3);
         border-top: 2px solid #5b5fcf;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -490,7 +490,7 @@
         
         <!-- Rule Files Section -->
         <div ng-hide="ruleFiles" class="rule-files-section">
-            <h3 style="font-size: 1.25rem; font-weight: 600; color: #1e293b; margin-bottom: 1.5rem;">
+            <h3 style="font-size: 1.25rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 1.5rem;">
                 <i class="fas fa-file-code" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
                 {% trans "Rule Files" %}
             </h3>