From deef851e527ef740a7a73a5f24945fc896af308a Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Mon, 20 Apr 2026 18:57:44 +0200
Subject: [PATCH] Fix dark mode contrast: table text, loan badges, modals,
 disabled inputs

Override Bootstrap's --bs-table-color to use theme text color so table
numbers (days, amounts, totals) are readable on dark backgrounds. Fix
Loan badge by removing text-dark class and using CSS to force black text
on bg-warning. Add dark mode overrides for disabled form controls, select
option dropdowns, btn-close filter, btn-secondary colors, and Bootstrap
text utility classes (.text-dark, .text-primary, .text-muted, etc.).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 core/templates/core/payroll_dashboard.html |  2 +-
 static/css/custom.css                      | 93 ++++++++++++++++++++++
 2 files changed, 94 insertions(+), 1 deletion(-)

diff --git a/core/templates/core/payroll_dashboard.html b/core/templates/core/payroll_dashboard.html
index d08e1f4..618cb92 100644
--- a/core/templates/core/payroll_dashboard.html
+++ b/core/templates/core/payroll_dashboard.html
@@ -282,7 +282,7 @@
                                 <span class="badge bg-danger ms-1" title="Has unpaid work from a completed pay period (since {{ wd.earliest_unpaid|date:'d M Y' }})">Overdue</span>
                                 {% endif %}
                                 {% if wd.has_loan %}
-                                <span class="badge bg-warning text-dark ms-1" title="Has active loan or advance">Loan</span>
+                                <span class="badge bg-warning ms-1" title="Has active loan or advance">Loan</span>
                                 {% endif %}
                             </td>
                             <td class="align-middle">{{ wd.unpaid_count }}</td>
diff --git a/static/css/custom.css b/static/css/custom.css
index f905565..d03e7a2 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -652,6 +652,7 @@ a:hover {
 .table {
     color: var(--text-primary);
     --bs-table-bg: transparent;
+    --bs-table-color: var(--text-primary);
 }
 
 .table > thead {
@@ -1087,6 +1088,98 @@ a:hover {
     .cal-entry { display: none; }
 }
 
+/* ===================================================================
+   DARK MODE — Bootstrap utility overrides
+   Bootstrap's utility classes (.text-dark, .bg-warning, .table-light,
+   .form-control:disabled, etc.) use hardcoded colours that look wrong
+   on dark backgrounds. These overrides fix contrast issues.
+   =================================================================== */
+
+/* .text-dark — Bootstrap uses #212529, unreadable on dark bg */
+:root .text-dark,
+:root .text-dark.ms-1 {
+    color: var(--text-primary) !important;
+}
+
+/* Loan badge: yellow bg + white text for contrast (not text-dark) */
+.badge.bg-warning {
+    color: #000 !important;
+}
+
+/* table-light (used in thead) — fix for dark mode */
+:root .table-light {
+    --bs-table-bg: var(--bg-inset);
+    --bs-table-color: var(--text-secondary);
+    --bs-table-border-color: var(--border-default);
+}
+
+[data-theme="light"] .table-light {
+    --bs-table-bg: #f0f0f5;
+    --bs-table-color: #4a4a5a;
+}
+
+/* Disabled form controls — visible text in dark mode */
+.form-control:disabled,
+.form-select:disabled {
+    background-color: var(--bg-inset);
+    color: var(--text-secondary);
+    opacity: 0.7;
+    border-color: var(--border-default);
+}
+
+/* form-select option dropdown — ensure readable in dark mode */
+.form-select option {
+    background-color: var(--bg-card);
+    color: var(--text-primary);
+}
+
+/* btn-close — visible X button on dark backgrounds */
+:root .btn-close {
+    filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+[data-theme="light"] .btn-close {
+    filter: none;
+}
+
+/* Bootstrap text utilities that clash with dark mode */
+:root .text-primary {
+    color: var(--color-info) !important;
+}
+
+:root .text-success {
+    color: var(--color-success) !important;
+}
+
+:root .text-danger {
+    color: var(--color-danger) !important;
+}
+
+:root .text-warning {
+    color: var(--color-warning) !important;
+}
+
+:root .text-info {
+    color: var(--color-info) !important;
+}
+
+:root .text-muted {
+    color: var(--text-secondary) !important;
+}
+
+/* btn-secondary in modals — visible in dark mode */
+.btn-secondary {
+    background-color: var(--bg-elevated);
+    border-color: var(--border-strong);
+    color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+    background-color: var(--border-default);
+    border-color: var(--border-strong);
+    color: var(--text-primary);
+}
+
 /* ===================================================================
    PRINT STYLES
    =================================================================== */