diff --git a/Modules/Documentation/Resources/assets/css/app.css b/Modules/Documentation/Resources/assets/css/app.css
index 12da79c..5bdc5d1 100644
--- a/Modules/Documentation/Resources/assets/css/app.css
+++ b/Modules/Documentation/Resources/assets/css/app.css
@@ -684,26 +684,65 @@ html.dark .doc-content code {
 .doc-pagination nav span[aria-disabled="true"] > span { color: #697180 !important; cursor: not-allowed; }
 .doc-pagination nav svg { width: 1rem; height: 1rem; }
 
-/* Appearance integration: every Documentation surface follows the root switch. */
-html:not(.dark) body.documentation-module { background:#f4f6f8; }
-html:not(.dark) .doc-hero {
-    color:#111827;
-    background:linear-gradient(135deg,#ffffff 0%,#f8fafc 48%,#eef4ff 100%);
+/* Appearance switch integration. The Documentation module is hosted inside the
+   backend layout, so scope appearance to its module root rather than <body>. */
+[dusk="documentation-module"] {
+    --doc-ink: #18181b;
+    --doc-muted: #71717a;
+    --doc-line: #e4e4e7;
+    --doc-panel: #ffffff;
+    --doc-soft: #f4f4f5;
+    color: var(--doc-ink);
 }
-html:not(.dark) .doc-hero h1 { color:#111827; }
-html:not(.dark) .doc-eyebrow { color:#41658f; }
-html:not(.dark) .doc-hero p { color:#667085; }
-html:not(.dark) .doc-hero-wrap,
-html:not(.dark) .doc-card { background:#ffffff; border-color:#d8dee7; }
-html:not(.dark) .doc-card-header { border-color:#e2e8f0; }
 
-html.dark body.documentation-module { background:#0b0e13; }
-html.dark .doc-hero-wrap,
-html.dark .doc-card { background:var(--doc-panel); border-color:var(--doc-line); }
-html.dark .doc-hero {
-    color:#ffffff;
-    background:linear-gradient(135deg,#020617 0%,#0f172a 48%,#172554 100%);
+.dark [dusk="documentation-module"] {
+    --doc-ink: #f4f4f5;
+    --doc-muted: #a1a1aa;
+    --doc-line: #3f3f46;
+    --doc-panel: #18181b;
+    --doc-soft: #09090b;
+}
+
+:root:not(.dark) [dusk="documentation-module"] .doc-hero {
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%);
+    color: #18181b;
+    border-color: #e4e4e7;
+}
+:root:not(.dark) [dusk="documentation-module"] .doc-hero h1 { color: #18181b; }
+:root:not(.dark) [dusk="documentation-module"] .doc-eyebrow { color: #475569; }
+:root:not(.dark) [dusk="documentation-module"] .doc-hero p { color: #52525b; }
+
+.dark [dusk="documentation-module"] .doc-hero {
+    background: linear-gradient(135deg, #020617 0%, #0f172a 48%, #172554 100%);
+    color: #ffffff;
+}
+
+[dusk="documentation-module"] .doc-card,
+[dusk="documentation-module"] .doc-card-body,
+[dusk="documentation-module"] .doc-card-header,
+[dusk="documentation-module"] table,
+[dusk="documentation-module"] thead,
+[dusk="documentation-module"] tbody,
+[dusk="documentation-module"] tr,
+[dusk="documentation-module"] td,
+[dusk="documentation-module"] th {
+    color: var(--doc-ink);
+    border-color: var(--doc-line);
+}
+[dusk="documentation-module"] .doc-card { background: var(--doc-panel); }
+[dusk="documentation-module"] .doc-muted { color: var(--doc-muted); }
+
+.dark [dusk="documentation-module"] input,
+.dark [dusk="documentation-module"] textarea,
+.dark [dusk="documentation-module"] select {
+    background: #09090b;
+    color: #f4f4f5;
+    border-color: #3f3f46;
+}
+:root:not(.dark) [dusk="documentation-module"] input,
+:root:not(.dark) [dusk="documentation-module"] textarea,
+:root:not(.dark) [dusk="documentation-module"] select {
+    background: #ffffff;
+    color: #18181b;
+    border-color: #d4d4d8;
 }
-html.dark .doc-hero h1 { color:#ffffff; }
-html.dark .doc-eyebrow { color:#bfdbfe; }
-html.dark .doc-hero p { color:rgba(219,234,254,.9); }
diff --git a/Modules/Helpdesk/Resources/assets/css/app.css b/Modules/Helpdesk/Resources/assets/css/app.css
index 6f83519..c36b886 100755
--- a/Modules/Helpdesk/Resources/assets/css/app.css
+++ b/Modules/Helpdesk/Resources/assets/css/app.css
@@ -1439,3 +1439,113 @@ html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill:focus {
 html:not(.dark) .hd-helpdesk-surface {
     color: #1f2937;
 }
+
+/* ==========================================================================\n   Appearance switch integration\n   The module stylesheet is loaded after the backend theme, so light-mode\n   overrides must live here rather than only in the shared backend stylesheet.\n   ========================================================================== */
+:root:not(.dark) .hd-helpdesk-surface {
+    color: #18181b;
+}
+
+:root:not(.dark) .hd-helpdesk-surface .bg-zinc-950,
+:root:not(.dark) .hd-helpdesk-surface .bg-zinc-900,
+:root:not(.dark) .hd-helpdesk-surface .bg-neutral-950,
+:root:not(.dark) .hd-helpdesk-surface .bg-neutral-900,
+:root:not(.dark) .hd-helpdesk-surface .bg-slate-950,
+:root:not(.dark) .hd-helpdesk-surface .bg-slate-900,
+:root:not(.dark) .hd-helpdesk-surface .bg-gray-950,
+:root:not(.dark) .hd-helpdesk-surface .bg-gray-900,
+:root:not(.dark) .hd-helpdesk-surface [class*="bg-zinc-950/"],
+:root:not(.dark) .hd-helpdesk-surface [class*="bg-zinc-900/"],
+:root:not(.dark) .hd-helpdesk-surface [class*="bg-slate-950/"],
+:root:not(.dark) .hd-helpdesk-surface [class*="bg-slate-900/"] {
+    background: #ffffff !important;
+    background-color: #ffffff !important;
+}
+
+:root:not(.dark) .hd-helpdesk-surface .bg-zinc-800,
+:root:not(.dark) .hd-helpdesk-surface .bg-neutral-800,
+:root:not(.dark) .hd-helpdesk-surface .bg-slate-800,
+:root:not(.dark) .hd-helpdesk-surface .bg-gray-800 {
+    background: #f4f4f5 !important;
+    background-color: #f4f4f5 !important;
+}
+
+:root:not(.dark) .hd-helpdesk-surface .border-zinc-800,
+:root:not(.dark) .hd-helpdesk-surface .border-zinc-700,
+:root:not(.dark) .hd-helpdesk-surface .border-neutral-800,
+:root:not(.dark) .hd-helpdesk-surface .border-slate-800,
+:root:not(.dark) .hd-helpdesk-surface .border-gray-800,
+:root:not(.dark) .hd-helpdesk-surface [class*="border-zinc-700/"],
+:root:not(.dark) .hd-helpdesk-surface [class*="border-zinc-800/"] {
+    border-color: #e4e4e7 !important;
+}
+
+:root:not(.dark) .hd-helpdesk-surface .text-white:not(.hd-btn):not(button),
+:root:not(.dark) .hd-helpdesk-surface .text-zinc-100,
+:root:not(.dark) .hd-helpdesk-surface .text-zinc-200,
+:root:not(.dark) .hd-helpdesk-surface .text-slate-100,
+:root:not(.dark) .hd-helpdesk-surface .text-slate-200 {
+    color: #18181b !important;
+}
+
+:root:not(.dark) .hd-helpdesk-surface .text-zinc-300,
+:root:not(.dark) .hd-helpdesk-surface .text-zinc-400,
+:root:not(.dark) .hd-helpdesk-surface .text-zinc-500,
+:root:not(.dark) .hd-helpdesk-surface .text-slate-300,
+:root:not(.dark) .hd-helpdesk-surface .text-slate-400,
+:root:not(.dark) .hd-helpdesk-surface .text-slate-500 {
+    color: #71717a !important;
+}
+
+/* Hero/header gradients are decorative, but they must also follow appearance. */
+:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) {
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%) !important;
+    color: #18181b !important;
+    border-color: #e4e4e7 !important;
+}
+:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-white {
+    color: #18181b !important;
+}
+:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-blue-200,
+:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-blue-100 {
+    color: #475569 !important;
+}
+
+/* Native/select2 controls had unconditional dark colours. */
+:root:not(.dark) .hd-select,
+:root:not(.dark) .hd-ticket-board-select,
+:root:not(.dark) .helpdesk-ticket-form input,
+:root:not(.dark) .helpdesk-ticket-form textarea,
+:root:not(.dark) .helpdesk-ticket-form select,
+:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--single,
+:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
+:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection__rendered {
+    background: #ffffff !important;
+    background-color: #ffffff !important;
+    color: #18181b !important;
+    border-color: #d4d4d8 !important;
+    caret-color: #18181b !important;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
+}
+:root:not(.dark) .hd-select option,
+:root:not(.dark) .hd-ticket-board-select option,
+:root:not(.dark) .select2-dropdown,
+:root:not(.dark) .select2-search__field,
+:root:not(.dark) .select2-container--default .select2-results__option {
+    background: #ffffff !important;
+    color: #18181b !important;
+}
+
+/* Kanban/list/settings surfaces that use bespoke hard-coded dark rules. */
+:root:not(.dark) .helpdesk-kanban-column,
+:root:not(.dark) .hd-core-settings section,
+:root:not(.dark) .hd-core-settings table,
+:root:not(.dark) .hd-helpdesk-surface table {
+    background-color: #ffffff !important;
+    color: #18181b !important;
+}
+:root:not(.dark) .helpdesk-kanban-column > div:first-child,
+:root:not(.dark) .hd-helpdesk-surface thead,
+:root:not(.dark) .hd-core-settings thead {
+    background-color: #f4f4f5 !important;
+    color: #3f3f46 !important;
+}