From 1df17e68bbd48597c70b9f46782ef7188c58c1d0 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 14 Apr 2026 20:29:43 -0400
Subject: [PATCH] fix(badges): lighten placeholder text in create form

Tailwind v4 renders placeholder text too dark on light backgrounds,
making it indistinguishable from real input values. Same scoped CSS
fix already applied to ae_comp__badge_print_controls.svelte.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../badges/ae_comp__badge_create_form.svelte      | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
index 6929242f..513b4e7c 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
@@ -308,3 +308,18 @@ let step_label = $derived(
         </button>
     </div>
 </form>
+
+<style>
+/* Placeholder text must read as a hint, not as filled content.
+   Tailwind v4 sets placeholder color too dark on light backgrounds.
+   Same fix as ae_comp__badge_print_controls.svelte. */
+form input::placeholder,
+form textarea::placeholder {
+    color: #9ca3af; /* gray-400 */
+    opacity: 1;     /* Firefox: override default 0.54 opacity */
+}
+:global(.dark) form input::placeholder,
+:global(.dark) form textarea::placeholder {
+    color: #6b7280; /* gray-500 in dark mode */
+}
+</style>