Merge #23 light-mode ticket preview fix into main

Light mode: ticket-ID hover preview follows the theme (#23 )
.ticket-preview-popup used var(--lt-surface), which is not defined anywhere, so the background always fell through to the hardcoded #0a0e14. In light mode that left a near-black panel — and since the rule set no `color`, the inherited near-black body text was effectively invisible on it. The border was hardcoded neon green and the shadow a heavy rgba(0,0,0,0.5). Now uses --bg-card / --text-primary / --accent-green-border / --shadow-color, and .preview-id uses --accent-cyan instead of the undefined --lt-cyan. base.css gains the two tokens the light theme was missing (--accent-green-border and --shadow-color), synced from web_template 0d633bd. Verified with computed styles in headless chromium: light body-text contrast on the panel goes from invisible to 17.7:1, dark stays at 13.2:1, and the ID accent clears 3:1 in both themes.
2026-08-07 22:56:41 -04:00 · 2026-08-07 22:54:51 -04:00 · 2026-08-07 22:51:22 -04:00 · 2026-08-07 22:51:16 -04:00
3 changed files with 43 additions and 8 deletions
@@ -66,6 +66,7 @@
  --accent-green-bright: #33FFAA;
  --accent-green-dim:    rgba(0,255,136,0.10);
  --accent-green-border: rgba(0,255,136,0.22);
+  --shadow-color:        rgba(0,0,0,0.5);

  /* --- Error / Critical --- */
  --accent-red:     #FF2D55;
@@ -3640,6 +3641,8 @@ html[data-theme="light"] {
  --accent-red-dim:      rgba(181,0,31,0.10);
  --accent-amber-dim:    rgba(138,90,0,0.10);
  --accent-cyan-border:  rgba(0,98,184,0.28);
+  --accent-green-border: rgba(0,109,53,0.28);
+  --shadow-color:        rgba(50,80,130,0.18);

  /* — Glows become subtle drop shadows in light mode — */
  --glow-orange:         0 0 0 1px rgba(196,78,0,0.25),  0 1px 6px rgba(196,78,0,0.18);
@@ -3737,6 +3740,25 @@ html[data-theme="light"] .lt-textarea:focus-visible {
  border-color: var(--accent-cyan);
  box-shadow: var(--box-glow-cyan);
 }
+
+/* Native <select> popup in light mode.
+   `.lt-select` sets `color-scheme: dark` on the element itself, which beats the
+   `color-scheme: light` declared on <html>, so the browser drew the dropdown with
+   dark chrome even in light mode. Reset it per element, and re-tint the option
+   list, which is otherwise hardcoded to #0d1117 for the dark theme. */
+html[data-theme="light"] .lt-select { color-scheme: light; }
+html[data-theme="light"] .lt-select option,
+html[data-theme="light"] select option {
+  background: var(--bg-input);
+  color: var(--text-primary);
+}
+html[data-theme="light"] .lt-select option:hover,
+html[data-theme="light"] .lt-select option:focus,
+html[data-theme="light"] .lt-select option:checked,
+html[data-theme="light"] select option:checked {
+  background: var(--accent-orange-dim);
+  color: var(--accent-orange);
+}
 html[data-theme="light"] .lt-label { color: var(--text-muted); }

 /* — Buttons — */
@@ -338,17 +338,22 @@ kbd {
 }

 /* ── Ticket preview popup ────────────────────────────────────── */
+/* --lt-surface is not defined anywhere, so the background always fell through to
+   the hardcoded #0a0e14 — a near-black panel in light mode, with no colour set at
+   all, so the inherited near-black body text was invisible on it. These tokens
+   are redefined for light mode in base.css. */
 .ticket-preview-popup {
  position: fixed;
  z-index: 9999;
-  background: var(--lt-surface, #0a0e14);
-  border: 1px solid rgba(0, 255, 65, 0.4);
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--accent-green-border);
  padding: 0.75rem;
  min-width: 280px;
  max-width: 360px;
  font-size: 0.75rem;
  pointer-events: auto;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+  box-shadow: 0 4px 20px var(--shadow-color);
 }
 .ticket-preview-popup .preview-header {
  display: flex;
@@ -356,7 +361,7 @@ kbd {
  align-items: center;
  margin-bottom: 0.4rem;
 }
-.ticket-preview-popup .preview-id   { color: var(--lt-cyan, #00ffff); font-weight: 700; }
+.ticket-preview-popup .preview-id   { color: var(--accent-cyan); font-weight: 700; }
 .ticket-preview-popup .preview-title { font-weight: 600; margin-bottom: 0.4rem; }
 .ticket-preview-popup .preview-meta { opacity: 0.7; display: flex; flex-direction: column; gap: 0.1rem; }
 .ticket-preview-popup .preview-footer { margin-top: 0.4rem; opacity: 0.5; font-size: 0.65rem; }
@@ -54,10 +54,18 @@ body.edit-mode .editable-metadata {
  text-transform: uppercase;
  letter-spacing: 0.05em;
 }
-.lt-status-select.lt-status-open      { color: var(--lt-success, #00ff41); border-color: var(--lt-success, #00ff41); }
-.lt-status-select.lt-status-pending   { color: var(--lt-amber,   #ffb000); border-color: var(--lt-amber,   #ffb000); }
-.lt-status-select.lt-status-in-progress { color: var(--lt-cyan,  #00ffff); border-color: var(--lt-cyan,   #00ffff); }
-.lt-status-select.lt-status-closed    { color: var(--lt-danger,  #ff4d4d); border-color: var(--lt-danger, #ff4d4d); }
+/* --lt-success / --lt-amber / --lt-cyan / --lt-danger are not defined anywhere,
+   so these always fell through to the hardcoded neon fallbacks — unreadable on
+   the light theme's white input background. The --accent-* tokens carry the same
+   hues and are redefined for light mode in base.css.
+
+   The leading .lt-select is needed for specificity: base.css's
+   `html[data-theme="light"] .lt-select` (0,2,1) would otherwise outrank a plain
+   two-class selector and repaint every status the same near-black. */
+.lt-select.lt-status-select.lt-status-open        { color: var(--accent-green); border-color: var(--accent-green); }
+.lt-select.lt-status-select.lt-status-pending     { color: var(--accent-amber); border-color: var(--accent-amber); }
+.lt-select.lt-status-select.lt-status-in-progress { color: var(--accent-cyan);  border-color: var(--accent-cyan); }
+.lt-select.lt-status-select.lt-status-closed      { color: var(--accent-red);   border-color: var(--accent-red); }

 /* ── Ticket meta KV grid ─────────────────────────────────────── */
 .ticket-meta-grid {
Author	SHA1	Message	Date
jared	153f9a7cef	Merge #23 light-mode ticket preview fix into main Lint / PHP (phpcs PSR-12) (push) Successful in 1m9s Details Lint / JS (eslint) (push) Successful in 9s Details Lint / PHP requirements (version + extensions) (push) Successful in 21s Details Lint / Notify on failure (push) Skipped Details Security / PHP Security (semgrep) (push) Successful in 2m54s Details Lint / Deploy (push) Successful in 6s Details	2026-08-07 22:56:41 -04:00
jared	0a7201d754	Light mode: ticket-ID hover preview follows the theme (#23 ) Lint / PHP (phpcs PSR-12) (push) Successful in 17s Details Lint / JS (eslint) (push) Successful in 9s Details Lint / PHP requirements (version + extensions) (push) Successful in 22s Details Lint / Notify on failure (push) Skipped Details Security / PHP Security (semgrep) (push) Successful in 1m15s Details Lint / Deploy (push) Successful in 2s Details .ticket-preview-popup used var(--lt-surface), which is not defined anywhere, so the background always fell through to the hardcoded #0a0e14. In light mode that left a near-black panel — and since the rule set no `color`, the inherited near-black body text was effectively invisible on it. The border was hardcoded neon green and the shadow a heavy rgba(0,0,0,0.5). Now uses --bg-card / --text-primary / --accent-green-border / --shadow-color, and .preview-id uses --accent-cyan instead of the undefined --lt-cyan. base.css gains the two tokens the light theme was missing (--accent-green-border and --shadow-color), synced from web_template 0d633bd. Verified with computed styles in headless chromium: light body-text contrast on the panel goes from invisible to 17.7:1, dark stays at 13.2:1, and the ID accent clears 3:1 in both themes.	2026-08-07 22:54:51 -04:00
jared	12ffd217bb	Merge #19 light-mode status dropdown fix into main Lint / PHP (phpcs PSR-12) (push) Successful in 29s Details Lint / JS (eslint) (push) Successful in 17s Details Lint / PHP requirements (version + extensions) (push) Successful in 40s Details Lint / Notify on failure (push) Skipped Details Security / PHP Security (semgrep) (push) Successful in 1m14s Details Lint / Deploy (push) Successful in 3s Details	2026-08-07 22:51:22 -04:00
jared	a5b0655623	Light mode: status dropdown no longer renders dark (#19 ) Lint / PHP (phpcs PSR-12) (push) Successful in 23s Details Lint / JS (eslint) (push) Successful in 11s Details Lint / PHP requirements (version + extensions) (push) Successful in 22s Details Lint / Notify on failure (push) Skipped Details Security / PHP Security (semgrep) (push) Successful in 1m11s Details Lint / Deploy (push) Successful in 2s Details Two separate causes, both light-mode-only: 1. base.css `.lt-select` sets `color-scheme: dark` on the element itself, which outranks the `color-scheme: light` the light theme sets on <html>, so the native dropdown popup kept dark chrome. The option list is also hardcoded #0d1117/#c9d1d9 with no light override. Fixed with light overrides for both (synced from web_template, where the same fix landed as 378a8cd). 2. ticket.css coloured the status select with var(--lt-success), --lt-amber, --lt-cyan and --lt-danger — none of which are defined anywhere in the project, so all four always fell through to hardcoded neon fallbacks. Now uses the --accent-* tokens, which carry the same hues and are redefined for light mode. The selectors also lead with .lt-select: at two classes they lost to base.css's `html[data-theme="light"] .lt-select` (0,2,1) and every status was repainted near-black in light mode. Verified with computed styles in headless chromium — all four statuses in both themes (8/8), plus the popup colour-scheme and option colours.	2026-08-07 22:51:16 -04:00