fix(ui): fix greyed-out toggle switches on admin connections page

The toggles used Tailwind CSS v3 JIT pseudo-element utilities
(after:content-[''], peer-checked:after:translate-x-full, etc.)
that are not available in Tailwind v2.2.19 CDN.

Added .doc-toggle / .doc-toggle-track CSS classes to styles.css
using native CSS ::after pseudo-elements and adjacent-sibling
selectors — works across all Tailwind versions and browsers.
Updated all three toggle instances in admin_connections.html
(SSO auto-login, QR login, and JS-created service settings toggles).

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
Agent-Logs-Url: https://github.com/christianlouis/DocuElevate/sessions/64581c3a-6c34-4bb6-bb6b-6331945fed04

frontend/static/styles.css

@@ -238,3 +238,81 @@ html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
 
 /* ---- Settings page: sidebar active state (dark) ---- */
 html.dark .bg-blue-50 { background-color: #1e3a5f; }
+
+/* =============================================================
+   DOC-TOGGLE  –  cross-browser toggle switch
+   Works with Tailwind v2 CDN (which lacks after:* utilities).
+   Usage:
+     <label class="doc-toggle">
+       <input type="checkbox" class="sr-only" onchange="...">
+       <span class="doc-toggle-track" aria-hidden="true"></span>
+       <span class="ml-3 ...">Label text</span>
+     </label>
+   ============================================================= */
+
+.doc-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.doc-toggle-track {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  min-width: 44px;
+  height: 24px;
+  background-color: #e5e7eb; /* gray-200 */
+  border-radius: 9999px;
+  transition: background-color 0.2s ease-in-out;
+  flex-shrink: 0;
+}
+
+.doc-toggle-track::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db; /* gray-300 */
+  border-radius: 9999px;
+  transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+
+.doc-toggle input[type="checkbox"]:checked + .doc-toggle-track {
+  background-color: #4f46e5; /* indigo-600 */
+}
+
+.doc-toggle input[type="checkbox"]:checked + .doc-toggle-track::after {
+  transform: translateX(20px);
+  border-color: #ffffff;
+}
+
+.doc-toggle input[type="checkbox"]:focus-visible + .doc-toggle-track {
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1; /* ring-2 ring-indigo-500 with offset */
+}
+
+/* Dark mode overrides */
+html.dark .doc-toggle-track {
+  background-color: #374151; /* gray-700 */
+}
+
+html.dark .doc-toggle-track::after {
+  background-color: #ffffff;
+  border-color: #4b5563; /* gray-600 */
+}
+
+html.dark .doc-toggle input[type="checkbox"]:checked + .doc-toggle-track {
+  background-color: #4f46e5; /* indigo-600 */
+}
+
+html.dark .doc-toggle input[type="checkbox"]:checked + .doc-toggle-track::after {
+  border-color: #ffffff;
+}
+
+html.dark .doc-toggle input[type="checkbox"]:focus-visible + .doc-toggle-track {
+  box-shadow: 0 0 0 2px #111827, 0 0 0 4px #6366f1; /* dark background offset */
+}

frontend/templates/admin_connections.html

@@ -18,11 +18,11 @@
         <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ _("connections.sso_auto_login_description") }}</p>
       </div>
       <div>
-        <label class="relative inline-flex items-center cursor-pointer">
+        <label class="doc-toggle">
-          <input type="checkbox" id="sso-auto-login-toggle" class="sr-only peer"
+          <input type="checkbox" id="sso-auto-login-toggle" class="sr-only"
                  {% if sso_auto_login %}checked{% endif %}
                  onchange="toggleSetting('sso_auto_login', this.checked)">
-          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600" style="min-width:44px; min-height:24px;"></div>
+          <span class="doc-toggle-track" aria-hidden="true"></span>
           <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">{{ _("connections.sso_auto_login") }}</span>
         </label>
       </div>
@@ -44,11 +44,11 @@
         {% endif %}
       </div>
       <div>
-        <label class="relative inline-flex items-center cursor-pointer">
+        <label class="doc-toggle">
-          <input type="checkbox" id="qr-upload-toggle" class="sr-only peer"
+          <input type="checkbox" id="qr-upload-toggle" class="sr-only"
                  {% if qr_login_enabled %}checked{% endif %}
                  onchange="toggleSetting('qr_login_enabled', this.checked)">
-          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600" style="min-width:44px; min-height:24px;"></div>
+          <span class="doc-toggle-track" aria-hidden="true"></span>
           <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">{{ _("connections.qr_code_enabled") }}</span>
         </label>
       </div>
@@ -200,24 +200,24 @@ function openServiceModal(serviceKey) {
     }
 
     if (meta.type === 'boolean') {
-      // Styled Tailwind toggle switch (matches the page-level toggles)
+      // Styled toggle switch using .doc-toggle CSS class (compatible with Tailwind v2 CDN).
       const toggleWrapper = document.createElement('label');
-      toggleWrapper.className = 'relative inline-flex items-center cursor-pointer';
+      toggleWrapper.className = 'doc-toggle';
       toggleWrapper.setAttribute('aria-label', field.key.replace(/_/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); }));
 
       const checkbox = document.createElement('input');
       checkbox.type = 'checkbox';
       checkbox.id = 'field-' + field.key;
       checkbox.name = field.key;
-      checkbox.className = 'sr-only peer';
+      checkbox.className = 'sr-only';
       const val = field.value;
       if (val === true || val === 'true' || val === '1' || val === 'True') {
         checkbox.checked = true;
       }
 
-      const slider = document.createElement('div');
+      const slider = document.createElement('span');
-      slider.className = "w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600";
+      slider.className = 'doc-toggle-track';
-      slider.style.cssText = 'min-width:44px; min-height:24px;';
+      slider.setAttribute('aria-hidden', 'true');
 
       toggleWrapper.appendChild(checkbox);
       toggleWrapper.appendChild(slider);