From 3a501f7e05c1ccaf1cb701c2a2295691084925d7 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Fri, 17 Apr 2026 15:04:36 +0200
Subject: [PATCH] Always render text fields with white bg + black text

Input fields keep white background (#fff) and slate-900 text in all
colour modes. Light gray text on white (dark mode bleedthrough) was
unreadable. Applies to both the shadcn Input component and raw
<input>/<textarea>/<select> elements in older pages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ui/input.tsx |  2 +-
 frontend/src/styles/theme.css        | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 48569cc..e8881f1 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<
     <input
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-lg border border-border bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index e71a6b6..6efac53 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -90,3 +90,27 @@ button:not([class]):disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* ── Text field appearance ───────────────────────────────────────────────────
+   Inputs keep white background + dark text in all colour modes so that typed
+   content is always easy to read regardless of theme.
+   ────────────────────────────────────────────────────────────────────────── */
+
+input:not([class]),
+textarea:not([class]),
+select:not([class]) {
+  background-color: #ffffff;
+  color: #0f172a; /* slate-900 */
+  border: 1px solid rgb(var(--color-border));
+  border-radius: var(--radius);
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+input:not([class]):focus,
+textarea:not([class]):focus,
+select:not([class]):focus {
+  outline: 2px solid rgb(var(--color-primary));
+  outline-offset: 2px;
+}