From b0d382987b6b0fc6d981ed37f194d3c1242ecc8c Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Wed, 22 Apr 2026 23:23:38 +0200
Subject: [PATCH] Theme Choices.js to match app dark/light themes

Code review of Task 7 showed Choices.js shipping with white-bg +
light-grey-text defaults, which were unreadable in dark mode and
clashed with the app's premium aesthetic. The design doc section 10
scoped these overrides into the CSS work but they hadn't been written.

Adds ~70 lines to custom.css re-themeing every .choices__ selector to
use existing design tokens (--bg-card, --bg-inset, --text-primary,
--accent, --border-default, etc.). No hardcoded colours; both :root
and :root.light themes work automatically.

Key visual changes:
- Dropdown popup: dark-card background with shadow
- Options: primary text colour, accent hover highlight
- Selected chips: orange accent pill with white text
- Focus ring: 0.15rem accent glow on the input

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 static/css/custom.css | 118 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)

diff --git a/static/css/custom.css b/static/css/custom.css
index cdbba0c..0fee20f 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1522,3 +1522,121 @@ body, .card, .modal-content, .form-control, .form-select,
     background: var(--bg-card-hover);
     text-decoration: none;
 }
+
+/* === Choices.js theme overrides (dark + light, executive report modal) === */
+/*
+   Choices.js ships with a white-bg, light-grey-text default that clashes with
+   the app's dark theme. These overrides replace those defaults with the app's
+   own design tokens so the multi-select picker matches every other card and
+   input on the page. All tokens auto-switch between dark (:root) and light
+   (:root.light) themes — no duplicate blocks needed.
+*/
+
+/* Container — the outer wrapper that replaces the native <select> */
+.choices {
+    margin-bottom: 0;
+}
+
+/* Closed-state input area (where chips and the placeholder/search sit) */
+.choices__inner {
+    background: var(--bg-inset);
+    color: var(--text-primary);
+    border: 1px solid var(--border-default);
+    border-radius: 0.5rem;
+    padding: 0.4rem 0.55rem;
+    min-height: 2.55rem;
+    font-size: 0.925rem;
+}
+.choices.is-focused .choices__inner,
+.choices.is-open .choices__inner {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 0.15rem rgba(232, 133, 26, 0.18);
+}
+
+/* The cloned search input typed into when the dropdown is open */
+.choices__input {
+    background: transparent !important;
+    color: var(--text-primary) !important;
+    font-size: 0.925rem;
+}
+.choices__input::placeholder {
+    color: var(--text-tertiary);
+}
+
+/* Dropdown popup — the list of choices */
+.choices__list--dropdown,
+.choices__list[aria-expanded] {
+    background: var(--bg-card);
+    border: 1px solid var(--border-default);
+    border-radius: 0.5rem;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+    margin-top: 4px;
+    z-index: 2000;
+}
+
+/* Individual option rows in the dropdown */
+.choices__list--dropdown .choices__item,
+.choices__list[aria-expanded] .choices__item {
+    color: var(--text-primary);
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
+}
+
+/* Hovered / keyboard-highlighted option */
+.choices__list--dropdown .choices__item--selectable.is-highlighted,
+.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
+    background: var(--bg-card-hover);
+    color: var(--text-primary);
+}
+/* The trailing "Press to select" hint */
+.choices__list--dropdown .choices__item--selectable.is-highlighted::after,
+.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
+    color: var(--accent);
+    opacity: 0.9;
+}
+
+/* Disabled / placeholder-style rows (e.g. "No matches found") */
+.choices__list--dropdown .choices__item--disabled,
+.choices__list[aria-expanded] .choices__item--disabled {
+    color: var(--text-tertiary);
+}
+
+/* Placeholder text in the input area when nothing is selected */
+.choices__placeholder {
+    color: var(--text-tertiary);
+    opacity: 1;
+}
+
+/* Selected chips in multi-select mode (visible when items are chosen) */
+.choices__list--multiple .choices__item {
+    background: var(--accent);
+    border: 1px solid var(--accent);
+    color: #fff;
+    font-size: 0.82rem;
+    font-weight: 500;
+    padding: 0.2rem 0.6rem;
+    margin: 0.15rem 0.25rem 0.15rem 0;
+    border-radius: 999px;
+}
+.choices__list--multiple .choices__item.is-highlighted {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+
+/* The × button on each selected chip */
+.choices__list--multiple .choices__button {
+    border-left: 1px solid rgba(255, 255, 255, 0.4);
+    margin: 0 0 0 0.5rem;
+    padding-left: 0.5rem;
+    opacity: 0.85;
+}
+.choices__list--multiple .choices__button:hover {
+    opacity: 1;
+}
+
+/* No-results / no-choices message */
+.choices__list .choices__item--no-results,
+.choices__list .choices__item--no-choices {
+    color: var(--text-tertiary);
+    font-style: italic;
+}