From 49c4bb9701da52691179a49d8d9440b8eef8b23c Mon Sep 17 00:00:00 2001
From: Mae Beale <maebeale@gmail.com>
Date: Sun, 16 Aug 2026 17:04:39 -0400
Subject: [PATCH 1/4] Unify filter/search bars onto shared CSS classes and
 partials

Filter fields, labels, placeholders, and the clear/search buttons had
drifted into ~30 near-identical-but-inconsistent class strings across the
index pages. Centralize the look in .search-field / .search-label /
.search-select-placeholder / .search-submit (one CSS file) plus
shared/_search_clear and shared/_search_submit partials, so every filter
bar reads the same and restyling later is a one-place change.

Placeholders now render small + light grey and revert to normal text when
a value is entered; "All"-prompt selects grey their prompt like a
placeholder and match the height of sibling text inputs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../stylesheets/application.tailwind.css      | 32 +++++++++++++++++
 .../admin/ahoy_activities/index.html.erb      | 28 +++++++--------
 app/views/allocations/_search_boxes.html.erb  | 15 ++++----
 app/views/bookmarks/_search_boxes.html.erb    |  4 +--
 app/views/bookmarks/_search_fields.html.erb   | 20 +++++------
 app/views/categories/_search_boxes.html.erb   | 17 ++++------
 app/views/comments/_search_boxes.html.erb     | 32 ++++++++---------
 .../community_news/_search_boxes.html.erb     | 30 +++++++---------
 .../_search_boxes.html.erb                    | 11 +++---
 .../_search_boxes.html.erb                    | 34 +++++++------------
 app/views/events/_attendees_search.html.erb   |  8 ++---
 .../events/_event_search_filter.html.erb      |  4 +--
 app/views/events/_filter_bar.html.erb         |  3 +-
 app/views/events/_filter_select.html.erb      |  8 ++---
 app/views/events/_filter_text.html.erb        |  2 +-
 app/views/events/_registrant_filters.html.erb | 11 +++---
 app/views/events/onboarding/_search.html.erb  |  4 +--
 app/views/faqs/_search_boxes.html.erb         | 16 +++------
 .../monthly_reports/_search_boxes.html.erb    | 29 ++++++----------
 .../notifications/_search_boxes.html.erb      | 27 ++++++---------
 .../organizations/_search_boxes.html.erb      | 24 +++++--------
 app/views/payments/_search_boxes.html.erb     | 11 +++---
 app/views/people/_search_boxes.html.erb       | 34 ++++++-------------
 .../_search_boxes.html.erb                    | 16 +++++----
 app/views/quotes/_search_boxes.html.erb       | 14 +++-----
 app/views/resources/_search_boxes.html.erb    | 15 ++++----
 app/views/sectors/_search_boxes.html.erb      | 17 ++++------
 app/views/shared/_search_clear.html.erb       |  5 +++
 app/views/shared/_search_submit.html.erb      |  5 +++
 app/views/stories/_search_boxes.html.erb      | 30 +++++++---------
 app/views/story_ideas/_search_boxes.html.erb  | 19 ++++-------
 .../_search_boxes.html.erb                    | 10 +++---
 app/views/users/_search_boxes.html.erb        | 24 +++++--------
 .../users/sections/_account_activity.html.erb | 15 +++-----
 .../video_recordings/_search_boxes.html.erb   | 21 +++++-------
 .../workshop_ideas/_search_boxes.html.erb     | 15 +++-----
 .../workshop_logs/_search_boxes.html.erb      | 29 ++++++----------
 .../_search_boxes.html.erb                    | 14 +++-----
 .../_search_boxes.html.erb                    | 13 +++----
 app/views/workshops/_filters.html.erb         |  6 ++--
 config/initializers/simple_form_tailwind.rb   |  2 +-
 41 files changed, 290 insertions(+), 384 deletions(-)
 create mode 100644 app/views/shared/_search_clear.html.erb
 create mode 100644 app/views/shared/_search_submit.html.erb

diff --git a/app/frontend/stylesheets/application.tailwind.css b/app/frontend/stylesheets/application.tailwind.css
index 16eb622ca0..fbb8619f1a 100644
--- a/app/frontend/stylesheets/application.tailwind.css
+++ b/app/frontend/stylesheets/application.tailwind.css
@@ -108,6 +108,38 @@
   }
 }
 
+/* Unified filter/search bar controls (used by every *_search_boxes partial).
+   Change the look of all filter fields/labels here in one place. Defined in the
+   components layer so utility overrides in markup (w-64, bg-white, pr-10, …) win. */
+@layer components {
+  .search-field {
+    @apply w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm;
+    @apply focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none;
+  }
+
+  .search-field::placeholder {
+    @apply text-sm text-gray-400;
+  }
+
+  .search-label {
+    @apply block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1;
+  }
+
+  /* Native <select> whose first <option> is an "All"/blank prompt: grey it small
+     like a placeholder while that option is the current selection. Uses text-sm/6
+     (not plain text-sm) so the smaller font keeps the line-height a text input has,
+     leaving the select the same height as a sibling .search-field input. */
+  .search-select-placeholder:has(option:first-child:checked) {
+    @apply text-sm/6 text-gray-400;
+  }
+
+  /* Magnifier submit button tucked into a filter field's relative wrapper.
+     Pair with a `.search-field pr-10` input inside a `relative` parent. */
+  .search-submit {
+    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600;
+  }
+}
+
 /* Optional fields get a subtle gray background */
 .optional input,
 .optional select,
diff --git a/app/views/admin/ahoy_activities/index.html.erb b/app/views/admin/ahoy_activities/index.html.erb
index 41425e74ab..d8c472a9e4 100644
--- a/app/views/admin/ahoy_activities/index.html.erb
+++ b/app/views/admin/ahoy_activities/index.html.erb
@@ -40,33 +40,33 @@
           <div class="flex flex-wrap lg:flex-nowrap gap-4">
 
             <div class="flex-[2] min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="search-label">
                 Activity name
               </label>
               <%= text_field_tag :event_name,
                                  params[:event_name],
                                  placeholder: "e.g. view workshop, account-auth",
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                                 class: "search-field" %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="search-label">
                 Properties
               </label>
               <%= text_field_tag :props,
                                  params[:props],
                                  placeholder: "Search properties...",
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                                 class: "search-field" %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="search-label">
                 User
               </label>
               <%= text_field_tag :user_search,
                                  params[:user_search],
                                  placeholder: "Name or email",
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                                 class: "search-field" %>
             </div>
 
             <div class="flex-1 min-w-0">
@@ -74,7 +74,7 @@
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="search-label">
                 Time Period
               </label>
               <%= select_tag :time_period,
@@ -82,35 +82,35 @@
                                [["All time", "all_time"], ["Past day", "past_day"], ["Past week", "past_week"], ["Past month", "past_month"], ["Past year", "past_year"]],
                                params[:time_period] || "past_month"
                              ),
-                             class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                             class: "search-field" %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="search-label">
                 From
               </label>
               <%= date_field_tag :from,
                                  params[:from],
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm" %>
+                                 class: "search-field" %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="search-label">
                 To
               </label>
               <%= date_field_tag :to,
                                  params[:to],
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm" %>
+                                 class: "search-field" %>
             </div>
 
             <div class="flex-none w-24">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="search-label">
                 Visit ID
               </label>
               <%= number_field_tag :visit_id,
                                    params[:visit_id],
                                    placeholder: "e.g. 42",
-                                   class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                                   class: "search-field" %>
             </div>
 
           </div>
diff --git a/app/views/allocations/_search_boxes.html.erb b/app/views/allocations/_search_boxes.html.erb
index 1baae0a09f..1840ab8774 100644
--- a/app/views/allocations/_search_boxes.html.erb
+++ b/app/views/allocations/_search_boxes.html.erb
@@ -1,8 +1,9 @@
 <%# Filters — field, label, and button styling modeled on the registrants search. %>
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
-<% label_class = "block text-sm font-medium text-gray-700 mb-1" %>
+<% field_class = "search-field" %>
+<% label_class = "search-label" %>
+<% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-xl shadow-sm">
   <%= form_tag allocations_path, method: :get, class: "space-y-4",
     data: {
@@ -18,13 +19,13 @@
           <label for="source_type" class="<%= label_class %>">Source type</label>
           <%= select_tag "source_type[]",
           options_for_select({ "All" => "", "Cash" => "CashPayment", "Check" => "CheckPayment", "Stripe" => "ExternalProcessorPayment", "Discount" => "Discount" }, Array(params[:source_type]).first),
-          class: field_class %>
+          class: placeholder_select_class %>
         </div>
         <div>
           <label for="has_reverted" class="<%= label_class %>">Reverted</label>
           <%= select_tag "has_reverted",
           options_for_select({ "All" => "all", "Yes" => "yes", "No" => "no" }, params[:has_reverted] || "all"),
-          class: field_class %>
+          class: placeholder_select_class %>
         </div>
       </div>
       <div>
@@ -32,7 +33,7 @@
         <%= select_tag "payer_type",
         options_for_select(["Person", "Organization"], params[:payer_type]),
         include_blank: "All",
-        class: field_class %>
+        class: placeholder_select_class %>
       </div>
       <div>
         <label for="person_id" class="<%= label_class %>">Person</label>
@@ -64,7 +65,7 @@
           <%= select_tag "allocatable_type",
           options_for_select(["EventRegistration"], params[:allocatable_type]),
           include_blank: true,
-          class: field_class,
+          class: placeholder_select_class,
           data: { action: "search-type-select#toggle" } %>
         </div>
         <template data-search-type-select-target="template" data-type="EventRegistration">
@@ -91,7 +92,7 @@
     </div>
     <div class="md:col-span-3 flex gap-2 justify-end">
       <%= submit_tag "Search", class: "btn btn-primary" %>
-      <%= link_to "Clear filters", allocations_path, class: "btn btn-utility-outline", data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: allocations_path %>
     </div>
   <% end %>
 </div>
diff --git a/app/views/bookmarks/_search_boxes.html.erb b/app/views/bookmarks/_search_boxes.html.erb
index ff2c83a772..3798f91ecc 100644
--- a/app/views/bookmarks/_search_boxes.html.erb
+++ b/app/views/bookmarks/_search_boxes.html.erb
@@ -8,8 +8,6 @@
 
   <!-- Clear filters -->
   <div class="flex sm:justify-end items-end">
-    <%= link_to "Clear filters", url,
-                class: "btn btn-utility",
-                data: { action: "collection#clearAndSubmit" } %>
+    <%= render "shared/search_clear", url: url %>
   </div>
 <% end %>
diff --git a/app/views/bookmarks/_search_fields.html.erb b/app/views/bookmarks/_search_fields.html.erb
index 26e78be46e..b17f842d56 100644
--- a/app/views/bookmarks/_search_fields.html.erb
+++ b/app/views/bookmarks/_search_fields.html.erb
@@ -2,11 +2,10 @@
 <div class="grid grid-cols-1 md:grid-cols-<%= show_created_by ? 4 : 3 %> gap-4 items-end mb-6">
   <!-- Keyword -->
   <div>
-    <%= label_tag :keyword, "Keyword", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= label_tag :keyword, "Keyword", class: "search-label" %>
     <div class="relative">
       <%= text_field_tag :keyword, params[:keyword],
-                         class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                         focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                         class: "search-field" %>
       <div class="absolute inset-y-0 right-0 flex items-center pr-3">
         <i class="fa fa-search text-gray-500"></i>
       </div>
@@ -16,41 +15,38 @@
   <!-- Created by (admins who can view bookmark index, or when user_id param is present) -->
   <% if show_created_by %>
     <div>
-      <%= label_tag :user_id, "Created by", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :user_id, "Created by", class: "search-label" %>
       <div data-controller="searchable-select" data-searchable-select-mode-value="person">
         <%= select_tag :user_id,
                        options_from_collection_for_select(@users, :id, :full_name_with_email, params[:user_id].to_i),
                        include_blank: "All users",
                        data: { searchable_select_target: "select" },
-                       class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                           focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                       class: "search-field" %>
       </div>
     </div>
   <% end %>
 
   <!-- Bookmark Type Dropdown -->
   <div>
-    <%= label_tag :bookmarkable_type, "Bookmark type", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= label_tag :bookmarkable_type, "Bookmark type", class: "search-label" %>
     <div class="relative">
       <%= select_tag :bookmarkable_type,
                      options_for_select(@bookmarkable_types,
                                         params[:bookmarkable_type]),
                      include_blank: "All types",
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                         focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                     class: "search-field search-select-placeholder" %>
     </div>
   </div>
 
   <!-- Windows Type Dropdown -->
   <div>
-    <%= label_tag :windows_type, "Windows audience", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= label_tag :windows_type, "Windows audience", class: "search-label" %>
     <div class="relative">
       <%= select_tag :windows_type,
                      options_for_select(@windows_types_array,
                                         params[:windows_type]),
                      include_blank: true,
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                         focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                     class: "search-field search-select-placeholder" %>
     </div>
   </div>
 </div>
diff --git a/app/views/categories/_search_boxes.html.erb b/app/views/categories/_search_boxes.html.erb
index 47cb66a5a8..fb2936d000 100644
--- a/app/views/categories/_search_boxes.html.erb
+++ b/app/views/categories/_search_boxes.html.erb
@@ -8,30 +8,30 @@
     <!-- Category Type -->
     <div>
       <%= f.label :category_type_id, "Category Type",
-                  class: "block text-sm font-medium text-gray-700" %>
+                  class: "search-label" %>
 
       <%= f.select :category_type_id,
                    options_from_collection_for_select(@category_types, :id, :name, params[:category_type_id]),
                    { include_blank: "All types" },
-                   class: "mt-1 block w-full rounded-md border border-gray-300 p-2",
+                   class: "search-field search-select-placeholder",
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Name Search -->
     <div>
       <%= f.label :category_name, "Name contains",
-                  class: "block text-sm font-medium text-gray-700" %>
+                  class: "search-label" %>
 
       <%= f.text_field :category_name,
                        value: params[:category_name],
                        placeholder: "e.g. Art, Music…",
-                       class: "mt-1 block w-full rounded-md border border-gray-300 p-2",
+                       class: "search-field",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- PUBLISHED -->
     <div class="min-w-[150px] p-2 rounded-md">
-      <label for="published" class="block text-xs font-semibold uppercase text-gray-600 tracking-wide mb-1">
+      <label for="published" class="search-label">
         Published
       </label>
       <%= select_tag :published,
@@ -39,16 +39,13 @@
                        [["All", ""], ["Published", "true"], ["Unpublished", "false"]],
                        params[:published]
                      ),
-                     class: "border border-gray-300 rounded-lg px-3 py-2 text-gray-700 w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Clear -->
     <div>
-      <%= link_to "Clear filters",
-                  categories_path,
-                  class: "btn btn-utility-outline whitespace-nowrap",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: categories_path %>
     </div>
 
   <% end %>
diff --git a/app/views/comments/_search_boxes.html.erb b/app/views/comments/_search_boxes.html.erb
index c525585385..81cec3eac4 100644
--- a/app/views/comments/_search_boxes.html.erb
+++ b/app/views/comments/_search_boxes.html.erb
@@ -14,43 +14,43 @@
   </div>
   <div class="flex flex-wrap items-end gap-3">
     <div class="grow min-w-[150px]">
-      <label for="query" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">Keyword</label>
+      <label for="query" class="search-label">Keyword</label>
       <div class="relative">
         <%= f.text_field :query, value: params[:query],
                          placeholder: "Body or topic…",
-                         class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 pr-10 focus:ring-blue-500 focus:border-blue-500",
+                         class: "search-field bg-white pr-10",
                          oninput: "this.form.requestSubmit()" %>
-        <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"><i class="fa fa-search"></i></button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <div class="grow min-w-[150px]">
-      <label for="author_id" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">Author</label>
+      <label for="author_id" class="search-label">Author</label>
       <%= select_tag :author_id,
                      options_for_select(User.where(id: params[:author_id]).map { |user| [ user.full_name_with_email, user.id ] }, params[:author_id]),
                      include_blank: true, prompt: "Search staff by name",
-                     class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500",
+                     class: "search-field bg-white",
                      data: { controller: "remote-select", remote_select_model_value: "user" } %>
     </div>
 
     <div class="w-36">
-      <label for="source" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">Type</label>
+      <label for="source" class="search-label">Type</label>
       <%= f.select :source, options_for_select(source_options, params[:source]), {},
-                   class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500",
+                   class: "search-field bg-white search-select-placeholder",
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <div class="w-36">
-      <label for="from" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">From</label>
+      <label for="from" class="search-label">From</label>
       <%= f.date_field :from, value: params[:from],
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        onchange: "this.form.requestSubmit()" %>
     </div>
 
     <div class="w-36">
-      <label for="to" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">To</label>
+      <label for="to" class="search-label">To</label>
       <%= f.date_field :to, value: params[:to],
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        onchange: "this.form.requestSubmit()" %>
     </div>
 
@@ -63,7 +63,7 @@
     </div>
 
     <div class="pb-1">
-      <%= link_to "Clear", clear_path, class: "btn btn-utility", data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: clear_path %>
     </div>
   </div>
 
@@ -71,22 +71,22 @@
     <div class="flex flex-wrap items-end gap-4">
       <% if show_person %>
         <div class="min-w-[200px]">
-          <label for="person_id" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">Person</label>
+          <label for="person_id" class="search-label">Person</label>
           <%= select_tag :person_id,
                          options_for_select(Person.where(id: params[:person_id]).map { |person| [ person.full_name, person.id ] }, params[:person_id]),
                          include_blank: true, prompt: "Search for a person",
-                         class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500",
+                         class: "search-field bg-white",
                          data: { controller: "remote-select", remote_select_model_value: "person" } %>
         </div>
       <% end %>
 
       <% if show_event %>
         <div class="min-w-[200px]">
-          <label for="event_id" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">Event</label>
+          <label for="event_id" class="search-label">Event</label>
           <%= select_tag :event_id,
                          options_for_select(Event.where(id: params[:event_id]).map { |event| [ event.title, event.id ] }, params[:event_id]),
                          include_blank: true, prompt: "Search for an event",
-                         class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500",
+                         class: "search-field bg-white",
                          data: { controller: "remote-select", remote_select_model_value: "event" } %>
         </div>
       <% end %>
diff --git a/app/views/community_news/_search_boxes.html.erb b/app/views/community_news/_search_boxes.html.erb
index 3d0519bf40..2ceb2c6493 100644
--- a/app/views/community_news/_search_boxes.html.erb
+++ b/app/views/community_news/_search_boxes.html.erb
@@ -8,44 +8,39 @@
   <div class="flex flex-wrap md:flex-nowrap items-end gap-6">
     <!-- TITLE -->
     <div class="min-w-[150px] pb-2">
-      <label for="title" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="title" class="search-label">
         Title contains
       </label>
 
       <%= f.text_field :title,
                        placeholder: "e.g. Art, Music…",
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                                 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- KEYWORDS -->
     <div class="flex-1 min-w-[200px] pb-2">
-      <label for="query" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="query" class="search-label">
         Keywords
       </label>
 
       <div class="relative">
         <%= f.text_field :query,
-                         class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 pr-10
-                                 focus:ring-blue-500 focus:border-blue-500" %>
+                         class: "search-field bg-white pr-10" %>
 
-        <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <!-- YEAR -->
     <div class="w-24 pb-2">
-      <label for="year" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="year" class="search-label">
         Year
       </label>
 
       <%= f.text_field :year,
                        placeholder: "e.g. 2025",
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                                 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
@@ -55,27 +50,26 @@
                  model_class: CommunityNews,
                  admin: allowed_to?(:manage?, CommunityNews),
                  authenticated: user_signed_in?,
-                 label_class: "block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1",
+                 label_class: "search-label",
                  button_text: "All" %>
     </div>
 
     <!-- ORGANIZATION -->
     <div class="min-w-[200px] pb-2">
-      <label for="organization_id" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="organization_id" class="search-label">
         Organization
       </label>
       <%= f.select :organization_id,
                    options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                    { include_blank: "All organizations" },
-                   class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                           focus:ring-blue-500 focus:border-blue-500",
+                   class: "search-field bg-white",
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- CLEAR FILTERS -->
     <div class="min-w-[120px] pb-3">
-      <label class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">&nbsp;</label>
-      <%= link_to "Clear filters", community_news_index_path, class: "btn btn-utility", data: { action: "collection#clearAndSubmit" } %>
+      <label class="search-label">&nbsp;</label>
+      <%= render "shared/search_clear", url: community_news_index_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/continuing_education_registrations/_search_boxes.html.erb b/app/views/continuing_education_registrations/_search_boxes.html.erb
index bd98af5b19..608de2c452 100644
--- a/app/views/continuing_education_registrations/_search_boxes.html.erb
+++ b/app/views/continuing_education_registrations/_search_boxes.html.erb
@@ -1,8 +1,9 @@
 <%# Filters — field/label/button styling modeled on the allocations search. %>
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
-<% label_class = "block text-sm font-medium text-gray-700 mb-1" %>
+<% field_class = "search-field" %>
+<% label_class = "search-label" %>
+<% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 <% ce_event_ids = ContinuingEducationRegistration.joins(:event_registration).distinct.pluck(Arel.sql("event_registrations.event_id")) %>
 <% ce_events = Event.where(id: ce_event_ids).order(start_date: :desc) %>
 <% scoped_license = ProfessionalLicense.find_by(id: params[:professional_license_id]) %>
@@ -24,7 +25,7 @@
         <%= select_tag "event_id",
           options_for_select(ce_events.map { |e| [ e.title, e.id ] }, params[:event_id]),
           include_blank: "All events",
-          class: field_class %>
+          class: placeholder_select_class %>
       </div>
 
       <div>
@@ -44,7 +45,7 @@
         <label for="certificate" class="<%= label_class %>">Certificate</label>
         <%= select_tag "certificate",
           options_for_select({ "All" => "", "Issued" => "issued", "Not issued" => "pending" }, params[:certificate]),
-          class: field_class %>
+          class: placeholder_select_class %>
       </div>
     </div>
 
@@ -62,7 +63,7 @@
 
     <div class="md:col-span-3 flex gap-2 justify-end">
       <%= submit_tag "Search", class: "btn btn-primary" %>
-      <%= link_to "Clear filters", continuing_education_registrations_path, class: "btn btn-secondary", data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: continuing_education_registrations_path %>
     </div>
   <% end %>
 </div>
diff --git a/app/views/event_registrations/_search_boxes.html.erb b/app/views/event_registrations/_search_boxes.html.erb
index 80f00cdb8f..e5b2986d9b 100644
--- a/app/views/event_registrations/_search_boxes.html.erb
+++ b/app/views/event_registrations/_search_boxes.html.erb
@@ -1,25 +1,23 @@
 <%= form_tag(event_registrations_path, method: :get, class: "space-y-4") do |f| %>
   <div class="flex flex-col md:flex-row md:flex-wrap md:items-end gap-4 mb-6">
     <div class="w-full md:flex-1">
-      <%= label_tag :event_id, "Event", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :event_id, "Event", class: "search-label" %>
       <%= select_tag :event_id,
                      options_from_collection_for_select(@events, :id, :time_title, params[:event_id].to_i),
                      include_blank: "All events",
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :event_type, "Event type", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :event_type, "Event type", class: "search-label" %>
       <%= select_tag :event_type,
                      options_for_select([ [ "Trainings", "trainings" ], [ "Other", "other" ] ], params[:event_type]),
                      include_blank: "All events",
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :registrant_id, "Registrant", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :registrant_id, "Registrant", class: "search-label" %>
       <%= select_tag :registrant_id,
                      options_for_select(
                        @selected_registrant ? [[@selected_registrant.full_name_with_email, @selected_registrant.id]] : [],
@@ -30,40 +28,34 @@
                        controller: "remote-select",
                        remote_select_model_value: "person"
                      },
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                     class: "search-field",
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :organization_id, "Organization", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :organization_id, "Organization", class: "search-label" %>
       <%= select_tag :organization_id,
                      options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                      include_blank: "All organizations",
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :attendance_status, "Attendance", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :attendance_status, "Attendance", class: "search-label" %>
       <%= select_tag :attendance_status,
                      options_for_select(EventRegistration::ATTENDANCE_FILTER_OPTIONS, params[:attendance_status]),
                      include_blank: "All statuses",
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :event_year, "Year", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :event_year, "Year", class: "search-label" %>
       <%= select_tag :event_year,
                      options_for_select(@event_years.map { |year| [ year.to_s, year ] }, params[:event_year].presence&.to_i),
                      include_blank: "All years",
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.submit();" %>
     </div>
     <!-- Clear filters -->
-    <div class="w-full md:w-auto flex justify-end"><%= link_to 'Clear filters', event_registrations_path,
-                  class: "btn btn-utility-outline",
-                  data: { action: "collection#clearAndSubmit" } %></div>
+    <div class="w-full md:w-auto flex justify-end"><%= render "shared/search_clear", url: event_registrations_path %></div>
   </div>
 <% end %>
diff --git a/app/views/events/_attendees_search.html.erb b/app/views/events/_attendees_search.html.erb
index 272c441d5f..0641f5db93 100644
--- a/app/views/events/_attendees_search.html.erb
+++ b/app/views/events/_attendees_search.html.erb
@@ -5,7 +5,7 @@
     collection controller; the drill-in params (chips) ride as hidden fields and are
     surfaced/cleared by the chip row. Reads the @attendee_* ivars set by
     EventsController#attendees. %>
-<% field_class = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+<% field_class = "search-field" %>
 <%# Open the drawer on load when any collapsed filter already carries a value, so an
     active filter is never hidden behind the toggle. %>
 <% collapsed_keys = %i[event_id event_year sector program_status affiliation_status payment_method scholarship funder_name ce_status account_status topic_subscription city state county comment_status comment] %>
@@ -28,12 +28,10 @@
 
 <% primary = capture do %>
   <div class="w-full md:flex-1 md:min-w-[14rem]">
-    <%= label_tag :contact_info, "Name, email, or phone", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= label_tag :contact_info, "Name, email, or phone", class: "search-label" %>
     <div class="relative">
       <%= text_field_tag :contact_info, params[:contact_info], class: "#{field_class} pr-10" %>
-      <button type="submit" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
-        <i class="fa fa-search"></i>
-      </button>
+      <%= render "shared/search_submit" %>
     </div>
   </div>
 
diff --git a/app/views/events/_event_search_filter.html.erb b/app/views/events/_event_search_filter.html.erb
index 22c1c9e7f6..e9907452fe 100644
--- a/app/views/events/_event_search_filter.html.erb
+++ b/app/views/events/_event_search_filter.html.erb
@@ -2,9 +2,9 @@
     forms. Submits the form on change (blur/Enter), matching the auto-submitting
     selects beside it. %>
 <div class="w-full sm:w-56">
-  <label class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1" for="search">Event search</label>
+  <label class="search-label" for="search">Event search</label>
   <%= text_field_tag :search, params[:search],
         placeholder: "Abbreviation or name",
-        class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500",
+        class: "search-field bg-white",
         onchange: "this.form.requestSubmit()" %>
 </div>
diff --git a/app/views/events/_filter_bar.html.erb b/app/views/events/_filter_bar.html.erb
index f0fc5f15f8..5e1313930a 100644
--- a/app/views/events/_filter_bar.html.erb
+++ b/app/views/events/_filter_bar.html.erb
@@ -62,8 +62,7 @@
             <i class="fa-solid fa-chevron-down text-xs transition-transform group-has-[#more-filters-toggle:checked]:rotate-180"></i>
           </label>
         <% end %>
-        <%= link_to "Clear filters", clear_url, class: "btn btn-utility",
-              data: { action: "collection#clearAndSubmit" } %>
+        <%= render "shared/search_clear", url: clear_url %>
       </div>
     </div>
 
diff --git a/app/views/events/_filter_select.html.erb b/app/views/events/_filter_select.html.erb
index b64634e078..eb2ef486d9 100644
--- a/app/views/events/_filter_select.html.erb
+++ b/app/views/events/_filter_select.html.erb
@@ -14,12 +14,12 @@
                      its first option is a real value rather than a neutral
                      placeholder — see collection#clearAndSubmit. %>
 <div class="<%= local_assigns.fetch(:wrapper_class, "w-full md:w-44") %>">
-  <%= label_tag param, label, class: "block text-sm font-medium text-gray-700 mb-1" %>
-  <%# Grey the text only while the include_blank placeholder (the first option) is
-      selected, so a chosen value still reads in dark text. %>
+  <%= label_tag param, label, class: "search-label" %>
+  <%# search-select-placeholder greys + shrinks the text only while the include_blank
+      placeholder (the first option) is selected, so a chosen value reads dark. %>
   <%= select_tag param,
                  options_for_select(options, selected),
                  include_blank: blank,
                  data: { clear_to: local_assigns[:clear_to] },
-                 class: "#{field_class} has-[option:first-child:checked]:text-gray-400" %>
+                 class: "#{field_class} search-select-placeholder" %>
 </div>
diff --git a/app/views/events/_filter_text.html.erb b/app/views/events/_filter_text.html.erb
index ad8170940d..74af1f71c0 100644
--- a/app/views/events/_filter_text.html.erb
+++ b/app/views/events/_filter_text.html.erb
@@ -6,6 +6,6 @@
       field_class  – Tailwind classes for the <input>
       wrapper_class – optional wrapper width (defaults to the roster's w-48) %>
 <div class="<%= local_assigns.fetch(:wrapper_class, "w-full md:w-48") %>">
-  <%= label_tag param, label, class: "block text-sm font-medium text-gray-700 mb-1" %>
+  <%= label_tag param, label, class: "search-label" %>
   <%= text_field_tag param, params[param], class: field_class, placeholder: placeholder %>
 </div>
diff --git a/app/views/events/_registrant_filters.html.erb b/app/views/events/_registrant_filters.html.erb
index a62bcfeb9e..56ab5f86a3 100644
--- a/app/views/events/_registrant_filters.html.erb
+++ b/app/views/events/_registrant_filters.html.erb
@@ -16,8 +16,8 @@
                                 survive the GET filter submit (e.g. mode: "invite")
       topic_subscription_types – topic subscription lists to offer as a filter
                                 (picker only; omitted elsewhere) %>
-<% field_class = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
-<% label_class = "block text-sm font-medium text-gray-700 mb-1" %>
+<% field_class = "search-field" %>
+<% label_class = "search-label" %>
 <% include_readiness = local_assigns.fetch(:include_readiness, false) %>
 <% status_filter_hidden = local_assigns.fetch(:status_filter_hidden, false) %>
 <% has_cost = @event.cost_cents.to_i > 0 %>
@@ -42,12 +42,9 @@
     <div class="<%= f[:search] ? "w-full md:flex-1 md:min-w-0" : "w-full md:w-48" %>">
       <%= label_tag f[:param], f[:label], class: label_class %>
       <div class="relative">
-        <%= text_field_tag f[:param], params[f[:param]], class: field_class, placeholder: f[:placeholder] %>
+        <%= text_field_tag f[:param], params[f[:param]], class: f[:search] ? "#{field_class} pr-10" : field_class, placeholder: f[:placeholder] %>
         <% if f[:search] %>
-          <button type="submit"
-                  class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
-            <i class="fa fa-search"></i>
-          </button>
+          <%= render "shared/search_submit" %>
         <% end %>
       </div>
     </div>
diff --git a/app/views/events/onboarding/_search.html.erb b/app/views/events/onboarding/_search.html.erb
index 6379b5c079..34e84d9c1f 100644
--- a/app/views/events/onboarding/_search.html.erb
+++ b/app/views/events/onboarding/_search.html.erb
@@ -7,10 +7,10 @@
   <%= hidden_field_tag :hide, params[:hide] if params[:hide].present? %>
 
   <div class="w-full md:w-1/3">
-    <%= label_tag :keyword, "Keyword", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= label_tag :keyword, "Keyword", class: "search-label" %>
     <div class="relative">
       <%= text_field_tag :keyword, params[:keyword],
-                         class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                         class: "search-field",
                          placeholder: "Name, email, phone, city, or organization" %>
       <button type="submit" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
         <i class="fa fa-search"></i>
diff --git a/app/views/faqs/_search_boxes.html.erb b/app/views/faqs/_search_boxes.html.erb
index 40c69d4f57..f3ba4ad3fc 100644
--- a/app/views/faqs/_search_boxes.html.erb
+++ b/app/views/faqs/_search_boxes.html.erb
@@ -2,18 +2,12 @@
   <div class="flex flex-col md:flex-row md:items-end md:gap-4 mb-6">
     <!-- Search -->
     <div class="w-full md:flex-1 mb-3 md:mb-0">
-      <%= label_tag :query, "Search", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :query, "Search", class: "search-label" %>
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                           class: "search-field pr-10" %>
 
-        <button type="submit"
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600"
-                onclick="this.closest('form').submit()">
-
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
@@ -28,9 +22,7 @@
 
     <!-- Clear filters -->
     <div class="w-full md:w-auto">
-      <%= link_to "Clear filters", faqs_path,
-                  class: "btn btn-utility-outline",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: faqs_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/monthly_reports/_search_boxes.html.erb b/app/views/monthly_reports/_search_boxes.html.erb
index 2ce24bebbc..905c91a108 100644
--- a/app/views/monthly_reports/_search_boxes.html.erb
+++ b/app/views/monthly_reports/_search_boxes.html.erb
@@ -6,64 +6,57 @@
   <div class="flex flex-wrap items-end gap-4 mb-4">
     <!-- Month -->
     <div class="flex flex-col w-full sm:w-auto min-w-[10rem]">
-      <%= label_tag :month_and_year, "Month", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :month_and_year, "Month", class: "search-label" %>
       <%= select_tag :month_and_year,
                      options_for_select(@month_year_options, params[:month_and_year]),
                      include_blank: "All months",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Year -->
     <div class="flex flex-col w-full sm:w-auto min-w-[9rem]">
-      <%= label_tag :year, "Year", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :year, "Year", class: "search-label" %>
       <%= select_tag :year,
                      options_for_select(@year_options, params[:year]),
                      include_blank: "All years",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Workshop -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
-      <%= label_tag :workshop_id, "Workshop", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :workshop_id, "Workshop", class: "search-label" %>
       <%= select_tag :workshop_id,
                      options_from_collection_for_select(@workshops, :id, :type_name, params[:workshop_id]),
                      include_blank: "All workshops",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Person -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5" data-controller="searchable-select" data-searchable-select-mode-value="person">
-      <%= label_tag :created_by_id, "Person", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :created_by_id, "Person", class: "search-label" %>
       <%= select_tag :created_by_id,
                      options_from_collection_for_select(@users, :id, :full_name_with_email, params[:created_by_id]),
                      include_blank: "All people",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field",
                      data: { searchable_select_target: "select", action: "change->searchable-select#submit" } %>
     </div>
 
     <!-- Organization -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5 min-w-[14rem]">
-      <%= label_tag :organization_id, "Organization", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :organization_id, "Organization", class: "search-label" %>
       <%= select_tag :organization_id,
                      options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                      include_blank: "All organizations",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Clear filters -->
     <div class="w-full md:w-auto">
-      <%= link_to "Clear filters", monthly_reports_path,
-                  class: "btn btn-utility-outline w-full md:w-auto",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: monthly_reports_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/notifications/_search_boxes.html.erb b/app/views/notifications/_search_boxes.html.erb
index a6d63db8e4..fe7e21717a 100644
--- a/app/views/notifications/_search_boxes.html.erb
+++ b/app/views/notifications/_search_boxes.html.erb
@@ -8,18 +8,17 @@
                 class: "flex items-end gap-3" do |f| %>
     <div class="flex-[2]">
       <%= f.label :email, "Email contains",
-                  class: "block text-sm font-medium text-gray-500 mb-1" %>
+                  class: "search-label" %>
 
       <%= f.text_field :email,
                        value: params[:email],
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                                 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <div>
       <%= f.label :record_type, "Record type",
-                  class: "block text-sm font-medium text-gray-500 mb-1" %>
+                  class: "search-label" %>
 
       <%= f.select :record_type,
                    options_for_select(
@@ -27,49 +26,45 @@
                      params[:record_type]
                    ),
                    { include_blank: "All" },
-                   class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                             focus:ring-blue-500 focus:border-blue-500" %>
+                   class: "search-field bg-white search-select-placeholder" %>
     </div>
 
     <%# Fixed, narrow width so the long topic labels don't balloon the closed
         control; the native option list still expands to the full text. %>
     <div class="w-32">
       <%= f.label :email_topic, "Email topic",
-                  class: "block text-sm font-medium text-gray-500 mb-1" %>
+                  class: "search-label" %>
 
       <%= f.select :email_topic,
                    options_for_select(Notification::EMAIL_TOPICS.map(&:first), params[:email_topic]),
                    { include_blank: "All" },
-                   class: "w-full truncate bg-white border border-gray-300 rounded-lg px-3 py-2
-                             focus:ring-blue-500 focus:border-blue-500" %>
+                   class: "search-field truncate bg-white search-select-placeholder" %>
     </div>
 
     <div class="flex-1">
       <%= f.label :subject_line, "Subject contains",
-                  class: "block text-sm font-medium text-gray-500 mb-1" %>
+                  class: "search-label" %>
 
       <%= f.text_field :subject_line,
                        value: params[:subject_line],
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                                 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <div>
       <%= f.label :responded_status, "Responded",
-                  class: "block text-sm font-medium text-gray-500 mb-1" %>
+                  class: "search-label" %>
 
       <%= f.select :responded_status,
                    options_for_select([ [ "Yes", "yes" ], [ "No", "no" ], [ "N/A", "na" ] ], params[:responded_status]),
                    { include_blank: "All" },
-                   class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                             focus:ring-blue-500 focus:border-blue-500" %>
+                   class: "search-field bg-white search-select-placeholder" %>
     </div>
 
     <!-- Clear -->
     <div>
       <span class="block text-sm mb-1">&nbsp;</span>
-      <%= link_to "Clear filters", notifications_path, class: "btn btn-utility-outline whitespace-nowrap", data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: notifications_path %>
     </div>
   <% end %>
 </div>
diff --git a/app/views/organizations/_search_boxes.html.erb b/app/views/organizations/_search_boxes.html.erb
index 0400434bd7..9b9a95148c 100644
--- a/app/views/organizations/_search_boxes.html.erb
+++ b/app/views/organizations/_search_boxes.html.erb
@@ -4,41 +4,35 @@
     autocomplete: "off",
     class: "flex flex-wrap items-end gap-3" do %>
     <div>
-      <%= label_tag :query, "Name", class: "text-sm font-medium text-gray-700 mb-1 block" %>
+      <%= label_tag :query, "Name", class: "search-label" %>
       <%= text_field_tag :query, params[:query],
-                         class: "w-64 rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                       focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                         class: "search-field w-64" %>
     </div>
     <div>
-      <%= label_tag :windows_type_name, "Windows audience", class: "text-sm font-medium text-gray-700 mb-1 block" %>
+      <%= label_tag :windows_type_name, "Windows audience", class: "search-label" %>
       <%= select_tag :windows_type_name,
                      options_for_select(WindowsType::TYPES.map { |wt| [wt, wt] },
                                         params[:windows_type_name]),
                      include_blank: "All types",
-                     class: "w-40 rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                     focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                     class: "search-field w-40 search-select-placeholder" %>
     </div>
     <div>
-      <%= label_tag :address, "Address", class: "text-sm font-medium text-gray-700 mb-1 block" %>
+      <%= label_tag :address, "Address", class: "search-label" %>
       <%= text_field_tag :address, params[:address],
-                         class: "w-64 rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                       focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                         class: "search-field w-64" %>
     </div>
 
     <% if allowed_to?(:manage?, Organization) %>
       <div class="admin-only bg-blue-100">
-        <%= label_tag :status, "Status", class: "text-sm font-medium text-gray-700 mb-1 block" %>
+        <%= label_tag :status, "Status", class: "search-label" %>
         <%= select_tag :organization_status_id,
                        options_for_select(@organization_statuses.map { |ps| [ps.name, ps.id] },
                                           params[:organization_status_id].to_s),
                        include_blank: "All statuses",
-                       class: "w-40 rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                     focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                       class: "search-field w-40 search-select-placeholder" %>
       </div>
     <% end %>
 
-    <%= link_to "Clear filters", organizations_path,
-                class: "btn btn-utility-outline w-full sm:w-auto",
-                data: { action: "collection#clearAndSubmit" } %>
+    <%= render "shared/search_clear", url: organizations_path %>
   <% end %>
 </div>
diff --git a/app/views/payments/_search_boxes.html.erb b/app/views/payments/_search_boxes.html.erb
index 6ebaf6cdb1..4bb77c3bd5 100644
--- a/app/views/payments/_search_boxes.html.erb
+++ b/app/views/payments/_search_boxes.html.erb
@@ -1,12 +1,9 @@
 <!-- Filters — field, label, and button styling modeled on the allocations search. -->
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
-<% label_class = "block text-sm font-medium text-gray-700 mb-1" %>
-<%# Grey the placeholder while the "All" option (rendered first) is the current
-    selection, so an unfiltered dropdown reads like a placeholder and a chosen value
-    reads in dark text — matching the events/allocations filter selects. %>
-<% placeholder_select_class = "#{field_class} has-[option:first-child:checked]:text-gray-400" %>
+<% field_class = "search-field" %>
+<% label_class = "search-label" %>
+<% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-lg">
   <%= form_tag payments_path, method: :get, class: "space-y-4",
@@ -50,7 +47,7 @@
 
         <%= text_field_tag "search", params[:search],
           placeholder: "Search metadata or Stripe charge ID",
-          class: "#{field_class} placeholder:text-sm" %>
+          class: field_class %>
       </div>
 
       <div class="md:col-span-2">
diff --git a/app/views/people/_search_boxes.html.erb b/app/views/people/_search_boxes.html.erb
index ed1ec89379..373ef27192 100644
--- a/app/views/people/_search_boxes.html.erb
+++ b/app/views/people/_search_boxes.html.erb
@@ -9,46 +9,34 @@
   <div class="flex flex-col md:flex-row md:flex-wrap md:items-end gap-4 mb-6">
     <!-- Contact info -->
     <div class="w-full md:flex-1">
-      <%= label_tag :contact_info, "Name, email, or phone", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :contact_info, "Name, email, or phone", class: "search-label" %>
       <div class="relative">
         <%= text_field_tag :contact_info, params[:contact_info],
-                           class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                           class: "search-field pr-10",
                            placeholder: "" %>
-        <button type="submit"
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <!-- Sector name -->
     <div class="w-full md:flex-1">
-      <%= label_tag :sector_names_all, "Sector name(s)", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :sector_names_all, "Sector name(s)", class: "search-label" %>
       <div class="relative">
         <%= text_field_tag :sector_names_all, params[:sector_names_all],
-                           class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                           class: "search-field pr-10",
                            placeholder: "" %>
-        <button type="submit"
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <!-- Organization name -->
     <div class="w-full md:flex-1">
-      <%= label_tag :organization_name, "Organization", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :organization_name, "Organization", class: "search-label" %>
       <div class="relative">
         <%= text_field_tag :organization_name, params[:organization_name],
-                           class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                           class: "search-field pr-10",
                            placeholder: "" %>
-        <button type="submit"
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
@@ -63,9 +51,7 @@
 
     <!-- Clear filters -->
     <div class="w-full md:w-auto flex justify-end">
-      <%= link_to "Clear filters", people_path,
-                  class: "btn btn-utility-outline",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: people_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/professional_licenses/_search_boxes.html.erb b/app/views/professional_licenses/_search_boxes.html.erb
index 6fbfb6fe52..61a1b774c6 100644
--- a/app/views/professional_licenses/_search_boxes.html.erb
+++ b/app/views/professional_licenses/_search_boxes.html.erb
@@ -1,8 +1,9 @@
 <%# Filters — field/label/button styling modeled on the CE registrations search. %>
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
-<% label_class = "block text-sm font-medium text-gray-700 mb-1" %>
+<% field_class = "search-field" %>
+<% label_class = "search-label" %>
+<% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 <% kinds = ProfessionalLicense.where.not(kind: [ nil, "" ]).distinct.order(:kind).limit(20).pluck(:kind) %>
 
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-xl shadow-sm">
@@ -27,19 +28,20 @@
         <%= select_tag "kind",
           options_for_select(kinds, params[:kind]),
           include_blank: "All types",
-          class: field_class %>
+          class: placeholder_select_class %>
       </div>
 
       <div class="min-w-[150px]">
         <label for="expired" class="<%= label_class %>">Active</label>
         <%= select_tag "expired",
           options_for_select({ "All" => "", "Active" => "no", "Expired" => "yes" }, params[:expired]),
-          class: field_class %>
+          class: placeholder_select_class %>
       </div>
+    </div>
 
-      <div class="ml-auto">
-        <%= link_to "Clear filters", professional_licenses_path, class: "btn btn-utility", data: { action: "collection#clearAndSubmit" } %>
-      </div>
+    <div class="flex gap-2 justify-end">
+      <%= submit_tag "Search", class: "btn btn-primary" %>
+      <%= render "shared/search_clear", url: professional_licenses_path %>
     </div>
   <% end %>
 </div>
diff --git a/app/views/quotes/_search_boxes.html.erb b/app/views/quotes/_search_boxes.html.erb
index 59c724a54c..2cde539f75 100644
--- a/app/views/quotes/_search_boxes.html.erb
+++ b/app/views/quotes/_search_boxes.html.erb
@@ -7,20 +7,19 @@
                 class: "flex flex-wrap gap-4" do |f| %>
     <div class="flex-grow min-w-[200px]">
       <%= f.label :query, "Keywords",
-                  class: "text-sm font-medium text-gray-500 mb-1" %>
+                  class: "search-label" %>
 
       <%= f.text_field :query,
                        value: params[:query],
                        placeholder: "Search quotes…",
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                                 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <% if allowed_to?(:manage?, Quote) %>
       <!-- PUBLISHED -->
       <div class="min-w-[150px] admin-only bg-blue-100 p-2 rounded-md">
-        <label for="published" class="block text-xs font-semibold uppercase text-gray-600 tracking-wide mb-1">
+        <label for="published" class="search-label">
           Published
         </label>
 
@@ -29,15 +28,12 @@
                          [["All", ""], ["Published", "true"], ["Unpublished", "false"]],
                          params[:published]
                        ),
-                       class: "border border-gray-300 rounded-lg px-3 py-2 text-gray-700 w-full",
+                       class: "search-field search-select-placeholder",
                        onchange: "this.form.requestSubmit()" %>
       </div>
     <% end %>
 
     <!-- Clear -->
-    <div><%= link_to "Clear filters",
-                  quotes_path,
-                  class: "btn btn-utility-outline whitespace-nowrap",
-                  data: { action: "collection#clearAndSubmit" } %></div>
+    <div><%= render "shared/search_clear", url: quotes_path %></div>
   <% end %>
 </div>
diff --git a/app/views/resources/_search_boxes.html.erb b/app/views/resources/_search_boxes.html.erb
index bf24111d7b..a51755cfd6 100644
--- a/app/views/resources/_search_boxes.html.erb
+++ b/app/views/resources/_search_boxes.html.erb
@@ -15,18 +15,15 @@
   <div class="flex flex-wrap md:flex-nowrap items-end gap-6">
     <!-- KEYWORDS -->
     <div class="flex-1 min-w-[200px] pb-2">
-      <label for="query" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="query" class="search-label">
         Keywords
       </label>
 
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 pr-10
-                                 focus:ring-blue-500 focus:border-blue-500" %>
+                           class: "search-field bg-white pr-10" %>
 
-        <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
@@ -36,7 +33,7 @@
                  model_class: Resource,
                  admin: allowed_to?(:manage?, Resource),
                  authenticated: user_signed_in?,
-                 label_class: "block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1",
+                 label_class: "search-label",
                  button_text: "All" %>
     </div>
 
@@ -45,8 +42,8 @@
 
     <!-- CLEAR FILTERS -->
     <div class="min-w-[120px] pb-3">
-      <label class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">&nbsp;</label>
-      <%= link_to "Clear filters", resources_path, class: "btn btn-utility", data: { action: "collection#clearAndSubmit" } %>
+      <label class="search-label">&nbsp;</label>
+      <%= render "shared/search_clear", url: resources_path %>
     </div>
   </div>
 
diff --git a/app/views/sectors/_search_boxes.html.erb b/app/views/sectors/_search_boxes.html.erb
index 00c1b16136..5836988791 100644
--- a/app/views/sectors/_search_boxes.html.erb
+++ b/app/views/sectors/_search_boxes.html.erb
@@ -8,44 +8,41 @@
     <!-- Name Search -->
     <div>
       <%= f.label :sector_name, "Name contains",
-                  class: "block text-sm font-medium text-gray-700" %>
+                  class: "search-label" %>
 
       <%= f.text_field :sector_name,
                        value: params[:sector_name],
-                       class: "mt-1 block w-full rounded-md border border-gray-300 p-2",
+                       class: "search-field",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Published -->
     <div>
       <%= f.label :published, "Published",
-                  class: "block text-sm font-medium text-gray-700" %>
+                  class: "search-label" %>
 
       <%= f.select :published,
                    options_for_select([["All", ""], ["Published", "true"], ["Unpublished", "false"]], params[:published]),
                    {},
-                   class: "mt-1 block w-full rounded-md border border-gray-300 p-2",
+                   class: "search-field search-select-placeholder",
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Taggings -->
     <div>
       <%= f.label :has_taggings, "Taggings",
-                  class: "block text-sm font-medium text-gray-700" %>
+                  class: "search-label" %>
 
       <%= f.select :has_taggings,
                    options_for_select([["All", ""], ["With taggings", "with"], ["Without taggings", "without"]], params[:has_taggings]),
                    {},
-                   class: "mt-1 block w-full rounded-md border border-gray-300 p-2",
+                   class: "search-field search-select-placeholder",
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Clear -->
     <div>
-      <%= link_to "Clear filters",
-                  sectors_path,
-                  class: "btn btn-utility-outline whitespace-nowrap",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: sectors_path %>
     </div>
 
   <% end %>
diff --git a/app/views/shared/_search_clear.html.erb b/app/views/shared/_search_clear.html.erb
new file mode 100644
index 0000000000..07c7c4edf9
--- /dev/null
+++ b/app/views/shared/_search_clear.html.erb
@@ -0,0 +1,5 @@
+<%# Standard "Clear filters" button for filter bars. Locals:
+      url    – href to reset the filters to (required)
+      action – Stimulus data-action (defaults to the collection clear; pass nil to omit) %>
+<%= link_to "Clear filters", url, class: "btn btn-utility whitespace-nowrap",
+      data: { action: local_assigns.fetch(:action, "collection#clearAndSubmit") } %>
diff --git a/app/views/shared/_search_submit.html.erb b/app/views/shared/_search_submit.html.erb
new file mode 100644
index 0000000000..6c68be2f73
--- /dev/null
+++ b/app/views/shared/_search_submit.html.erb
@@ -0,0 +1,5 @@
+<%# Standard magnifier submit button for a filter/search field. Place inside the
+    field's `relative` wrapper, paired with a `.search-field pr-10` input. %>
+<button type="submit" class="search-submit" aria-label="Search">
+  <i class="fa fa-search" aria-hidden="true"></i>
+</button>
diff --git a/app/views/stories/_search_boxes.html.erb b/app/views/stories/_search_boxes.html.erb
index bc045d1ed9..9e2420bd77 100644
--- a/app/views/stories/_search_boxes.html.erb
+++ b/app/views/stories/_search_boxes.html.erb
@@ -8,46 +8,41 @@
   <div class="flex flex-wrap md:flex-nowrap items-end gap-6">
     <!-- TITLE -->
     <div class="min-w-[150px] pb-2">
-      <label for="title" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="title" class="search-label">
         Title contains
       </label>
 
       <%= f.text_field :title,
                        value: params[:title],
                        placeholder: "e.g. Art, Music…",
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                                 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- KEYWORDS -->
     <div class="flex-1 min-w-[200px] pb-2">
-      <label for="query" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="query" class="search-label">
         Keywords
       </label>
 
       <div class="relative">
         <%= f.text_field :query,
                          value: params[:query],
-                         class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 pr-10
-                                 focus:ring-blue-500 focus:border-blue-500" %>
+                         class: "search-field bg-white pr-10" %>
 
-        <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <!-- YEAR -->
     <div class="w-24 pb-2">
-      <label for="year" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="year" class="search-label">
         Year
       </label>
 
       <%= f.text_field :year,
                        placeholder: "e.g. 2025",
-                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                                 focus:ring-blue-500 focus:border-blue-500",
+                       class: "search-field bg-white",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
@@ -57,27 +52,26 @@
                  model_class: Story,
                  admin: allowed_to?(:manage?, Story),
                  authenticated: user_signed_in?,
-                 label_class: "block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1",
+                 label_class: "search-label",
                  button_text: "All" %>
     </div>
 
     <!-- ORGANIZATION -->
     <div class="min-w-[200px] pb-2">
-      <label for="organization_id" class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">
+      <label for="organization_id" class="search-label">
         Organization
       </label>
       <%= f.select :organization_id,
                    options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                    { include_blank: "All organizations" },
-                   class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                           focus:ring-blue-500 focus:border-blue-500",
+                   class: "search-field bg-white search-select-placeholder",
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- CLEAR FILTERS -->
     <div class="min-w-[120px] pb-3">
-      <label class="block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1">&nbsp;</label>
-      <%= link_to "Clear filters", stories_path, class: "btn btn-utility", data: { action: "collection#clearAndSubmit" } %>
+      <label class="search-label">&nbsp;</label>
+      <%= render "shared/search_clear", url: stories_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/story_ideas/_search_boxes.html.erb b/app/views/story_ideas/_search_boxes.html.erb
index c8d499cdff..7d93bbd16c 100644
--- a/app/views/story_ideas/_search_boxes.html.erb
+++ b/app/views/story_ideas/_search_boxes.html.erb
@@ -2,35 +2,28 @@
   <div class="flex flex-col md:flex-row md:items-end md:gap-4 mb-6">
     <!-- Search -->
     <div class="w-full md:flex-1 mb-3 md:mb-0">
-      <%= label_tag :query, "Search", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :query, "Search", class: "search-label" %>
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                           class: "search-field pr-10" %>
 
-        <button type="submit"
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600"
-                onclick="this.closest('form').submit()">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <!-- Organization -->
     <div class="w-full md:w-auto md:min-w-[220px]">
-      <%= label_tag :organization_id, "Organization", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :organization_id, "Organization", class: "search-label" %>
       <%= select_tag :organization_id,
                      options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                      include_blank: "All organizations",
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.submit()" %>
     </div>
 
     <!-- Clear filters -->
     <div class="w-full md:w-auto">
-      <%= link_to "Clear filters", story_ideas_path,
-                  class: "btn btn-utility-outline" %>
+      <%= render "shared/search_clear", url: story_ideas_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/topic_subscriptions/_search_boxes.html.erb b/app/views/topic_subscriptions/_search_boxes.html.erb
index 4d01e7f890..4acc2eec2e 100644
--- a/app/views/topic_subscriptions/_search_boxes.html.erb
+++ b/app/views/topic_subscriptions/_search_boxes.html.erb
@@ -1,5 +1,5 @@
-<% field_class = "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500" %>
-<% label_class = "block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1" %>
+<% field_class = "search-field bg-white" %>
+<% label_class = "search-label" %>
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-xl shadow-sm">
   <%= form_with url: topic_subscriptions_path, method: :get,
         data: { controller: "collection", turbo_frame: "topic_subscriptions_results" },
@@ -24,20 +24,20 @@
         <%= f.select :topic_subscription_type_id,
               options_from_collection_for_select(TopicSubscriptionType.active.ordered, :id, :name, params[:topic_subscription_type_id]),
               { include_blank: "All topics" },
-              class: field_class, onchange: "this.form.requestSubmit()" %>
+              class: "#{field_class} search-select-placeholder", onchange: "this.form.requestSubmit()" %>
       </div>
       <div class="min-w-[150px]">
         <%= f.label :comment_status, "Comments", class: label_class %>
         <%= f.select :comment_status,
               options_for_select([ [ "All", "" ], [ "Has comments", "present" ], [ "Flagged", "flagged" ], [ "None", "none" ] ], params[:comment_status]),
-              {}, class: field_class, onchange: "this.form.requestSubmit()" %>
+              {}, class: "#{field_class} search-select-placeholder", onchange: "this.form.requestSubmit()" %>
       </div>
       <%# Active/unsubscribed lives in the segmented toggle above the results;
           carry the current selection so filtering here doesn't reset it. %>
       <%= hidden_field_tag :status, params[:status], id: nil if params[:status].present? %>
       <div>
         <label class="<%= label_class %>">&nbsp;</label>
-        <%= link_to "Clear filters", topic_subscriptions_path, class: "btn btn-utility", data: { action: "collection#clearAndSubmit" } %>
+        <%= render "shared/search_clear", url: topic_subscriptions_path %>
       </div>
     </div>
   <% end %>
diff --git a/app/views/users/_search_boxes.html.erb b/app/views/users/_search_boxes.html.erb
index 4d645291e9..11d64a5f36 100644
--- a/app/views/users/_search_boxes.html.erb
+++ b/app/views/users/_search_boxes.html.erb
@@ -5,48 +5,40 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6 items-end">
     <!-- Search -->
     <div>
-      <%= label_tag :search, "Search", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :search, "Search", class: "search-label" %>
       <div class="relative">
         <%= text_field_tag :search, params[:search],
-                           class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                           class: "search-field pr-10",
                            placeholder: "Name, email, or phone" %>
-        <button type="submit"
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <!-- Access -->
     <div>
-      <%= label_tag :access, "Access", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :access, "Access", class: "search-label" %>
       <%= select_tag :access,
                      options_for_select([["All", ""],
                                          ["Has access", "true"],
                                          ["No access", "false"]],
                                         params[:access]),
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                           focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none pe-10" %>
+                     class: "search-field search-select-placeholder" %>
     </div>
 
     <!-- Admin -->
     <div>
-      <%= label_tag :super_user, "Permission level", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :super_user, "Permission level", class: "search-label" %>
       <%= select_tag :super_user,
                      options_for_select([["All users", ""],
                                          ["Admins", true],
                                          ["Regular users", false]],
                                         params[:super_user]),
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                           focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none pe-10" %>
+                     class: "search-field search-select-placeholder" %>
     </div>
 
     <!-- Clear filters -->
     <div class="flex sm:justify-end items-end">
-      <%= link_to "Clear filters", users_path,
-                  class: "btn btn-utility-outline",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: users_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/users/sections/_account_activity.html.erb b/app/views/users/sections/_account_activity.html.erb
index aa64b7e6d3..70ea026534 100644
--- a/app/views/users/sections/_account_activity.html.erb
+++ b/app/views/users/sections/_account_activity.html.erb
@@ -18,23 +18,16 @@
       <div class="flex items-center gap-3">
         <div class="relative flex-1 max-w-sm">
           <%= text_field_tag :search, params[:search],
-                             class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-800 shadow-sm
-                                   focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+                             class: "search-field pr-10",
                              placeholder: "Search events..." %>
-          <button type="submit"
-                  class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-blue-600">
-            <i class="fa fa-search text-sm"></i>
-          </button>
+          <%= render "shared/search_submit" %>
         </div>
         <%= select_tag :by_user_id,
                        options_for_select(by_user_options, params[:by_user_id]),
                        include_blank: "By: All users",
-                       class: "rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-800 shadow-sm
-                              focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                       class: "search-field search-select-placeholder" %>
         <% if params[:search].present? || params[:by_user_id].present? %>
-          <%= link_to "Clear", user_path(user, section: "account_activity"),
-                      class: "text-sm text-gray-500 hover:text-blue-600",
-                      data: { action: "collection#clearAndSubmit" } %>
+          <%= render "shared/search_clear", url: user_path(user, section: "account_activity") %>
         <% end %>
       </div>
     <% end %>
diff --git a/app/views/video_recordings/_search_boxes.html.erb b/app/views/video_recordings/_search_boxes.html.erb
index 277a84d7b1..daadf38db1 100644
--- a/app/views/video_recordings/_search_boxes.html.erb
+++ b/app/views/video_recordings/_search_boxes.html.erb
@@ -9,25 +9,23 @@
     <div class="flex flex-wrap gap-4 items-end">
       <div class="flex-1 min-w-[200px]">
         <%= f.label :search, "Title or body contains",
-                    class: "text-sm font-medium text-gray-500 mb-1" %>
+                    class: "search-label" %>
 
         <%= f.text_field :search,
                          value: params[:search],
                          placeholder: "e.g. Profile, Workshop search…",
-                         class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                                   focus:ring-blue-500 focus:border-blue-500" %>
+                         class: "search-field bg-white" %>
       </div>
 
       <% if @video_type != "instructional" %>
         <div class="flex-0 min-w-[180px]">
-          <label for="video_type" class="text-sm font-medium text-gray-500 mb-1">
+          <label for="video_type" class="search-label">
             Video type
           </label>
 
           <select id="video_type"
                   name="video_type"
-                  class="w-full bg-white border border-gray-300 rounded-lg px-3 py-2
-                         focus:ring-blue-500 focus:border-blue-500">
+                  class="search-field bg-white search-select-placeholder">
             <option value="all" <%= "selected" if @video_type == "all" %>>All videos</option>
             <option value="instructional" <%= "selected" if @video_type == "instructional" %>>Instructional videos</option>
             <option value="other" <%= "selected" if @video_type == "other" %>>Other videos</option>
@@ -41,16 +39,15 @@
                    admin: allowed_to?(:manage?, VideoRecording),
                    authenticated: user_signed_in?,
                    button_text: "All" %></div>
-      <div><%= link_to "Clear filters",
-                  video_recordings_path(video_type: @video_type),
-                  class: "btn btn-utility-outline whitespace-nowrap",
-                  data: { action: "searchable-checkbox#clear collection#clearAndSubmit" } %></div>
+      <div><%= render "shared/search_clear",
+                  url: video_recordings_path(video_type: @video_type),
+                  action: "searchable-checkbox#clear collection#clearAndSubmit" %></div>
     </div>
 
     <div class="flex flex-col sm:flex-row gap-4">
       <%# Categories dropdown %>
       <div class="w-full">
-        <label class="text-sm font-medium text-gray-500 mb-1 block" for="categories">Categories</label>
+        <label class="search-label" for="categories">Categories</label>
 
         <%= select_tag "categories",
                        options_for_select(
@@ -65,7 +62,7 @@
 
       <%# Sectors dropdown %>
       <div class="w-full">
-        <label class="text-sm font-medium text-gray-500 mb-1 block" for="sectors">Sectors</label>
+        <label class="search-label" for="sectors">Sectors</label>
 
         <%= select_tag "sectors",
                        options_from_collection_for_select(@sectors, :id, :name, Array(params[:sectors]).map(&:to_i)),
diff --git a/app/views/workshop_ideas/_search_boxes.html.erb b/app/views/workshop_ideas/_search_boxes.html.erb
index 96504d96d3..f913bab530 100644
--- a/app/views/workshop_ideas/_search_boxes.html.erb
+++ b/app/views/workshop_ideas/_search_boxes.html.erb
@@ -9,26 +9,19 @@
       <%= text_field_tag :title,
                          params[:title],
                          placeholder: "Title",
-                         class: "w-full border border-gray-300 rounded-lg px-3 py-2 pr-10 focus:ring-blue-500 focus:border-blue-500" %>
-      <button
-        type="submit"
-        class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-      >
-        <i class="fa fa-search"></i>
-      </button>
+                         class: "search-field pr-10" %>
+      <%= render "shared/search_submit" %>
     </div>
     <div data-controller="searchable-select" data-searchable-select-mode-value="person">
       <%= select_tag :created_by_id,
                      options_from_collection_for_select(@users, :id, :full_name_with_email, params[:created_by_id].to_i),
                      include_blank: "Author",
                      data: { searchable_select_target: "select", action: "change->searchable-select#submit" },
-                     class: "w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500" %>
+                     class: "search-field" %>
     </div>
     <!-- Clear filters -->
     <div class="flex sm:justify-end items-end">
-      <%= link_to 'Clear filters', workshop_ideas_path,
-                  class: "btn btn-utility",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: workshop_ideas_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/workshop_logs/_search_boxes.html.erb b/app/views/workshop_logs/_search_boxes.html.erb
index cca1ed7d54..c86a7eab06 100644
--- a/app/views/workshop_logs/_search_boxes.html.erb
+++ b/app/views/workshop_logs/_search_boxes.html.erb
@@ -2,64 +2,57 @@
   <div class="flex flex-wrap items-end gap-4 mb-4">
     <!-- Month -->
     <div class="flex flex-col w-full sm:w-auto min-w-[10rem]">
-      <%= label_tag :month_and_year, "Month Submitted", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :month_and_year, "Month Submitted", class: "search-label" %>
       <%= select_tag :month_and_year,
                      options_for_select(@month_year_options, params[:month_and_year]),
                      include_blank: "All months",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Year -->
     <div class="flex flex-col w-full sm:w-auto min-w-[9rem]">
-      <%= label_tag :year, "Year", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :year, "Year", class: "search-label" %>
       <%= select_tag :year,
                      options_for_select(@year_options, params[:year]),
                      include_blank: "All years",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Workshop -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
-      <%= label_tag :workshop_id, "Workshop", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :workshop_id, "Workshop", class: "search-label" %>
       <%= select_tag :workshop_id,
                      options_from_collection_for_select(@workshops, :id, :type_name, params[:workshop_id]),
                      include_blank: "All workshops",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Person -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5" data-controller="searchable-select" data-searchable-select-mode-value="person">
-      <%= label_tag :created_by_id, "Person", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :created_by_id, "Person", class: "search-label" %>
       <%= select_tag :created_by_id,
                      options_from_collection_for_select(@users, :id, :full_name_with_email, params[:created_by_id]),
                      include_blank: "All people",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field",
                      data: { searchable_select_target: "select", action: "change->searchable-select#submit" } %>
     </div>
 
     <!-- Organization -->
     <div class="flex flex-col w-full sm:w-2/3 md:w-1/3 lg:flex-1">
-      <%= label_tag :organization_id, "Organization", class: "text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :organization_id, "Organization", class: "search-label" %>
       <%= select_tag :organization_id,
                      options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                      include_blank: "All organizations",
-                     class: "rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                             focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none w-full",
+                     class: "search-field search-select-placeholder",
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Clear filters -->
     <div class="w-full md:w-auto">
-      <%= link_to "Clear filters", workshop_logs_path,
-                  class: "btn btn-utility-outline w-full md:w-auto",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: workshop_logs_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/workshop_variation_ideas/_search_boxes.html.erb b/app/views/workshop_variation_ideas/_search_boxes.html.erb
index 06a3f3048d..52f2e06be2 100644
--- a/app/views/workshop_variation_ideas/_search_boxes.html.erb
+++ b/app/views/workshop_variation_ideas/_search_boxes.html.erb
@@ -2,24 +2,18 @@
   <div class="flex flex-col md:flex-row md:items-end md:gap-4 mb-6">
     <!-- Search -->
     <div class="w-full md:flex-1 mb-3 md:mb-0">
-      <%= label_tag :query, "Search", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :query, "Search", class: "search-label" %>
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                           class: "search-field pr-10" %>
 
-        <button type="submit"
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600"
-                onclick="this.closest('form').submit()">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <!-- Clear filters -->
     <div class="w-full md:w-auto">
-      <%= link_to "Clear filters", workshop_variation_ideas_path,
-                  class: "btn btn-utility-outline" %>
+      <%= render "shared/search_clear", url: workshop_variation_ideas_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/workshop_variations/_search_boxes.html.erb b/app/views/workshop_variations/_search_boxes.html.erb
index 2d067f4425..6b304b03fc 100644
--- a/app/views/workshop_variations/_search_boxes.html.erb
+++ b/app/views/workshop_variations/_search_boxes.html.erb
@@ -3,23 +3,18 @@
   <div class="flex flex-col md:flex-row md:items-end md:gap-4 mb-6">
     <!-- Search -->
     <div class="w-full md:flex-1 mb-3 md:mb-0">
-      <%= label_tag :query, "Search", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :query, "Search", class: "search-label" %>
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                                 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                           class: "search-field pr-10" %>
 
-        <button type="submit"
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
-          <i class="fa fa-search"></i>
-        </button>
+        <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <!-- Clear filters -->
     <div class="w-full md:w-auto">
-      <%= link_to "Clear filters", workshop_variations_path,
-                  class: "btn btn-utility-outline" %>
+      <%= render "shared/search_clear", url: workshop_variations_path %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/workshops/_filters.html.erb b/app/views/workshops/_filters.html.erb
index 07d1c2955f..b19a0391a4 100644
--- a/app/views/workshops/_filters.html.erb
+++ b/app/views/workshops/_filters.html.erb
@@ -12,10 +12,8 @@
       <%= text_field_tag field,
                          params[field],
                          placeholder: placeholder,
-                         class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2 pr-10 focus:ring-blue-500 focus:border-blue-500" %>
-      <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
-        <i class="fa fa-search"></i>
-      </button>
+                         class: "search-field bg-white pr-10" %>
+      <%= render "shared/search_submit" %>
     </div>
   <% end %>
 </div>
diff --git a/config/initializers/simple_form_tailwind.rb b/config/initializers/simple_form_tailwind.rb
index f8836a96c2..6fbb7627c2 100644
--- a/config/initializers/simple_form_tailwind.rb
+++ b/config/initializers/simple_form_tailwind.rb
@@ -19,7 +19,7 @@
 
     # Input
     b.use :input,
-          class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none",
+          class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none placeholder:text-sm placeholder:text-gray-400",
           error_class: "border-red-500",
           valid_class: "border-green-500"
 

From a546814aa864a1e8978f2121f8cf5781d5f03c7f Mon Sep 17 00:00:00 2001
From: Mae Beale <maebeale@gmail.com>
Date: Sun, 16 Aug 2026 17:17:07 -0400
Subject: [PATCH 2/4] Trim comments on the shared filter styling to one line
 each

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/frontend/stylesheets/application.tailwind.css | 14 +++++---------
 app/views/events/_filter_select.html.erb          |  2 --
 app/views/shared/_search_clear.html.erb           |  4 +---
 app/views/shared/_search_submit.html.erb          |  3 +--
 4 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/app/frontend/stylesheets/application.tailwind.css b/app/frontend/stylesheets/application.tailwind.css
index fbb8619f1a..1f10ae4d50 100644
--- a/app/frontend/stylesheets/application.tailwind.css
+++ b/app/frontend/stylesheets/application.tailwind.css
@@ -108,9 +108,8 @@
   }
 }
 
-/* Unified filter/search bar controls (used by every *_search_boxes partial).
-   Change the look of all filter fields/labels here in one place. Defined in the
-   components layer so utility overrides in markup (w-64, bg-white, pr-10, …) win. */
+/* Shared filter/search-bar styling — restyle every filter bar here. In the
+   components layer so markup utility overrides (w-64, bg-white, pr-10) win. */
 @layer components {
   .search-field {
     @apply w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm;
@@ -125,16 +124,13 @@
     @apply block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1;
   }
 
-  /* Native <select> whose first <option> is an "All"/blank prompt: grey it small
-     like a placeholder while that option is the current selection. Uses text-sm/6
-     (not plain text-sm) so the smaller font keeps the line-height a text input has,
-     leaving the select the same height as a sibling .search-field input. */
+  /* Grey the "All" prompt like a placeholder; text-sm/6 keeps the input's
+     line-height so the select stays the same height. */
   .search-select-placeholder:has(option:first-child:checked) {
     @apply text-sm/6 text-gray-400;
   }
 
-  /* Magnifier submit button tucked into a filter field's relative wrapper.
-     Pair with a `.search-field pr-10` input inside a `relative` parent. */
+  /* Magnifier submit; pair with a `.search-field pr-10` input in a relative wrapper. */
   .search-submit {
     @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600;
   }
diff --git a/app/views/events/_filter_select.html.erb b/app/views/events/_filter_select.html.erb
index eb2ef486d9..4d783ce4db 100644
--- a/app/views/events/_filter_select.html.erb
+++ b/app/views/events/_filter_select.html.erb
@@ -15,8 +15,6 @@
                      placeholder — see collection#clearAndSubmit. %>
 <div class="<%= local_assigns.fetch(:wrapper_class, "w-full md:w-44") %>">
   <%= label_tag param, label, class: "search-label" %>
-  <%# search-select-placeholder greys + shrinks the text only while the include_blank
-      placeholder (the first option) is selected, so a chosen value reads dark. %>
   <%= select_tag param,
                  options_for_select(options, selected),
                  include_blank: blank,
diff --git a/app/views/shared/_search_clear.html.erb b/app/views/shared/_search_clear.html.erb
index 07c7c4edf9..c85bab4bf7 100644
--- a/app/views/shared/_search_clear.html.erb
+++ b/app/views/shared/_search_clear.html.erb
@@ -1,5 +1,3 @@
-<%# Standard "Clear filters" button for filter bars. Locals:
-      url    – href to reset the filters to (required)
-      action – Stimulus data-action (defaults to the collection clear; pass nil to omit) %>
+<%# "Clear filters" button. Locals: url (required); action (data-action, defaults to the collection clear). %>
 <%= link_to "Clear filters", url, class: "btn btn-utility whitespace-nowrap",
       data: { action: local_assigns.fetch(:action, "collection#clearAndSubmit") } %>
diff --git a/app/views/shared/_search_submit.html.erb b/app/views/shared/_search_submit.html.erb
index 6c68be2f73..961012c916 100644
--- a/app/views/shared/_search_submit.html.erb
+++ b/app/views/shared/_search_submit.html.erb
@@ -1,5 +1,4 @@
-<%# Standard magnifier submit button for a filter/search field. Place inside the
-    field's `relative` wrapper, paired with a `.search-field pr-10` input. %>
+<%# Magnifier submit; place in a field's relative wrapper with a `.search-field pr-10` input. %>
 <button type="submit" class="search-submit" aria-label="Search">
   <i class="fa fa-search" aria-hidden="true"></i>
 </button>

From 2ce55beb447ef52508163ad60d5af137a099eb4e Mon Sep 17 00:00:00 2001
From: Mae Beale <maebeale@gmail.com>
Date: Mon, 17 Aug 2026 12:14:15 -0400
Subject: [PATCH 3/4] Replace filter @apply classes with SearchFormHelper +
 inline partials

Per review: @apply trades away Tailwind's benefits and the project avoids it.
The field/label classes decorate ~100 heterogeneous filter controls that can't
share one partial, so they move to SearchFormHelper#search_field_class /
#search_label_class (Tailwind v4 scans app/helpers via @source); submit/clear
stay as shared partials with inline default Tailwind. Only the :has() select
placeholder rule remains in CSS, as raw CSS rather than @apply.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../stylesheets/application.tailwind.css      | 33 ++++---------------
 app/helpers/search_form_helper.rb             | 22 +++++++++++++
 .../admin/ahoy_activities/index.html.erb      | 28 ++++++++--------
 app/views/allocations/_search_boxes.html.erb  |  4 +--
 app/views/bookmarks/_search_fields.html.erb   | 16 ++++-----
 app/views/categories/_search_boxes.html.erb   | 12 +++----
 app/views/comments/_search_boxes.html.erb     | 28 ++++++++--------
 .../community_news/_search_boxes.html.erb     | 20 +++++------
 .../_search_boxes.html.erb                    |  4 +--
 .../_search_boxes.html.erb                    | 24 +++++++-------
 app/views/events/_attendees_search.html.erb   |  4 +--
 .../events/_event_search_filter.html.erb      |  4 +--
 app/views/events/_filter_select.html.erb      |  2 +-
 app/views/events/_filter_text.html.erb        |  2 +-
 app/views/events/_registrant_filters.html.erb |  4 +--
 app/views/events/onboarding/_search.html.erb  |  4 +--
 app/views/faqs/_search_boxes.html.erb         |  4 +--
 .../monthly_reports/_search_boxes.html.erb    | 20 +++++------
 .../notifications/_search_boxes.html.erb      | 20 +++++------
 .../organizations/_search_boxes.html.erb      | 16 ++++-----
 app/views/payments/_search_boxes.html.erb     |  4 +--
 app/views/people/_search_boxes.html.erb       | 12 +++----
 .../_search_boxes.html.erb                    |  4 +--
 app/views/quotes/_search_boxes.html.erb       |  8 ++---
 app/views/resources/_search_boxes.html.erb    |  8 ++---
 app/views/sectors/_search_boxes.html.erb      | 12 +++----
 app/views/shared/_search_submit.html.erb      |  4 +--
 app/views/stories/_search_boxes.html.erb      | 20 +++++------
 app/views/story_ideas/_search_boxes.html.erb  |  8 ++---
 .../_search_boxes.html.erb                    |  4 +--
 app/views/users/_search_boxes.html.erb        | 12 +++----
 .../users/sections/_account_activity.html.erb |  4 +--
 .../video_recordings/_search_boxes.html.erb   | 12 +++----
 .../workshop_ideas/_search_boxes.html.erb     |  4 +--
 .../workshop_logs/_search_boxes.html.erb      | 20 +++++------
 .../_search_boxes.html.erb                    |  4 +--
 .../_search_boxes.html.erb                    |  4 +--
 app/views/workshops/_filters.html.erb         |  2 +-
 38 files changed, 210 insertions(+), 207 deletions(-)
 create mode 100644 app/helpers/search_form_helper.rb

diff --git a/app/frontend/stylesheets/application.tailwind.css b/app/frontend/stylesheets/application.tailwind.css
index 1f10ae4d50..f3e69302b1 100644
--- a/app/frontend/stylesheets/application.tailwind.css
+++ b/app/frontend/stylesheets/application.tailwind.css
@@ -108,32 +108,13 @@
   }
 }
 
-/* Shared filter/search-bar styling — restyle every filter bar here. In the
-   components layer so markup utility overrides (w-64, bg-white, pr-10) win. */
-@layer components {
-  .search-field {
-    @apply w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm;
-    @apply focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none;
-  }
-
-  .search-field::placeholder {
-    @apply text-sm text-gray-400;
-  }
-
-  .search-label {
-    @apply block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1;
-  }
-
-  /* Grey the "All" prompt like a placeholder; text-sm/6 keeps the input's
-     line-height so the select stays the same height. */
-  .search-select-placeholder:has(option:first-child:checked) {
-    @apply text-sm/6 text-gray-400;
-  }
-
-  /* Magnifier submit; pair with a `.search-field pr-10` input in a relative wrapper. */
-  .search-submit {
-    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600;
-  }
+/* Filter/search-bar field and label styling lives in shared partials +
+   SearchFormHelper#search_field_class (default Tailwind, no @apply). Only this
+   placeholder rule stays here — its :has() selector isn't expressible as a utility. */
+.search-select-placeholder:has(option:first-child:checked) {
+  color: rgb(156 163 175);   /* gray-400 */
+  font-size: 0.875rem;       /* text-sm */
+  line-height: 1.5rem;       /* text-sm/6: keeps the select the height of a text input */
 }
 
 /* Optional fields get a subtle gray background */
diff --git a/app/helpers/search_form_helper.rb b/app/helpers/search_form_helper.rb
new file mode 100644
index 0000000000..06ef60eb0f
--- /dev/null
+++ b/app/helpers/search_form_helper.rb
@@ -0,0 +1,22 @@
+module SearchFormHelper
+  # Shared filter/search-bar field + label styling. Helpers (not `@apply` CSS or a
+  # partial) because these classes decorate ~100 heterogeneous controls — selects,
+  # remote-selects, multi-selects, date/number/text inputs — that can't funnel through
+  # one field partial, and labels appear as static tags, label_tag, and var-driven
+  # classes alike. Tailwind v4 scans app/helpers via @source, so the literal classes
+  # still get generated. Callers add per-field tweaks via `extra:` (e.g. "pr-10",
+  # "bg-white", "search-select-placeholder", "italic").
+  SEARCH_FIELD_CLASSES = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm " \
+    "placeholder:text-sm placeholder:text-gray-400 " \
+    "focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none".freeze
+
+  SEARCH_LABEL_CLASSES = "block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1".freeze
+
+  def search_field_class(extra: nil)
+    [ SEARCH_FIELD_CLASSES, extra ].compact.join(" ")
+  end
+
+  def search_label_class(extra: nil)
+    [ SEARCH_LABEL_CLASSES, extra ].compact.join(" ")
+  end
+end
diff --git a/app/views/admin/ahoy_activities/index.html.erb b/app/views/admin/ahoy_activities/index.html.erb
index d8c472a9e4..a323240dfb 100644
--- a/app/views/admin/ahoy_activities/index.html.erb
+++ b/app/views/admin/ahoy_activities/index.html.erb
@@ -40,33 +40,33 @@
           <div class="flex flex-wrap lg:flex-nowrap gap-4">
 
             <div class="flex-[2] min-w-0">
-              <label class="search-label">
+              <label class="<%= search_label_class %>">
                 Activity name
               </label>
               <%= text_field_tag :event_name,
                                  params[:event_name],
                                  placeholder: "e.g. view workshop, account-auth",
-                                 class: "search-field" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="search-label">
+              <label class="<%= search_label_class %>">
                 Properties
               </label>
               <%= text_field_tag :props,
                                  params[:props],
                                  placeholder: "Search properties...",
-                                 class: "search-field" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="search-label">
+              <label class="<%= search_label_class %>">
                 User
               </label>
               <%= text_field_tag :user_search,
                                  params[:user_search],
                                  placeholder: "Name or email",
-                                 class: "search-field" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
@@ -74,7 +74,7 @@
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="search-label">
+              <label class="<%= search_label_class %>">
                 Time Period
               </label>
               <%= select_tag :time_period,
@@ -82,35 +82,35 @@
                                [["All time", "all_time"], ["Past day", "past_day"], ["Past week", "past_week"], ["Past month", "past_month"], ["Past year", "past_year"]],
                                params[:time_period] || "past_month"
                              ),
-                             class: "search-field" %>
+                             class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="search-label">
+              <label class="<%= search_label_class %>">
                 From
               </label>
               <%= date_field_tag :from,
                                  params[:from],
-                                 class: "search-field" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="search-label">
+              <label class="<%= search_label_class %>">
                 To
               </label>
               <%= date_field_tag :to,
                                  params[:to],
-                                 class: "search-field" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-none w-24">
-              <label class="search-label">
+              <label class="<%= search_label_class %>">
                 Visit ID
               </label>
               <%= number_field_tag :visit_id,
                                    params[:visit_id],
                                    placeholder: "e.g. 42",
-                                   class: "search-field" %>
+                                   class: search_field_class %>
             </div>
 
           </div>
diff --git a/app/views/allocations/_search_boxes.html.erb b/app/views/allocations/_search_boxes.html.erb
index 1840ab8774..a8e51edbba 100644
--- a/app/views/allocations/_search_boxes.html.erb
+++ b/app/views/allocations/_search_boxes.html.erb
@@ -1,8 +1,8 @@
 <%# Filters — field, label, and button styling modeled on the registrants search. %>
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "search-field" %>
-<% label_class = "search-label" %>
+<% field_class = search_field_class %>
+<% label_class = search_label_class %>
 <% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-xl shadow-sm">
   <%= form_tag allocations_path, method: :get, class: "space-y-4",
diff --git a/app/views/bookmarks/_search_fields.html.erb b/app/views/bookmarks/_search_fields.html.erb
index b17f842d56..7714afa773 100644
--- a/app/views/bookmarks/_search_fields.html.erb
+++ b/app/views/bookmarks/_search_fields.html.erb
@@ -2,10 +2,10 @@
 <div class="grid grid-cols-1 md:grid-cols-<%= show_created_by ? 4 : 3 %> gap-4 items-end mb-6">
   <!-- Keyword -->
   <div>
-    <%= label_tag :keyword, "Keyword", class: "search-label" %>
+    <%= label_tag :keyword, "Keyword", class: search_label_class %>
     <div class="relative">
       <%= text_field_tag :keyword, params[:keyword],
-                         class: "search-field" %>
+                         class: search_field_class %>
       <div class="absolute inset-y-0 right-0 flex items-center pr-3">
         <i class="fa fa-search text-gray-500"></i>
       </div>
@@ -15,38 +15,38 @@
   <!-- Created by (admins who can view bookmark index, or when user_id param is present) -->
   <% if show_created_by %>
     <div>
-      <%= label_tag :user_id, "Created by", class: "search-label" %>
+      <%= label_tag :user_id, "Created by", class: search_label_class %>
       <div data-controller="searchable-select" data-searchable-select-mode-value="person">
         <%= select_tag :user_id,
                        options_from_collection_for_select(@users, :id, :full_name_with_email, params[:user_id].to_i),
                        include_blank: "All users",
                        data: { searchable_select_target: "select" },
-                       class: "search-field" %>
+                       class: search_field_class %>
       </div>
     </div>
   <% end %>
 
   <!-- Bookmark Type Dropdown -->
   <div>
-    <%= label_tag :bookmarkable_type, "Bookmark type", class: "search-label" %>
+    <%= label_tag :bookmarkable_type, "Bookmark type", class: search_label_class %>
     <div class="relative">
       <%= select_tag :bookmarkable_type,
                      options_for_select(@bookmarkable_types,
                                         params[:bookmarkable_type]),
                      include_blank: "All types",
-                     class: "search-field search-select-placeholder" %>
+                     class: search_field_class(extra: "search-select-placeholder") %>
     </div>
   </div>
 
   <!-- Windows Type Dropdown -->
   <div>
-    <%= label_tag :windows_type, "Windows audience", class: "search-label" %>
+    <%= label_tag :windows_type, "Windows audience", class: search_label_class %>
     <div class="relative">
       <%= select_tag :windows_type,
                      options_for_select(@windows_types_array,
                                         params[:windows_type]),
                      include_blank: true,
-                     class: "search-field search-select-placeholder" %>
+                     class: search_field_class(extra: "search-select-placeholder") %>
     </div>
   </div>
 </div>
diff --git a/app/views/categories/_search_boxes.html.erb b/app/views/categories/_search_boxes.html.erb
index fb2936d000..e7de71ef80 100644
--- a/app/views/categories/_search_boxes.html.erb
+++ b/app/views/categories/_search_boxes.html.erb
@@ -8,30 +8,30 @@
     <!-- Category Type -->
     <div>
       <%= f.label :category_type_id, "Category Type",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.select :category_type_id,
                    options_from_collection_for_select(@category_types, :id, :name, params[:category_type_id]),
                    { include_blank: "All types" },
-                   class: "search-field search-select-placeholder",
+                   class: search_field_class(extra: "search-select-placeholder"),
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Name Search -->
     <div>
       <%= f.label :category_name, "Name contains",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.text_field :category_name,
                        value: params[:category_name],
                        placeholder: "e.g. Art, Music…",
-                       class: "search-field",
+                       class: search_field_class,
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- PUBLISHED -->
     <div class="min-w-[150px] p-2 rounded-md">
-      <label for="published" class="search-label">
+      <label for="published" class="<%= search_label_class %>">
         Published
       </label>
       <%= select_tag :published,
@@ -39,7 +39,7 @@
                        [["All", ""], ["Published", "true"], ["Unpublished", "false"]],
                        params[:published]
                      ),
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
diff --git a/app/views/comments/_search_boxes.html.erb b/app/views/comments/_search_boxes.html.erb
index 81cec3eac4..7b9032b855 100644
--- a/app/views/comments/_search_boxes.html.erb
+++ b/app/views/comments/_search_boxes.html.erb
@@ -14,43 +14,43 @@
   </div>
   <div class="flex flex-wrap items-end gap-3">
     <div class="grow min-w-[150px]">
-      <label for="query" class="search-label">Keyword</label>
+      <label for="query" class="<%= search_label_class %>">Keyword</label>
       <div class="relative">
         <%= f.text_field :query, value: params[:query],
                          placeholder: "Body or topic…",
-                         class: "search-field bg-white pr-10",
+                         class: search_field_class(extra: "bg-white pr-10"),
                          oninput: "this.form.requestSubmit()" %>
         <%= render "shared/search_submit" %>
       </div>
     </div>
 
     <div class="grow min-w-[150px]">
-      <label for="author_id" class="search-label">Author</label>
+      <label for="author_id" class="<%= search_label_class %>">Author</label>
       <%= select_tag :author_id,
                      options_for_select(User.where(id: params[:author_id]).map { |user| [ user.full_name_with_email, user.id ] }, params[:author_id]),
                      include_blank: true, prompt: "Search staff by name",
-                     class: "search-field bg-white",
+                     class: search_field_class(extra: "bg-white"),
                      data: { controller: "remote-select", remote_select_model_value: "user" } %>
     </div>
 
     <div class="w-36">
-      <label for="source" class="search-label">Type</label>
+      <label for="source" class="<%= search_label_class %>">Type</label>
       <%= f.select :source, options_for_select(source_options, params[:source]), {},
-                   class: "search-field bg-white search-select-placeholder",
+                   class: search_field_class(extra: "bg-white search-select-placeholder"),
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <div class="w-36">
-      <label for="from" class="search-label">From</label>
+      <label for="from" class="<%= search_label_class %>">From</label>
       <%= f.date_field :from, value: params[:from],
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        onchange: "this.form.requestSubmit()" %>
     </div>
 
     <div class="w-36">
-      <label for="to" class="search-label">To</label>
+      <label for="to" class="<%= search_label_class %>">To</label>
       <%= f.date_field :to, value: params[:to],
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        onchange: "this.form.requestSubmit()" %>
     </div>
 
@@ -71,22 +71,22 @@
     <div class="flex flex-wrap items-end gap-4">
       <% if show_person %>
         <div class="min-w-[200px]">
-          <label for="person_id" class="search-label">Person</label>
+          <label for="person_id" class="<%= search_label_class %>">Person</label>
           <%= select_tag :person_id,
                          options_for_select(Person.where(id: params[:person_id]).map { |person| [ person.full_name, person.id ] }, params[:person_id]),
                          include_blank: true, prompt: "Search for a person",
-                         class: "search-field bg-white",
+                         class: search_field_class(extra: "bg-white"),
                          data: { controller: "remote-select", remote_select_model_value: "person" } %>
         </div>
       <% end %>
 
       <% if show_event %>
         <div class="min-w-[200px]">
-          <label for="event_id" class="search-label">Event</label>
+          <label for="event_id" class="<%= search_label_class %>">Event</label>
           <%= select_tag :event_id,
                          options_for_select(Event.where(id: params[:event_id]).map { |event| [ event.title, event.id ] }, params[:event_id]),
                          include_blank: true, prompt: "Search for an event",
-                         class: "search-field bg-white",
+                         class: search_field_class(extra: "bg-white"),
                          data: { controller: "remote-select", remote_select_model_value: "event" } %>
         </div>
       <% end %>
diff --git a/app/views/community_news/_search_boxes.html.erb b/app/views/community_news/_search_boxes.html.erb
index 2ceb2c6493..ee956e8702 100644
--- a/app/views/community_news/_search_boxes.html.erb
+++ b/app/views/community_news/_search_boxes.html.erb
@@ -8,25 +8,25 @@
   <div class="flex flex-wrap md:flex-nowrap items-end gap-6">
     <!-- TITLE -->
     <div class="min-w-[150px] pb-2">
-      <label for="title" class="search-label">
+      <label for="title" class="<%= search_label_class %>">
         Title contains
       </label>
 
       <%= f.text_field :title,
                        placeholder: "e.g. Art, Music…",
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- KEYWORDS -->
     <div class="flex-1 min-w-[200px] pb-2">
-      <label for="query" class="search-label">
+      <label for="query" class="<%= search_label_class %>">
         Keywords
       </label>
 
       <div class="relative">
         <%= f.text_field :query,
-                         class: "search-field bg-white pr-10" %>
+                         class: search_field_class(extra: "bg-white pr-10") %>
 
         <%= render "shared/search_submit" %>
       </div>
@@ -34,13 +34,13 @@
 
     <!-- YEAR -->
     <div class="w-24 pb-2">
-      <label for="year" class="search-label">
+      <label for="year" class="<%= search_label_class %>">
         Year
       </label>
 
       <%= f.text_field :year,
                        placeholder: "e.g. 2025",
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
@@ -50,25 +50,25 @@
                  model_class: CommunityNews,
                  admin: allowed_to?(:manage?, CommunityNews),
                  authenticated: user_signed_in?,
-                 label_class: "search-label",
+                 label_class: search_label_class,
                  button_text: "All" %>
     </div>
 
     <!-- ORGANIZATION -->
     <div class="min-w-[200px] pb-2">
-      <label for="organization_id" class="search-label">
+      <label for="organization_id" class="<%= search_label_class %>">
         Organization
       </label>
       <%= f.select :organization_id,
                    options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                    { include_blank: "All organizations" },
-                   class: "search-field bg-white",
+                   class: search_field_class(extra: "bg-white"),
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- CLEAR FILTERS -->
     <div class="min-w-[120px] pb-3">
-      <label class="search-label">&nbsp;</label>
+      <label class="<%= search_label_class %>">&nbsp;</label>
       <%= render "shared/search_clear", url: community_news_index_path %>
     </div>
   </div>
diff --git a/app/views/continuing_education_registrations/_search_boxes.html.erb b/app/views/continuing_education_registrations/_search_boxes.html.erb
index 608de2c452..d32dad2664 100644
--- a/app/views/continuing_education_registrations/_search_boxes.html.erb
+++ b/app/views/continuing_education_registrations/_search_boxes.html.erb
@@ -1,8 +1,8 @@
 <%# Filters — field/label/button styling modeled on the allocations search. %>
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "search-field" %>
-<% label_class = "search-label" %>
+<% field_class = search_field_class %>
+<% label_class = search_label_class %>
 <% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 <% ce_event_ids = ContinuingEducationRegistration.joins(:event_registration).distinct.pluck(Arel.sql("event_registrations.event_id")) %>
 <% ce_events = Event.where(id: ce_event_ids).order(start_date: :desc) %>
diff --git a/app/views/event_registrations/_search_boxes.html.erb b/app/views/event_registrations/_search_boxes.html.erb
index e5b2986d9b..a300e07c19 100644
--- a/app/views/event_registrations/_search_boxes.html.erb
+++ b/app/views/event_registrations/_search_boxes.html.erb
@@ -1,23 +1,23 @@
 <%= form_tag(event_registrations_path, method: :get, class: "space-y-4") do |f| %>
   <div class="flex flex-col md:flex-row md:flex-wrap md:items-end gap-4 mb-6">
     <div class="w-full md:flex-1">
-      <%= label_tag :event_id, "Event", class: "search-label" %>
+      <%= label_tag :event_id, "Event", class: search_label_class %>
       <%= select_tag :event_id,
                      options_from_collection_for_select(@events, :id, :time_title, params[:event_id].to_i),
                      include_blank: "All events",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :event_type, "Event type", class: "search-label" %>
+      <%= label_tag :event_type, "Event type", class: search_label_class %>
       <%= select_tag :event_type,
                      options_for_select([ [ "Trainings", "trainings" ], [ "Other", "other" ] ], params[:event_type]),
                      include_blank: "All events",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :registrant_id, "Registrant", class: "search-label" %>
+      <%= label_tag :registrant_id, "Registrant", class: search_label_class %>
       <%= select_tag :registrant_id,
                      options_for_select(
                        @selected_registrant ? [[@selected_registrant.full_name_with_email, @selected_registrant.id]] : [],
@@ -28,31 +28,31 @@
                        controller: "remote-select",
                        remote_select_model_value: "person"
                      },
-                     class: "search-field",
+                     class: search_field_class,
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :organization_id, "Organization", class: "search-label" %>
+      <%= label_tag :organization_id, "Organization", class: search_label_class %>
       <%= select_tag :organization_id,
                      options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                      include_blank: "All organizations",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :attendance_status, "Attendance", class: "search-label" %>
+      <%= label_tag :attendance_status, "Attendance", class: search_label_class %>
       <%= select_tag :attendance_status,
                      options_for_select(EventRegistration::ATTENDANCE_FILTER_OPTIONS, params[:attendance_status]),
                      include_blank: "All statuses",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.submit();" %>
     </div>
     <div class="w-full md:flex-1">
-      <%= label_tag :event_year, "Year", class: "search-label" %>
+      <%= label_tag :event_year, "Year", class: search_label_class %>
       <%= select_tag :event_year,
                      options_for_select(@event_years.map { |year| [ year.to_s, year ] }, params[:event_year].presence&.to_i),
                      include_blank: "All years",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.submit();" %>
     </div>
     <!-- Clear filters -->
diff --git a/app/views/events/_attendees_search.html.erb b/app/views/events/_attendees_search.html.erb
index 0641f5db93..84e6722f75 100644
--- a/app/views/events/_attendees_search.html.erb
+++ b/app/views/events/_attendees_search.html.erb
@@ -5,7 +5,7 @@
     collection controller; the drill-in params (chips) ride as hidden fields and are
     surfaced/cleared by the chip row. Reads the @attendee_* ivars set by
     EventsController#attendees. %>
-<% field_class = "search-field" %>
+<% field_class = search_field_class %>
 <%# Open the drawer on load when any collapsed filter already carries a value, so an
     active filter is never hidden behind the toggle. %>
 <% collapsed_keys = %i[event_id event_year sector program_status affiliation_status payment_method scholarship funder_name ce_status account_status topic_subscription city state county comment_status comment] %>
@@ -28,7 +28,7 @@
 
 <% primary = capture do %>
   <div class="w-full md:flex-1 md:min-w-[14rem]">
-    <%= label_tag :contact_info, "Name, email, or phone", class: "search-label" %>
+    <%= label_tag :contact_info, "Name, email, or phone", class: search_label_class %>
     <div class="relative">
       <%= text_field_tag :contact_info, params[:contact_info], class: "#{field_class} pr-10" %>
       <%= render "shared/search_submit" %>
diff --git a/app/views/events/_event_search_filter.html.erb b/app/views/events/_event_search_filter.html.erb
index e9907452fe..0db8df7c02 100644
--- a/app/views/events/_event_search_filter.html.erb
+++ b/app/views/events/_event_search_filter.html.erb
@@ -2,9 +2,9 @@
     forms. Submits the form on change (blur/Enter), matching the auto-submitting
     selects beside it. %>
 <div class="w-full sm:w-56">
-  <label class="search-label" for="search">Event search</label>
+  <label class="<%= search_label_class %>" for="search">Event search</label>
   <%= text_field_tag :search, params[:search],
         placeholder: "Abbreviation or name",
-        class: "search-field bg-white",
+        class: search_field_class(extra: "bg-white"),
         onchange: "this.form.requestSubmit()" %>
 </div>
diff --git a/app/views/events/_filter_select.html.erb b/app/views/events/_filter_select.html.erb
index 4d783ce4db..953219f740 100644
--- a/app/views/events/_filter_select.html.erb
+++ b/app/views/events/_filter_select.html.erb
@@ -14,7 +14,7 @@
                      its first option is a real value rather than a neutral
                      placeholder — see collection#clearAndSubmit. %>
 <div class="<%= local_assigns.fetch(:wrapper_class, "w-full md:w-44") %>">
-  <%= label_tag param, label, class: "search-label" %>
+  <%= label_tag param, label, class: search_label_class %>
   <%= select_tag param,
                  options_for_select(options, selected),
                  include_blank: blank,
diff --git a/app/views/events/_filter_text.html.erb b/app/views/events/_filter_text.html.erb
index 74af1f71c0..3d25256949 100644
--- a/app/views/events/_filter_text.html.erb
+++ b/app/views/events/_filter_text.html.erb
@@ -6,6 +6,6 @@
       field_class  – Tailwind classes for the <input>
       wrapper_class – optional wrapper width (defaults to the roster's w-48) %>
 <div class="<%= local_assigns.fetch(:wrapper_class, "w-full md:w-48") %>">
-  <%= label_tag param, label, class: "search-label" %>
+  <%= label_tag param, label, class: search_label_class %>
   <%= text_field_tag param, params[param], class: field_class, placeholder: placeholder %>
 </div>
diff --git a/app/views/events/_registrant_filters.html.erb b/app/views/events/_registrant_filters.html.erb
index 56ab5f86a3..34f3608dbc 100644
--- a/app/views/events/_registrant_filters.html.erb
+++ b/app/views/events/_registrant_filters.html.erb
@@ -16,8 +16,8 @@
                                 survive the GET filter submit (e.g. mode: "invite")
       topic_subscription_types – topic subscription lists to offer as a filter
                                 (picker only; omitted elsewhere) %>
-<% field_class = "search-field" %>
-<% label_class = "search-label" %>
+<% field_class = search_field_class %>
+<% label_class = search_label_class %>
 <% include_readiness = local_assigns.fetch(:include_readiness, false) %>
 <% status_filter_hidden = local_assigns.fetch(:status_filter_hidden, false) %>
 <% has_cost = @event.cost_cents.to_i > 0 %>
diff --git a/app/views/events/onboarding/_search.html.erb b/app/views/events/onboarding/_search.html.erb
index 34e84d9c1f..b04da979f5 100644
--- a/app/views/events/onboarding/_search.html.erb
+++ b/app/views/events/onboarding/_search.html.erb
@@ -7,10 +7,10 @@
   <%= hidden_field_tag :hide, params[:hide] if params[:hide].present? %>
 
   <div class="w-full md:w-1/3">
-    <%= label_tag :keyword, "Keyword", class: "search-label" %>
+    <%= label_tag :keyword, "Keyword", class: search_label_class %>
     <div class="relative">
       <%= text_field_tag :keyword, params[:keyword],
-                         class: "search-field",
+                         class: search_field_class,
                          placeholder: "Name, email, phone, city, or organization" %>
       <button type="submit" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600">
         <i class="fa fa-search"></i>
diff --git a/app/views/faqs/_search_boxes.html.erb b/app/views/faqs/_search_boxes.html.erb
index f3ba4ad3fc..b4a5ee99cf 100644
--- a/app/views/faqs/_search_boxes.html.erb
+++ b/app/views/faqs/_search_boxes.html.erb
@@ -2,10 +2,10 @@
   <div class="flex flex-col md:flex-row md:items-end md:gap-4 mb-6">
     <!-- Search -->
     <div class="w-full md:flex-1 mb-3 md:mb-0">
-      <%= label_tag :query, "Search", class: "search-label" %>
+      <%= label_tag :query, "Search", class: search_label_class %>
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "search-field pr-10" %>
+                           class: search_field_class(extra: "pr-10") %>
 
         <%= render "shared/search_submit" %>
       </div>
diff --git a/app/views/monthly_reports/_search_boxes.html.erb b/app/views/monthly_reports/_search_boxes.html.erb
index 905c91a108..850442c030 100644
--- a/app/views/monthly_reports/_search_boxes.html.erb
+++ b/app/views/monthly_reports/_search_boxes.html.erb
@@ -6,51 +6,51 @@
   <div class="flex flex-wrap items-end gap-4 mb-4">
     <!-- Month -->
     <div class="flex flex-col w-full sm:w-auto min-w-[10rem]">
-      <%= label_tag :month_and_year, "Month", class: "search-label" %>
+      <%= label_tag :month_and_year, "Month", class: search_label_class %>
       <%= select_tag :month_and_year,
                      options_for_select(@month_year_options, params[:month_and_year]),
                      include_blank: "All months",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Year -->
     <div class="flex flex-col w-full sm:w-auto min-w-[9rem]">
-      <%= label_tag :year, "Year", class: "search-label" %>
+      <%= label_tag :year, "Year", class: search_label_class %>
       <%= select_tag :year,
                      options_for_select(@year_options, params[:year]),
                      include_blank: "All years",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Workshop -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
-      <%= label_tag :workshop_id, "Workshop", class: "search-label" %>
+      <%= label_tag :workshop_id, "Workshop", class: search_label_class %>
       <%= select_tag :workshop_id,
                      options_from_collection_for_select(@workshops, :id, :type_name, params[:workshop_id]),
                      include_blank: "All workshops",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Person -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5" data-controller="searchable-select" data-searchable-select-mode-value="person">
-      <%= label_tag :created_by_id, "Person", class: "search-label" %>
+      <%= label_tag :created_by_id, "Person", class: search_label_class %>
       <%= select_tag :created_by_id,
                      options_from_collection_for_select(@users, :id, :full_name_with_email, params[:created_by_id]),
                      include_blank: "All people",
-                     class: "search-field",
+                     class: search_field_class,
                      data: { searchable_select_target: "select", action: "change->searchable-select#submit" } %>
     </div>
 
     <!-- Organization -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5 min-w-[14rem]">
-      <%= label_tag :organization_id, "Organization", class: "search-label" %>
+      <%= label_tag :organization_id, "Organization", class: search_label_class %>
       <%= select_tag :organization_id,
                      options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                      include_blank: "All organizations",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
diff --git a/app/views/notifications/_search_boxes.html.erb b/app/views/notifications/_search_boxes.html.erb
index fe7e21717a..704dc4a945 100644
--- a/app/views/notifications/_search_boxes.html.erb
+++ b/app/views/notifications/_search_boxes.html.erb
@@ -8,17 +8,17 @@
                 class: "flex items-end gap-3" do |f| %>
     <div class="flex-[2]">
       <%= f.label :email, "Email contains",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.text_field :email,
                        value: params[:email],
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <div>
       <%= f.label :record_type, "Record type",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.select :record_type,
                    options_for_select(
@@ -26,39 +26,39 @@
                      params[:record_type]
                    ),
                    { include_blank: "All" },
-                   class: "search-field bg-white search-select-placeholder" %>
+                   class: search_field_class(extra: "bg-white search-select-placeholder") %>
     </div>
 
     <%# Fixed, narrow width so the long topic labels don't balloon the closed
         control; the native option list still expands to the full text. %>
     <div class="w-32">
       <%= f.label :email_topic, "Email topic",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.select :email_topic,
                    options_for_select(Notification::EMAIL_TOPICS.map(&:first), params[:email_topic]),
                    { include_blank: "All" },
-                   class: "search-field truncate bg-white search-select-placeholder" %>
+                   class: search_field_class(extra: "truncate bg-white search-select-placeholder") %>
     </div>
 
     <div class="flex-1">
       <%= f.label :subject_line, "Subject contains",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.text_field :subject_line,
                        value: params[:subject_line],
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <div>
       <%= f.label :responded_status, "Responded",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.select :responded_status,
                    options_for_select([ [ "Yes", "yes" ], [ "No", "no" ], [ "N/A", "na" ] ], params[:responded_status]),
                    { include_blank: "All" },
-                   class: "search-field bg-white search-select-placeholder" %>
+                   class: search_field_class(extra: "bg-white search-select-placeholder") %>
     </div>
 
     <!-- Clear -->
diff --git a/app/views/organizations/_search_boxes.html.erb b/app/views/organizations/_search_boxes.html.erb
index 9b9a95148c..e8159e42b3 100644
--- a/app/views/organizations/_search_boxes.html.erb
+++ b/app/views/organizations/_search_boxes.html.erb
@@ -4,32 +4,32 @@
     autocomplete: "off",
     class: "flex flex-wrap items-end gap-3" do %>
     <div>
-      <%= label_tag :query, "Name", class: "search-label" %>
+      <%= label_tag :query, "Name", class: search_label_class %>
       <%= text_field_tag :query, params[:query],
-                         class: "search-field w-64" %>
+                         class: search_field_class(extra: "w-64") %>
     </div>
     <div>
-      <%= label_tag :windows_type_name, "Windows audience", class: "search-label" %>
+      <%= label_tag :windows_type_name, "Windows audience", class: search_label_class %>
       <%= select_tag :windows_type_name,
                      options_for_select(WindowsType::TYPES.map { |wt| [wt, wt] },
                                         params[:windows_type_name]),
                      include_blank: "All types",
-                     class: "search-field w-40 search-select-placeholder" %>
+                     class: search_field_class(extra: "w-40 search-select-placeholder") %>
     </div>
     <div>
-      <%= label_tag :address, "Address", class: "search-label" %>
+      <%= label_tag :address, "Address", class: search_label_class %>
       <%= text_field_tag :address, params[:address],
-                         class: "search-field w-64" %>
+                         class: search_field_class(extra: "w-64") %>
     </div>
 
     <% if allowed_to?(:manage?, Organization) %>
       <div class="admin-only bg-blue-100">
-        <%= label_tag :status, "Status", class: "search-label" %>
+        <%= label_tag :status, "Status", class: search_label_class %>
         <%= select_tag :organization_status_id,
                        options_for_select(@organization_statuses.map { |ps| [ps.name, ps.id] },
                                           params[:organization_status_id].to_s),
                        include_blank: "All statuses",
-                       class: "search-field w-40 search-select-placeholder" %>
+                       class: search_field_class(extra: "w-40 search-select-placeholder") %>
       </div>
     <% end %>
 
diff --git a/app/views/payments/_search_boxes.html.erb b/app/views/payments/_search_boxes.html.erb
index 4bb77c3bd5..fc638e1a28 100644
--- a/app/views/payments/_search_boxes.html.erb
+++ b/app/views/payments/_search_boxes.html.erb
@@ -1,8 +1,8 @@
 <!-- Filters — field, label, and button styling modeled on the allocations search. -->
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "search-field" %>
-<% label_class = "search-label" %>
+<% field_class = search_field_class %>
+<% label_class = search_label_class %>
 <% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-lg">
diff --git a/app/views/people/_search_boxes.html.erb b/app/views/people/_search_boxes.html.erb
index 373ef27192..7b110a3dc1 100644
--- a/app/views/people/_search_boxes.html.erb
+++ b/app/views/people/_search_boxes.html.erb
@@ -9,10 +9,10 @@
   <div class="flex flex-col md:flex-row md:flex-wrap md:items-end gap-4 mb-6">
     <!-- Contact info -->
     <div class="w-full md:flex-1">
-      <%= label_tag :contact_info, "Name, email, or phone", class: "search-label" %>
+      <%= label_tag :contact_info, "Name, email, or phone", class: search_label_class %>
       <div class="relative">
         <%= text_field_tag :contact_info, params[:contact_info],
-                           class: "search-field pr-10",
+                           class: search_field_class(extra: "pr-10"),
                            placeholder: "" %>
         <%= render "shared/search_submit" %>
       </div>
@@ -20,10 +20,10 @@
 
     <!-- Sector name -->
     <div class="w-full md:flex-1">
-      <%= label_tag :sector_names_all, "Sector name(s)", class: "search-label" %>
+      <%= label_tag :sector_names_all, "Sector name(s)", class: search_label_class %>
       <div class="relative">
         <%= text_field_tag :sector_names_all, params[:sector_names_all],
-                           class: "search-field pr-10",
+                           class: search_field_class(extra: "pr-10"),
                            placeholder: "" %>
         <%= render "shared/search_submit" %>
       </div>
@@ -31,10 +31,10 @@
 
     <!-- Organization name -->
     <div class="w-full md:flex-1">
-      <%= label_tag :organization_name, "Organization", class: "search-label" %>
+      <%= label_tag :organization_name, "Organization", class: search_label_class %>
       <div class="relative">
         <%= text_field_tag :organization_name, params[:organization_name],
-                           class: "search-field pr-10",
+                           class: search_field_class(extra: "pr-10"),
                            placeholder: "" %>
         <%= render "shared/search_submit" %>
       </div>
diff --git a/app/views/professional_licenses/_search_boxes.html.erb b/app/views/professional_licenses/_search_boxes.html.erb
index 61a1b774c6..829b8f8911 100644
--- a/app/views/professional_licenses/_search_boxes.html.erb
+++ b/app/views/professional_licenses/_search_boxes.html.erb
@@ -1,8 +1,8 @@
 <%# Filters — field/label/button styling modeled on the CE registrations search. %>
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "search-field" %>
-<% label_class = "search-label" %>
+<% field_class = search_field_class %>
+<% label_class = search_label_class %>
 <% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 <% kinds = ProfessionalLicense.where.not(kind: [ nil, "" ]).distinct.order(:kind).limit(20).pluck(:kind) %>
 
diff --git a/app/views/quotes/_search_boxes.html.erb b/app/views/quotes/_search_boxes.html.erb
index 2cde539f75..187a57363c 100644
--- a/app/views/quotes/_search_boxes.html.erb
+++ b/app/views/quotes/_search_boxes.html.erb
@@ -7,19 +7,19 @@
                 class: "flex flex-wrap gap-4" do |f| %>
     <div class="flex-grow min-w-[200px]">
       <%= f.label :query, "Keywords",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.text_field :query,
                        value: params[:query],
                        placeholder: "Search quotes…",
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <% if allowed_to?(:manage?, Quote) %>
       <!-- PUBLISHED -->
       <div class="min-w-[150px] admin-only bg-blue-100 p-2 rounded-md">
-        <label for="published" class="search-label">
+        <label for="published" class="<%= search_label_class %>">
           Published
         </label>
 
@@ -28,7 +28,7 @@
                          [["All", ""], ["Published", "true"], ["Unpublished", "false"]],
                          params[:published]
                        ),
-                       class: "search-field search-select-placeholder",
+                       class: search_field_class(extra: "search-select-placeholder"),
                        onchange: "this.form.requestSubmit()" %>
       </div>
     <% end %>
diff --git a/app/views/resources/_search_boxes.html.erb b/app/views/resources/_search_boxes.html.erb
index a51755cfd6..9feb5c759a 100644
--- a/app/views/resources/_search_boxes.html.erb
+++ b/app/views/resources/_search_boxes.html.erb
@@ -15,13 +15,13 @@
   <div class="flex flex-wrap md:flex-nowrap items-end gap-6">
     <!-- KEYWORDS -->
     <div class="flex-1 min-w-[200px] pb-2">
-      <label for="query" class="search-label">
+      <label for="query" class="<%= search_label_class %>">
         Keywords
       </label>
 
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "search-field bg-white pr-10" %>
+                           class: search_field_class(extra: "bg-white pr-10") %>
 
         <%= render "shared/search_submit" %>
       </div>
@@ -33,7 +33,7 @@
                  model_class: Resource,
                  admin: allowed_to?(:manage?, Resource),
                  authenticated: user_signed_in?,
-                 label_class: "search-label",
+                 label_class: search_label_class,
                  button_text: "All" %>
     </div>
 
@@ -42,7 +42,7 @@
 
     <!-- CLEAR FILTERS -->
     <div class="min-w-[120px] pb-3">
-      <label class="search-label">&nbsp;</label>
+      <label class="<%= search_label_class %>">&nbsp;</label>
       <%= render "shared/search_clear", url: resources_path %>
     </div>
   </div>
diff --git a/app/views/sectors/_search_boxes.html.erb b/app/views/sectors/_search_boxes.html.erb
index 5836988791..89a7a26c2a 100644
--- a/app/views/sectors/_search_boxes.html.erb
+++ b/app/views/sectors/_search_boxes.html.erb
@@ -8,35 +8,35 @@
     <!-- Name Search -->
     <div>
       <%= f.label :sector_name, "Name contains",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.text_field :sector_name,
                        value: params[:sector_name],
-                       class: "search-field",
+                       class: search_field_class,
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Published -->
     <div>
       <%= f.label :published, "Published",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.select :published,
                    options_for_select([["All", ""], ["Published", "true"], ["Unpublished", "false"]], params[:published]),
                    {},
-                   class: "search-field search-select-placeholder",
+                   class: search_field_class(extra: "search-select-placeholder"),
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Taggings -->
     <div>
       <%= f.label :has_taggings, "Taggings",
-                  class: "search-label" %>
+                  class: search_label_class %>
 
       <%= f.select :has_taggings,
                    options_for_select([["All", ""], ["With taggings", "with"], ["Without taggings", "without"]], params[:has_taggings]),
                    {},
-                   class: "search-field search-select-placeholder",
+                   class: search_field_class(extra: "search-select-placeholder"),
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
diff --git a/app/views/shared/_search_submit.html.erb b/app/views/shared/_search_submit.html.erb
index 961012c916..0136463d74 100644
--- a/app/views/shared/_search_submit.html.erb
+++ b/app/views/shared/_search_submit.html.erb
@@ -1,4 +1,4 @@
-<%# Magnifier submit; place in a field's relative wrapper with a `.search-field pr-10` input. %>
-<button type="submit" class="search-submit" aria-label="Search">
+<%# Magnifier submit; place in a field's relative wrapper with a `search_field_class(extra: "pr-10")` input. %>
+<button type="submit" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600" aria-label="Search">
   <i class="fa fa-search" aria-hidden="true"></i>
 </button>
diff --git a/app/views/stories/_search_boxes.html.erb b/app/views/stories/_search_boxes.html.erb
index 9e2420bd77..be826fef0c 100644
--- a/app/views/stories/_search_boxes.html.erb
+++ b/app/views/stories/_search_boxes.html.erb
@@ -8,27 +8,27 @@
   <div class="flex flex-wrap md:flex-nowrap items-end gap-6">
     <!-- TITLE -->
     <div class="min-w-[150px] pb-2">
-      <label for="title" class="search-label">
+      <label for="title" class="<%= search_label_class %>">
         Title contains
       </label>
 
       <%= f.text_field :title,
                        value: params[:title],
                        placeholder: "e.g. Art, Music…",
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- KEYWORDS -->
     <div class="flex-1 min-w-[200px] pb-2">
-      <label for="query" class="search-label">
+      <label for="query" class="<%= search_label_class %>">
         Keywords
       </label>
 
       <div class="relative">
         <%= f.text_field :query,
                          value: params[:query],
-                         class: "search-field bg-white pr-10" %>
+                         class: search_field_class(extra: "bg-white pr-10") %>
 
         <%= render "shared/search_submit" %>
       </div>
@@ -36,13 +36,13 @@
 
     <!-- YEAR -->
     <div class="w-24 pb-2">
-      <label for="year" class="search-label">
+      <label for="year" class="<%= search_label_class %>">
         Year
       </label>
 
       <%= f.text_field :year,
                        placeholder: "e.g. 2025",
-                       class: "search-field bg-white",
+                       class: search_field_class(extra: "bg-white"),
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
@@ -52,25 +52,25 @@
                  model_class: Story,
                  admin: allowed_to?(:manage?, Story),
                  authenticated: user_signed_in?,
-                 label_class: "search-label",
+                 label_class: search_label_class,
                  button_text: "All" %>
     </div>
 
     <!-- ORGANIZATION -->
     <div class="min-w-[200px] pb-2">
-      <label for="organization_id" class="search-label">
+      <label for="organization_id" class="<%= search_label_class %>">
         Organization
       </label>
       <%= f.select :organization_id,
                    options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                    { include_blank: "All organizations" },
-                   class: "search-field bg-white search-select-placeholder",
+                   class: search_field_class(extra: "bg-white search-select-placeholder"),
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- CLEAR FILTERS -->
     <div class="min-w-[120px] pb-3">
-      <label class="search-label">&nbsp;</label>
+      <label class="<%= search_label_class %>">&nbsp;</label>
       <%= render "shared/search_clear", url: stories_path %>
     </div>
   </div>
diff --git a/app/views/story_ideas/_search_boxes.html.erb b/app/views/story_ideas/_search_boxes.html.erb
index 7d93bbd16c..4ae3f283c8 100644
--- a/app/views/story_ideas/_search_boxes.html.erb
+++ b/app/views/story_ideas/_search_boxes.html.erb
@@ -2,10 +2,10 @@
   <div class="flex flex-col md:flex-row md:items-end md:gap-4 mb-6">
     <!-- Search -->
     <div class="w-full md:flex-1 mb-3 md:mb-0">
-      <%= label_tag :query, "Search", class: "search-label" %>
+      <%= label_tag :query, "Search", class: search_label_class %>
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "search-field pr-10" %>
+                           class: search_field_class(extra: "pr-10") %>
 
         <%= render "shared/search_submit" %>
       </div>
@@ -13,11 +13,11 @@
 
     <!-- Organization -->
     <div class="w-full md:w-auto md:min-w-[220px]">
-      <%= label_tag :organization_id, "Organization", class: "search-label" %>
+      <%= label_tag :organization_id, "Organization", class: search_label_class %>
       <%= select_tag :organization_id,
                      options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                      include_blank: "All organizations",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.submit()" %>
     </div>
 
diff --git a/app/views/topic_subscriptions/_search_boxes.html.erb b/app/views/topic_subscriptions/_search_boxes.html.erb
index 4acc2eec2e..e3d7dc5269 100644
--- a/app/views/topic_subscriptions/_search_boxes.html.erb
+++ b/app/views/topic_subscriptions/_search_boxes.html.erb
@@ -1,5 +1,5 @@
-<% field_class = "search-field bg-white" %>
-<% label_class = "search-label" %>
+<% field_class = search_field_class(extra: "bg-white") %>
+<% label_class = search_label_class %>
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-xl shadow-sm">
   <%= form_with url: topic_subscriptions_path, method: :get,
         data: { controller: "collection", turbo_frame: "topic_subscriptions_results" },
diff --git a/app/views/users/_search_boxes.html.erb b/app/views/users/_search_boxes.html.erb
index 11d64a5f36..8b1e5aa938 100644
--- a/app/views/users/_search_boxes.html.erb
+++ b/app/views/users/_search_boxes.html.erb
@@ -5,10 +5,10 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6 items-end">
     <!-- Search -->
     <div>
-      <%= label_tag :search, "Search", class: "search-label" %>
+      <%= label_tag :search, "Search", class: search_label_class %>
       <div class="relative">
         <%= text_field_tag :search, params[:search],
-                           class: "search-field pr-10",
+                           class: search_field_class(extra: "pr-10"),
                            placeholder: "Name, email, or phone" %>
         <%= render "shared/search_submit" %>
       </div>
@@ -16,24 +16,24 @@
 
     <!-- Access -->
     <div>
-      <%= label_tag :access, "Access", class: "search-label" %>
+      <%= label_tag :access, "Access", class: search_label_class %>
       <%= select_tag :access,
                      options_for_select([["All", ""],
                                          ["Has access", "true"],
                                          ["No access", "false"]],
                                         params[:access]),
-                     class: "search-field search-select-placeholder" %>
+                     class: search_field_class(extra: "search-select-placeholder") %>
     </div>
 
     <!-- Admin -->
     <div>
-      <%= label_tag :super_user, "Permission level", class: "search-label" %>
+      <%= label_tag :super_user, "Permission level", class: search_label_class %>
       <%= select_tag :super_user,
                      options_for_select([["All users", ""],
                                          ["Admins", true],
                                          ["Regular users", false]],
                                         params[:super_user]),
-                     class: "search-field search-select-placeholder" %>
+                     class: search_field_class(extra: "search-select-placeholder") %>
     </div>
 
     <!-- Clear filters -->
diff --git a/app/views/users/sections/_account_activity.html.erb b/app/views/users/sections/_account_activity.html.erb
index 70ea026534..3e489ea753 100644
--- a/app/views/users/sections/_account_activity.html.erb
+++ b/app/views/users/sections/_account_activity.html.erb
@@ -18,14 +18,14 @@
       <div class="flex items-center gap-3">
         <div class="relative flex-1 max-w-sm">
           <%= text_field_tag :search, params[:search],
-                             class: "search-field pr-10",
+                             class: search_field_class(extra: "pr-10"),
                              placeholder: "Search events..." %>
           <%= render "shared/search_submit" %>
         </div>
         <%= select_tag :by_user_id,
                        options_for_select(by_user_options, params[:by_user_id]),
                        include_blank: "By: All users",
-                       class: "search-field search-select-placeholder" %>
+                       class: search_field_class(extra: "search-select-placeholder") %>
         <% if params[:search].present? || params[:by_user_id].present? %>
           <%= render "shared/search_clear", url: user_path(user, section: "account_activity") %>
         <% end %>
diff --git a/app/views/video_recordings/_search_boxes.html.erb b/app/views/video_recordings/_search_boxes.html.erb
index daadf38db1..d9d45ed00b 100644
--- a/app/views/video_recordings/_search_boxes.html.erb
+++ b/app/views/video_recordings/_search_boxes.html.erb
@@ -9,23 +9,23 @@
     <div class="flex flex-wrap gap-4 items-end">
       <div class="flex-1 min-w-[200px]">
         <%= f.label :search, "Title or body contains",
-                    class: "search-label" %>
+                    class: search_label_class %>
 
         <%= f.text_field :search,
                          value: params[:search],
                          placeholder: "e.g. Profile, Workshop search…",
-                         class: "search-field bg-white" %>
+                         class: search_field_class(extra: "bg-white") %>
       </div>
 
       <% if @video_type != "instructional" %>
         <div class="flex-0 min-w-[180px]">
-          <label for="video_type" class="search-label">
+          <label for="video_type" class="<%= search_label_class %>">
             Video type
           </label>
 
           <select id="video_type"
                   name="video_type"
-                  class="search-field bg-white search-select-placeholder">
+                  class="<%= search_field_class(extra: "bg-white search-select-placeholder") %>">
             <option value="all" <%= "selected" if @video_type == "all" %>>All videos</option>
             <option value="instructional" <%= "selected" if @video_type == "instructional" %>>Instructional videos</option>
             <option value="other" <%= "selected" if @video_type == "other" %>>Other videos</option>
@@ -47,7 +47,7 @@
     <div class="flex flex-col sm:flex-row gap-4">
       <%# Categories dropdown %>
       <div class="w-full">
-        <label class="search-label" for="categories">Categories</label>
+        <label class="<%= search_label_class %>" for="categories">Categories</label>
 
         <%= select_tag "categories",
                        options_for_select(
@@ -62,7 +62,7 @@
 
       <%# Sectors dropdown %>
       <div class="w-full">
-        <label class="search-label" for="sectors">Sectors</label>
+        <label class="<%= search_label_class %>" for="sectors">Sectors</label>
 
         <%= select_tag "sectors",
                        options_from_collection_for_select(@sectors, :id, :name, Array(params[:sectors]).map(&:to_i)),
diff --git a/app/views/workshop_ideas/_search_boxes.html.erb b/app/views/workshop_ideas/_search_boxes.html.erb
index f913bab530..d27fba95b0 100644
--- a/app/views/workshop_ideas/_search_boxes.html.erb
+++ b/app/views/workshop_ideas/_search_boxes.html.erb
@@ -9,7 +9,7 @@
       <%= text_field_tag :title,
                          params[:title],
                          placeholder: "Title",
-                         class: "search-field pr-10" %>
+                         class: search_field_class(extra: "pr-10") %>
       <%= render "shared/search_submit" %>
     </div>
     <div data-controller="searchable-select" data-searchable-select-mode-value="person">
@@ -17,7 +17,7 @@
                      options_from_collection_for_select(@users, :id, :full_name_with_email, params[:created_by_id].to_i),
                      include_blank: "Author",
                      data: { searchable_select_target: "select", action: "change->searchable-select#submit" },
-                     class: "search-field" %>
+                     class: search_field_class %>
     </div>
     <!-- Clear filters -->
     <div class="flex sm:justify-end items-end">
diff --git a/app/views/workshop_logs/_search_boxes.html.erb b/app/views/workshop_logs/_search_boxes.html.erb
index c86a7eab06..6aea6adc14 100644
--- a/app/views/workshop_logs/_search_boxes.html.erb
+++ b/app/views/workshop_logs/_search_boxes.html.erb
@@ -2,51 +2,51 @@
   <div class="flex flex-wrap items-end gap-4 mb-4">
     <!-- Month -->
     <div class="flex flex-col w-full sm:w-auto min-w-[10rem]">
-      <%= label_tag :month_and_year, "Month Submitted", class: "search-label" %>
+      <%= label_tag :month_and_year, "Month Submitted", class: search_label_class %>
       <%= select_tag :month_and_year,
                      options_for_select(@month_year_options, params[:month_and_year]),
                      include_blank: "All months",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Year -->
     <div class="flex flex-col w-full sm:w-auto min-w-[9rem]">
-      <%= label_tag :year, "Year", class: "search-label" %>
+      <%= label_tag :year, "Year", class: search_label_class %>
       <%= select_tag :year,
                      options_for_select(@year_options, params[:year]),
                      include_blank: "All years",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Workshop -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
-      <%= label_tag :workshop_id, "Workshop", class: "search-label" %>
+      <%= label_tag :workshop_id, "Workshop", class: search_label_class %>
       <%= select_tag :workshop_id,
                      options_from_collection_for_select(@workshops, :id, :type_name, params[:workshop_id]),
                      include_blank: "All workshops",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Person -->
     <div class="flex flex-col w-full sm:w-1/2 md:w-1/4 lg:w-1/5" data-controller="searchable-select" data-searchable-select-mode-value="person">
-      <%= label_tag :created_by_id, "Person", class: "search-label" %>
+      <%= label_tag :created_by_id, "Person", class: search_label_class %>
       <%= select_tag :created_by_id,
                      options_from_collection_for_select(@users, :id, :full_name_with_email, params[:created_by_id]),
                      include_blank: "All people",
-                     class: "search-field",
+                     class: search_field_class,
                      data: { searchable_select_target: "select", action: "change->searchable-select#submit" } %>
     </div>
 
     <!-- Organization -->
     <div class="flex flex-col w-full sm:w-2/3 md:w-1/3 lg:flex-1">
-      <%= label_tag :organization_id, "Organization", class: "search-label" %>
+      <%= label_tag :organization_id, "Organization", class: search_label_class %>
       <%= select_tag :organization_id,
                      options_from_collection_for_select(@organizations, :id, :name, params[:organization_id]),
                      include_blank: "All organizations",
-                     class: "search-field search-select-placeholder",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
diff --git a/app/views/workshop_variation_ideas/_search_boxes.html.erb b/app/views/workshop_variation_ideas/_search_boxes.html.erb
index 52f2e06be2..4f01848f11 100644
--- a/app/views/workshop_variation_ideas/_search_boxes.html.erb
+++ b/app/views/workshop_variation_ideas/_search_boxes.html.erb
@@ -2,10 +2,10 @@
   <div class="flex flex-col md:flex-row md:items-end md:gap-4 mb-6">
     <!-- Search -->
     <div class="w-full md:flex-1 mb-3 md:mb-0">
-      <%= label_tag :query, "Search", class: "search-label" %>
+      <%= label_tag :query, "Search", class: search_label_class %>
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "search-field pr-10" %>
+                           class: search_field_class(extra: "pr-10") %>
 
         <%= render "shared/search_submit" %>
       </div>
diff --git a/app/views/workshop_variations/_search_boxes.html.erb b/app/views/workshop_variations/_search_boxes.html.erb
index 6b304b03fc..6e2b1329be 100644
--- a/app/views/workshop_variations/_search_boxes.html.erb
+++ b/app/views/workshop_variations/_search_boxes.html.erb
@@ -3,10 +3,10 @@
   <div class="flex flex-col md:flex-row md:items-end md:gap-4 mb-6">
     <!-- Search -->
     <div class="w-full md:flex-1 mb-3 md:mb-0">
-      <%= label_tag :query, "Search", class: "search-label" %>
+      <%= label_tag :query, "Search", class: search_label_class %>
       <div class="relative">
         <%= text_field_tag :query, params[:query],
-                           class: "search-field pr-10" %>
+                           class: search_field_class(extra: "pr-10") %>
 
         <%= render "shared/search_submit" %>
       </div>
diff --git a/app/views/workshops/_filters.html.erb b/app/views/workshops/_filters.html.erb
index b19a0391a4..67d2dff699 100644
--- a/app/views/workshops/_filters.html.erb
+++ b/app/views/workshops/_filters.html.erb
@@ -12,7 +12,7 @@
       <%= text_field_tag field,
                          params[field],
                          placeholder: placeholder,
-                         class: "search-field bg-white pr-10" %>
+                         class: search_field_class(extra: "bg-white pr-10") %>
       <%= render "shared/search_submit" %>
     </div>
   <% end %>

From 2b60e6f3276a73e6731370ede2d706f77661c6d9 Mon Sep 17 00:00:00 2001
From: Mae Beale <maebeale@gmail.com>
Date: Mon, 17 Aug 2026 15:11:42 -0400
Subject: [PATCH 4/4] Reword the select-placeholder CSS comment to stand on its
 own

The prior comment narrated the PR ("styling now lives in ... no @apply, only
this stays here") and mislabeled the helper as a partial. Describe what the rule
does instead, so it reads correctly from the file alone.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/frontend/stylesheets/application.tailwind.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/frontend/stylesheets/application.tailwind.css b/app/frontend/stylesheets/application.tailwind.css
index f3e69302b1..39e59e2293 100644
--- a/app/frontend/stylesheets/application.tailwind.css
+++ b/app/frontend/stylesheets/application.tailwind.css
@@ -108,9 +108,9 @@
   }
 }
 
-/* Filter/search-bar field and label styling lives in shared partials +
-   SearchFormHelper#search_field_class (default Tailwind, no @apply). Only this
-   placeholder rule stays here — its :has() selector isn't expressible as a utility. */
+/* Grey a filter <select>'s "All"/blank first option like a placeholder while it
+   is the current selection. Raw CSS because the :has() selector has no Tailwind
+   utility equivalent. */
 .search-select-placeholder:has(option:first-child:checked) {
   color: rgb(156 163 175);   /* gray-400 */
   font-size: 0.875rem;       /* text-sm */