feat(ui): replace Tailwind CSS CDN with compiled v3 production build

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
Agent-Logs-Url: https://github.com/christianlouis/DocuElevate/sessions/85d2244d-170a-48d3-8f6b-b4c124a49ed9

.gitignore

@@ -200,3 +200,6 @@ cython_debug/
 # Build metadata files - generated at build time
 GIT_SHA
 RUNTIME_INFO
+
+# Frontend build tooling
+frontend/node_modules/

Dockerfile

@@ -27,7 +27,20 @@ RUN pip install --no-cache-dir -r requirements.txt \
     && find /opt/venv -type f -name "*.pyc" -delete \
     && find /opt/venv -type d -name "__pycache__" -exec rm -rf {} + 2>/dev/null || true
 
-# ── Stage 2: Documentation builder ──────────────────────────────────────────
+# ── Stage 2: Frontend asset builder (Tailwind CSS) ──────────────────────────
+FROM node:20-alpine AS frontend-builder
+
+WORKDIR /frontend
+
+# Install dependencies first (layer-cached unless package.json/lockfile changes)
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci --omit=dev
+
+# Copy source files and compile Tailwind CSS
+COPY frontend/ ./
+RUN npm run build
+
+# ── Stage 3: Documentation builder ──────────────────────────────────────────
 FROM python:3.14.3-slim AS docs-builder
 
 WORKDIR /docs
@@ -43,7 +56,7 @@ COPY mkdocs.yml /docs/mkdocs.yml
 # Build the static documentation site
 RUN mkdocs build --config-file /docs/mkdocs.yml --site-dir /docs/docs_build
 
-# ── Stage 3: Runtime image ───────────────────────────────────────────────────
+# ── Stage 4: Runtime image ───────────────────────────────────────────────────
 FROM python:3.14.3-slim
 
 WORKDIR /app
@@ -68,6 +81,8 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 # Copy application code
 COPY ./app /app/app
 COPY ./frontend /app/frontend
+# Overlay compiled Tailwind CSS from the frontend build stage
+COPY --from=frontend-builder /frontend/static/styles.css /app/frontend/static/styles.css
 COPY ./migrations /app/migrations
 COPY ./alembic.ini /app/alembic.ini
 COPY ./LICENSE /app/LICENSE

app/config.py

@@ -1146,7 +1146,7 @@ class Settings(BaseSettings):
     security_header_csp_enabled: bool = Field(default=True, description="Enable CSP header.")
     security_header_csp_value: str = Field(
         default=(
-            "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com;"
+            "default-src 'self'; script-src 'self' 'unsafe-inline';"
             " style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;"
         ),
         description="CSP header value. Customize based on your application's resource loading needs.",

docs/ConfigurationGuide.md

@@ -792,7 +792,7 @@ SECURITY_HEADER_CSP_VALUE="default-src 'self'; script-src 'self'; style-src 'sel
 SECURITY_HEADER_CSP_VALUE="default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline';"
 ```
 
-**Note:** The default policy includes `'unsafe-inline'` and `https://cdn.tailwindcss.com` for compatibility with Tailwind CSS v3 Play CDN and inline JavaScript. For stricter security, use nonces or hashes.
+**Note:** The default policy includes `'unsafe-inline'` for compatibility with inline JavaScript. Tailwind CSS v3 is compiled at build time into a static file served from `'self'`, so no external style CDN is needed.
 
 #### X-Frame-Options
 

docs/ProductionReadiness.md

@@ -157,10 +157,10 @@ Recommended headers to configure at the proxy level:
 
 #### Content-Security-Policy Notes
 
-DocuElevate's frontend uses Tailwind CSS v3 Play CDN.  In production, ensure your CSP allows loading scripts from `https://cdn.tailwindcss.com`.  A starting point:
+DocuElevate's frontend uses Tailwind CSS v3 compiled at Docker build time. No external CDN requests are needed for CSS. In production, your CSP does not need to allow any external style sources beyond your own static file origin.  A starting point:
 
 ```
-Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;
+Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;
 ```
 
 Audit and tighten this policy for your specific deployment.

frontend/input.css

@@ -0,0 +1,329 @@
+/* frontend/input.css
+ * Tailwind CSS v3 source file.
+ * Edit this file (not static/styles.css) — the compiled output is
+ * generated by running:  npm run build   (inside the frontend/ directory)
+ */
+
+/* ── Tailwind layers ──────────────────────────────────────────────────────── */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ── Custom utilities ─────────────────────────────────────────────────────── */
+
+/* =============================================================
+   ACCESSIBILITY
+   Skip-to-content link, focus indicators, and screen-reader-only
+   utility class following WCAG 2.1 Level AA requirements.
+   ============================================================= */
+
+/* Skip-to-content link: visible only on keyboard focus */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  z-index: 9999;
+  padding: 0.75rem 1.5rem;
+  background-color: #1d4ed8;
+  color: #ffffff;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: 0 0 0.375rem 0;
+}
+.skip-link:focus {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+/* Enhanced focus-visible indicators for keyboard navigation (WCAG 2.4.7) */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+/* Screen-reader-only utility (visually hidden, accessible to AT) */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+body {
+    /* Your global overrides can go here if needed */
+  }
+  .material-symbols-light--folder-managed-outline {
+    display: inline-block;
+    width: 96px;
+    height: 96px;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m17.212 20.404l-.108-.885q-.57-.125-.938-.33q-.368-.204-.7-.577l-.835.334l-.539-.815l.689-.577q-.165-.531-.165-1.035t.165-1.034l-.689-.577l.539-.816l.835.335q.332-.393.7-.588q.369-.195.938-.32l.108-.885h1l.107.885q.57.125.938.32t.7.588l.835-.335l.539.816l-.689.576q.166.531.166 1.035t-.166 1.035l.689.577l-.539.815l-.834-.335q-.333.373-.701.578q-.369.205-.938.33l-.107.885zm.5-1.731q.882 0 1.518-.635q.636-.636.636-1.519t-.636-1.518t-1.518-.636t-1.519.636t-.635 1.518t.635 1.519t1.518.635M4 18V6v4.435V10zm.616 1q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h4.981l2 2h7.789q.69 0 1.153.463T21 8.616v2.294q-.238-.152-.479-.265q-.24-.112-.521-.21v-1.82q0-.269-.173-.442T19.385 8h-8.19l-2-2h-4.58q-.269 0-.442.173T4 6.616v10.769q0 .269.173.442t.443.173h6.748q.055.275.131.515t.186.485z'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+  }
+
+  /* Ensure pagination wraps properly on small screens */
+  .pagination {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .pagination-buttons {
+    flex-wrap: wrap;
+  }
+
+  /* Ensure filter items stack on very small screens */
+  @media (max-width: 480px) {
+    .filter-group {
+      flex-direction: column;
+    }
+    .filter-item {
+      min-width: unset;
+      width: 100%;
+    }
+  }
+
+/* =============================================================
+   DARK MODE
+   Activated by "dark" class on <html> element.
+   Toggled by the navbar button; preference stored in localStorage.
+   Falls back to the server-side ui_default_color_scheme setting,
+   then to the OS prefers-color-scheme media query.
+   WCAG AA contrast ratios verified for all text/background pairs.
+   ============================================================= */
+
+/* Tell the browser we support both colour schemes */
+html { color-scheme: light; }
+html.dark { color-scheme: dark; }
+
+/* ---- Base / Body ---- */
+html.dark body { background-color: #111827; color: #e5e7eb; }
+html.dark .bg-gray-50 { background-color: #111827; }
+html.dark .bg-white   { background-color: #1f2937; }
+html.dark .bg-gray-100 { background-color: #374151; }
+html.dark .bg-gray-200 { background-color: #4b5563; }
+
+/* ---- Text colours ---- */
+html.dark .text-gray-900 { color: #f9fafb; }
+html.dark .text-gray-800 { color: #f3f4f6; }
+html.dark .text-gray-700 { color: #e5e7eb; }
+html.dark .text-gray-600 { color: #d1d5db; }
+html.dark .text-gray-500 { color: #9ca3af; }
+html.dark .text-gray-400 { color: #9ca3af; }
+html.dark .text-black    { color: #f9fafb; }
+
+/* ---- Borders ---- */
+html.dark .border-gray-100 { border-color: #374151; }
+html.dark .border-gray-200 { border-color: #374151; }
+html.dark .border-gray-300 { border-color: #4b5563; }
+html.dark .border-gray-400 { border-color: #6b7280; }
+html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
+html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
+html.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
+
+/* ---- Hover states ---- */
+html.dark .hover\:bg-gray-50:hover  { background-color: #374151; }
+html.dark .hover\:bg-gray-100:hover { background-color: #4b5563; }
+html.dark .hover\:text-gray-900:hover { color: #f9fafb; }
+html.dark .hover\:text-gray-700:hover { color: #e5e7eb; }
+
+/* ---- Shadows (softened for dark mode) ---- */
+html.dark .shadow,
+html.dark .shadow-md,
+html.dark .shadow-sm,
+html.dark .shadow-lg {
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.6), 0 1px 2px 0 rgba(0,0,0,0.4);
+}
+
+/* ---- Alert / info-banner backgrounds ---- */
+html.dark .bg-blue-50   { background-color: #1e3a5f; }
+html.dark .bg-green-50  { background-color: #052e16; }
+html.dark .bg-red-50    { background-color: #450a0a; }
+html.dark .bg-yellow-50 { background-color: #451a03; }
+html.dark .bg-indigo-50 { background-color: #1e1b4b; }
+html.dark .bg-orange-50 { background-color: #431407; }
+
+/* ---- Badge / pill backgrounds ---- */
+html.dark .bg-blue-100   { background-color: #1e3a5f; }
+html.dark .bg-green-100  { background-color: #052e16; }
+html.dark .bg-red-100    { background-color: #450a0a; }
+html.dark .bg-yellow-100 { background-color: #451a03; }
+html.dark .bg-indigo-100 { background-color: #431407; }
+html.dark .bg-orange-100 { background-color: #431407; }
+html.dark .bg-purple-100 { background-color: #2e1065; }
+
+/* ---- Status / badge text colours ---- */
+html.dark .text-blue-700  { color: #93c5fd; }
+html.dark .text-blue-800  { color: #bfdbfe; }
+html.dark .text-green-700 { color: #86efac; }
+html.dark .text-green-800 { color: #bbf7d0; }
+html.dark .text-red-700   { color: #fca5a5; }
+html.dark .text-red-800   { color: #fecaca; }
+html.dark .text-yellow-700 { color: #fcd34d; }
+html.dark .text-yellow-800 { color: #fde68a; }
+html.dark .text-indigo-700 { color: #a5b4fc; }
+html.dark .text-indigo-800 { color: #c7d2fe; }
+html.dark .text-orange-700 { color: #fdba74; }
+html.dark .text-orange-800 { color: #fed7aa; }
+html.dark .text-purple-700 { color: #d8b4fe; }
+html.dark .text-purple-800 { color: #e9d5ff; }
+
+/* ---- Dropdown / popup menus ---- */
+html.dark .bg-white.rounded-md.shadow-lg { background-color: #1f2937; }
+html.dark .ring-black { --tw-ring-color: rgba(0,0,0,0.5); }
+
+/* ---- Form inputs / selects / textareas ---- */
+html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+html.dark select,
+html.dark textarea {
+  background-color: #374151;
+  border-color: #4b5563;
+  color: #e5e7eb;
+}
+html.dark input::placeholder,
+html.dark textarea::placeholder {
+  color: #9ca3af;
+}
+html.dark input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+html.dark select:focus,
+html.dark textarea:focus {
+  border-color: #60a5fa;
+  outline-color: #60a5fa;
+}
+
+/* ---- Table rows ---- */
+html.dark thead,
+html.dark .bg-gray-50 thead { background-color: #1f2937; }
+html.dark thead th { color: #9ca3af; }
+html.dark tbody tr:hover { background-color: #374151; }
+
+/* ---- Code / pre ---- */
+html.dark pre,
+html.dark code { background-color: #111827; color: #d1d5db; }
+
+/* ---- Dark-mode toggle button icon colour ---- */
+html.dark #darkModeToggle { color: #fbbf24; }
+html.dark #darkModeToggle:hover { background-color: #374151; }
+
+/* ---- Dark-mode skip-link ---- */
+html.dark .skip-link { background-color: #2563eb; }
+html.dark .skip-link:focus { outline-color: #60a5fa; }
+
+/* ---- Dark-mode focus-visible indicators ---- */
+html.dark a:focus-visible,
+html.dark button:focus-visible,
+html.dark input:focus-visible,
+html.dark select:focus-visible,
+html.dark textarea:focus-visible,
+html.dark [tabindex]:focus-visible {
+  outline-color: #60a5fa;
+}
+
+/* ---- Scrollbar (WebKit browsers) ---- */
+html.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
+html.dark ::-webkit-scrollbar-track { background: #1f2937; }
+html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
+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
+   Implemented with custom CSS pseudo-elements so the appearance
+   is consistent across all browsers regardless of Tailwind version.
+   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/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "docuelevate-frontend",
+  "version": "1.0.0",
+  "description": "Frontend asset compilation for DocuElevate",
+  "scripts": {
+    "build": "tailwindcss -i input.css -o static/styles.css --minify",
+    "watch": "tailwindcss -i input.css -o static/styles.css --watch"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.0"
+  }
+}

frontend/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './templates/**/*.html',
+    './static/js/**/*.js',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/templates/base.html

@@ -21,13 +21,6 @@
     <!-- Alpine.js moved to head for earlier loading -->
     <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
     {% block head_css %}
-    <!-- Tailwind CSS v3 Play CDN -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-      tailwind.config = {
-        darkMode: 'class',
-      }
-    </script>
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="

frontend/templates/billing_success.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ _("billing.success_page_title") }}</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />

frontend/templates/forgot_password.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DocuElevate - Forgot Password</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />

frontend/templates/forgot_username.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DocuElevate - Forgot Username</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />

frontend/templates/login.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ _("app.name") }} - {{ _("auth.login_title") }}</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />

frontend/templates/password_reset_form.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DocuElevate - Reset Password</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />

frontend/templates/shared_link_view.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <title>Shared Document – DocuElevate</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- Tailwind CSS v3 Play CDN -->
-    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Tailwind CSS v3 (compiled) -->
+    <link rel="stylesheet" href="/static/styles.css" />
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="

frontend/templates/signup.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DocuElevate - Create Account</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />

frontend/templates/verify_email_sent.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ _("auth.verify_email_page_title") }}</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />