From f9d99b2c98dda1f3adf9af85757071745eccd5d9 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sat, 20 Jun 2026 01:49:55 -0400
Subject: [PATCH] fix: dark-theme hero buttons green in dark mode; correct
 source-order comment

Both ::deep and global selectors are (0,3,0); override wins on source order
(deepdrft-styles.css linked after scoped bundle in App.razor).
---
 .../WaveformVisualizerControlPopover.razor    | 20 +++++-----
 .../wwwroot/styles/deepdrft-styles.css        | 39 +++++++++++++++++++
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/WaveformVisualizerControlPopover.razor b/DeepDrftPublic.Client/Controls/WaveformVisualizerControlPopover.razor
index f979e0a..f776aa8 100644
--- a/DeepDrftPublic.Client/Controls/WaveformVisualizerControlPopover.razor
+++ b/DeepDrftPublic.Client/Controls/WaveformVisualizerControlPopover.razor
@@ -29,15 +29,17 @@
    the shared WaveformVisualizerControlState and raises Changed; the visualizer bridge subscribes. This
    host only toggles open/closed and centers the panel — it stays purely presentational. *@
 
-<MudTooltip Text="Visualizer settings">
-    <MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
-                   Size="@IconSize"
-                   Color="Color.Secondary"
-                   Disabled="@(!RendererInfo.IsInteractive)"
-                   OnClick="@Toggle"
-                   aria-label="Visualizer settings"
-                   aria-expanded="@_open" />
-</MudTooltip>
+<div class="dd-lava-lamp-trigger">
+    <MudTooltip Text="Visualizer settings">
+        <MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
+                       Size="@IconSize"
+                       Color="Color.Secondary"
+                       Disabled="@(!RendererInfo.IsInteractive)"
+                       OnClick="@Toggle"
+                       aria-label="Visualizer settings"
+                       aria-expanded="@_open" />
+    </MudTooltip>
+</div>
 
 @* The tinted modal scrim that also HOLDS the panel. DarkBackground = the mild tint; OnClick on the scrim
    dismisses (knob-drag-safe, see header). The panel is the overlay's centered child; it stops click
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index e511867..5be20e0 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -776,6 +776,45 @@ body:has(.waveform-visualizer-control-overlay) {
     color: var(--deepdrft-primary);
 }
 
+/* Dark-theme interactive affordances in the Session/Mix release-detail hero overlay.
+   The co-located ReleaseHeroOverlay.razor.css forces .release-hero-play and
+   .release-hero-share icons to --deepdrft-white unconditionally (correct for the
+   over-image light-theme contract). In dark theme the play and share glyphs adopt
+   green to match the "green = interactive" convention. Both the scoped ::deep rule
+   ([b-xxx] .release-hero-play .mud-icon-button) and this global rule
+   (.deepdrft-theme-dark .release-hero-play .mud-icon-button) compute to specificity
+   (0,3,0) — a tie — so the override wins on source order: deepdrft-styles.css is
+   linked after DeepDrftPublic.styles.css in App.razor, making it the later rule.
+   No !important needed. .mud-progress-circular is included alongside .mud-icon-button
+   in the play slot to colour the loading spinner green as well.
+   Light theme: pixel-identical to before. */
+.deepdrft-theme-dark .release-hero-play .mud-icon-button,
+.deepdrft-theme-dark .release-hero-play .mud-progress-circular,
+.deepdrft-theme-dark .release-hero-share .mud-icon-button {
+    color: var(--deepdrft-primary);
+}
+
+/* Dark-theme lava-lamp visualizer-settings trigger.
+   The MudIconButton uses Color.Secondary, which resolves to off-white in dark mode.
+   The .dd-lava-lamp-trigger marker div (added to WaveformVisualizerControlPopover.razor)
+   scopes this rule to only that trigger, preventing bleed onto other Secondary icon
+   buttons sharing the same host pages. Applied at all host sites (Mix, Cut, Session,
+   NowPlaying) since the wrapper travels with the component. Light theme: unchanged. */
+.deepdrft-theme-dark .dd-lava-lamp-trigger .mud-icon-button {
+    color: var(--deepdrft-primary);
+}
+
+/* Dark-theme gas-lamp dark-mode toggle.
+   The MudIconButton uses Color.Inherit and sits inside .dd-nav-actions (the right-side
+   cluster of the nav bar). In dark theme it inherits the nav text colour (off-white);
+   green makes it consistent with the "green = interactive" convention. The selector is
+   scoped to .dd-nav-actions so no other icon buttons are affected. Covers both the
+   desktop nav and the mobile nav (which also renders its gas-lamp inside .dd-nav-actions).
+   Light theme: unchanged. */
+.deepdrft-theme-dark .dd-nav-actions .mud-icon-button {
+    color: var(--deepdrft-primary);
+}
+
 /* =============================================================================
    RELEASE DESCRIPTION BLURB
    Shared block rendered just below the hero/header on every release detail page