From c1dbcc930a18443d58f25d537e6abb83fbcea327 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 22 Jul 2026 10:07:52 +0200
Subject: [PATCH 1/5] New CSS for flow chart components

---
 .../charts/energyFlowChart/EnergyFlowChart.vue   | 16 ++++++++++------
 .../koala/source/src/css/quasar.variables.scss   |  6 ++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 6de4de2614..3c26fdfdf1 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -46,6 +46,10 @@ const svgViewBox = computed(
     `${svgSize.value.xMin} ${svgSize.value.yMin} ${svgSize.value.xMax} ${svgSize.value.yMax}`,
 );
 
+// The icon circle sits inside the label pill (pill radius = circleRadius);
+// the inset leaves a visible gap between circle and pill edge.
+const iconCircleRadius = computed(() => svgSize.value.circleRadius - 2);
+
 const svgIconWidth = computed(() => svgSize.value.circleRadius);
 
 const svgIconHeight = computed(() => svgSize.value.circleRadius);
@@ -757,9 +761,9 @@ const labelClipPath = computed(() => {
             >
               <rect
                 :x="-svgSize.circleRadius - svgSize.strokeWidth"
-                :y="(svgSize.circleRadius - 1) * (1 - 2 * component.soc)"
+                :y="iconCircleRadius * (1 - 2 * component.soc)"
                 :width="(svgSize.circleRadius + svgSize.strokeWidth) * 2"
-                :height="(svgSize.circleRadius - 1) * 2 * component.soc"
+                :height="iconCircleRadius * 2 * component.soc"
               />
             </clipPath>
             <clipPath :id="`clip-label-${component.id}`">
@@ -846,7 +850,7 @@ const labelClipPath = computed(() => {
             <circle
               cx="0"
               cy="0"
-              :r="svgSize.circleRadius - 1"
+              :r="iconCircleRadius"
               filter="url(#flow-box-shadow)"
             />
             <!-- SoC fill: radius must match the clip-soc reference above so the
@@ -857,7 +861,7 @@ const labelClipPath = computed(() => {
               :class="{ soc: component.soc !== undefined }"
               cx="0"
               cy="0"
-              :r="svgSize.circleRadius - 1"
+              :r="iconCircleRadius"
               :clip-path="`url(#clip-soc-${component.id})`"
               :fill="`url(#gradient-soc-${component.id})`"
             />
@@ -897,7 +901,7 @@ svg {
 .flow-base {
   fill: none;
   stroke: var(--q-secondary);
-  stroke-width: 0.75;
+  stroke-width: 0.4;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: stroke 0.5s;
@@ -1029,7 +1033,7 @@ rect {
 
 /* Drop shadow by way of feDropShadow for browser compatibility (safari webkit) */
 feDropShadow {
-  flood-color: var(--q-shadow);
+  flood-color: var(--q-flow-shadow);
   flood-opacity: 1;
 }
 
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index d322c95a1d..03a292841a 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -56,6 +56,8 @@ $vehicle-fill: #4f99af;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 $table-hover: #f9f8f8;
+// energy flow chart: shadow behind the pills and icon circles
+$flow-shadow: $secondary;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -71,6 +73,7 @@ $table-hover: #f9f8f8;
   --q-card-background: #{$background};
   --q-list: color-mix(in srgb, var(--q-grey) 5%, transparent);
   --q-shadow: #{$secondary};
+  --q-flow-shadow: #{$flow-shadow};
   --q-text: #{$light-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
@@ -228,6 +231,8 @@ $table-hover: #f9f8f8;
 $dark-primary: #2aa8ff;
 $dark-secondary: #3b3b3d; //cards - tabs background tables
 $dark-shadow: #7a7c80; // shadow color for dark theme
+// energy flow chart: dark theme uses a black shadow instead of the light glow
+$dark-flow-shadow: #000000;
 $dark-accent: #546e7a;
 $dark-positive: #3e8f5e;
 $dark-negative: #c54d57;
@@ -262,6 +267,7 @@ $dark-table-hover: #ffffff12;
   --q-card-background: #{$dark-secondary};
   --q-list: #{$dark-secondary}; // drawer, list background
   --q-shadow: #{$dark-shadow};
+  --q-flow-shadow: #{$dark-flow-shadow};
   --q-text: #{$dark-text};
   --q-white: #{$white};
   --q-grey: #{$grey};

From fb600bfc948bac21e09a86e633cc86762154a985 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 22 Jul 2026 10:36:58 +0200
Subject: [PATCH 2/5] Component pill with white shadow

---
 .../energyFlowChart/EnergyFlowChart.vue       | 27 +++++++++++++++++--
 .../source/src/css/quasar.variables.scss      | 13 ++++-----
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 3c26fdfdf1..6d76d14572 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -698,6 +698,7 @@ const labelClipPath = computed(() => {
       xmlns:svg="http://www.w3.org/2000/svg"
     >
       <defs>
+        <!-- shadow for the label pills and the centre dot -->
         <filter
           id="flow-box-shadow"
           x="-50%"
@@ -708,6 +709,19 @@ const labelClipPath = computed(() => {
         >
           <feDropShadow dx="0" dy="0" stdDeviation="1" />
         </filter>
+        <!-- separate filter for the icon circles: same geometry, but its own
+             flood-color so the circles can be shaded differently from the pill
+             they sit in (see --q-flow-icon-shadow) -->
+        <filter
+          id="flow-icon-shadow"
+          x="-50%"
+          y="-50%"
+          width="200%"
+          height="200%"
+          filterUnits="objectBoundingBox"
+        >
+          <feDropShadow dx="0" dy="0" stdDeviation="1" />
+        </filter>
       </defs>
 
       <g id="layer1" style="display: inline">
@@ -851,7 +865,7 @@ const labelClipPath = computed(() => {
               cx="0"
               cy="0"
               :r="iconCircleRadius"
-              filter="url(#flow-box-shadow)"
+              filter="url(#flow-icon-shadow)"
             />
             <!-- SoC fill: radius must match the clip-soc reference above so the
                  fill level is accurate, and the background circle below so it
@@ -1033,10 +1047,19 @@ rect {
 
 /* Drop shadow by way of feDropShadow for browser compatibility (safari webkit) */
 feDropShadow {
-  flood-color: var(--q-flow-shadow);
   flood-opacity: 1;
 }
 
+/* pills and centre dot keep the shared card shadow ... */
+#flow-box-shadow feDropShadow {
+  flood-color: var(--q-shadow);
+}
+
+/* ... while the icon circles get their own tone (dark theme: black) */
+#flow-icon-shadow feDropShadow {
+  flood-color: var(--q-flow-icon-shadow);
+}
+
 text {
   font-size: v-bind(svgFontSize);
   line-height: 1.25;
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 03a292841a..a734923d76 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -56,8 +56,8 @@ $vehicle-fill: #4f99af;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 $table-hover: #f9f8f8;
-// energy flow chart: shadow behind the pills and icon circles
-$flow-shadow: $secondary;
+// energy flow chart: shadow behind the icon circles (the pills use $shadow)
+$flow-icon-shadow: $secondary;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -73,7 +73,7 @@ $flow-shadow: $secondary;
   --q-card-background: #{$background};
   --q-list: color-mix(in srgb, var(--q-grey) 5%, transparent);
   --q-shadow: #{$secondary};
-  --q-flow-shadow: #{$flow-shadow};
+  --q-flow-icon-shadow: #{$flow-icon-shadow};
   --q-text: #{$light-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
@@ -231,8 +231,9 @@ $flow-shadow: $secondary;
 $dark-primary: #2aa8ff;
 $dark-secondary: #3b3b3d; //cards - tabs background tables
 $dark-shadow: #7a7c80; // shadow color for dark theme
-// energy flow chart: dark theme uses a black shadow instead of the light glow
-$dark-flow-shadow: #000000;
+// energy flow chart: icon circles use a black shadow in the dark theme, while
+// the pills keep the lighter $dark-shadow glow
+$dark-flow-icon-shadow: #151616;
 $dark-accent: #546e7a;
 $dark-positive: #3e8f5e;
 $dark-negative: #c54d57;
@@ -267,7 +268,7 @@ $dark-table-hover: #ffffff12;
   --q-card-background: #{$dark-secondary};
   --q-list: #{$dark-secondary}; // drawer, list background
   --q-shadow: #{$dark-shadow};
-  --q-flow-shadow: #{$dark-flow-shadow};
+  --q-flow-icon-shadow: #{$dark-flow-icon-shadow};
   --q-text: #{$dark-text};
   --q-white: #{$white};
   --q-grey: #{$grey};

From 431c890eb0f2271e7e10ad6a3db29d8a8d446d0f Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 22 Jul 2026 11:01:59 +0200
Subject: [PATCH 3/5] drop shadow offset plus dark shadow

---
 .../energyFlowChart/EnergyFlowChart.vue       | 19 +++----------------
 .../source/src/css/quasar.variables.scss      | 11 ++++-------
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 6d76d14572..1169e6f176 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -698,7 +698,6 @@ const labelClipPath = computed(() => {
       xmlns:svg="http://www.w3.org/2000/svg"
     >
       <defs>
-        <!-- shadow for the label pills and the centre dot -->
         <filter
           id="flow-box-shadow"
           x="-50%"
@@ -709,9 +708,6 @@ const labelClipPath = computed(() => {
         >
           <feDropShadow dx="0" dy="0" stdDeviation="1" />
         </filter>
-        <!-- separate filter for the icon circles: same geometry, but its own
-             flood-color so the circles can be shaded differently from the pill
-             they sit in (see --q-flow-icon-shadow) -->
         <filter
           id="flow-icon-shadow"
           x="-50%"
@@ -720,7 +716,7 @@ const labelClipPath = computed(() => {
           height="200%"
           filterUnits="objectBoundingBox"
         >
-          <feDropShadow dx="0" dy="0" stdDeviation="1" />
+          <feDropShadow dx="0.5" dy="0.5" stdDeviation="1" />
         </filter>
       </defs>
 
@@ -1045,21 +1041,12 @@ rect {
   fill: var(--q-card-background);
 }
 
-/* Drop shadow by way of feDropShadow for browser compatibility (safari webkit) */
+/* Drop shadow by way of feDropShadow for browser compatibility (safari webkit). */
 feDropShadow {
+  flood-color: var(--q-flow-shadow);
   flood-opacity: 1;
 }
 
-/* pills and centre dot keep the shared card shadow ... */
-#flow-box-shadow feDropShadow {
-  flood-color: var(--q-shadow);
-}
-
-/* ... while the icon circles get their own tone (dark theme: black) */
-#flow-icon-shadow feDropShadow {
-  flood-color: var(--q-flow-icon-shadow);
-}
-
 text {
   font-size: v-bind(svgFontSize);
   line-height: 1.25;
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index a734923d76..008b1fe6a4 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -56,8 +56,7 @@ $vehicle-fill: #4f99af;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 $table-hover: #f9f8f8;
-// energy flow chart: shadow behind the icon circles (the pills use $shadow)
-$flow-icon-shadow: $secondary;
+$flow-shadow: $secondary;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -73,7 +72,7 @@ $flow-icon-shadow: $secondary;
   --q-card-background: #{$background};
   --q-list: color-mix(in srgb, var(--q-grey) 5%, transparent);
   --q-shadow: #{$secondary};
-  --q-flow-icon-shadow: #{$flow-icon-shadow};
+  --q-flow-shadow: #{$flow-shadow};
   --q-text: #{$light-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
@@ -231,9 +230,7 @@ $flow-icon-shadow: $secondary;
 $dark-primary: #2aa8ff;
 $dark-secondary: #3b3b3d; //cards - tabs background tables
 $dark-shadow: #7a7c80; // shadow color for dark theme
-// energy flow chart: icon circles use a black shadow in the dark theme, while
-// the pills keep the lighter $dark-shadow glow
-$dark-flow-icon-shadow: #151616;
+$dark-flow-shadow: #000000;
 $dark-accent: #546e7a;
 $dark-positive: #3e8f5e;
 $dark-negative: #c54d57;
@@ -268,7 +265,7 @@ $dark-table-hover: #ffffff12;
   --q-card-background: #{$dark-secondary};
   --q-list: #{$dark-secondary}; // drawer, list background
   --q-shadow: #{$dark-shadow};
-  --q-flow-icon-shadow: #{$dark-flow-icon-shadow};
+  --q-flow-shadow: #{$dark-flow-shadow};
   --q-text: #{$dark-text};
   --q-white: #{$white};
   --q-grey: #{$grey};

From e331e5a0766e6b3fd44ecc9b336e42486d19bd43 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 22 Jul 2026 14:17:42 +0200
Subject: [PATCH 4/5] box shadow for design spec

---
 .../charts/dailyTotals/DailyTotals.vue        |  2 +-
 .../energyFlowChart/EnergyFlowChart.vue       | 50 +++++++++++++------
 .../charts/historyChart/HistoryChart.vue      |  2 +-
 .../source/src/css/quasar.variables.scss      | 33 ++++++++++--
 4 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index a460ff999f..aaa86d7cd1 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -586,7 +586,7 @@ watch(
 .card {
   border-radius: 0.5rem;
   background: var(--q-card-background);
-  filter: drop-shadow(0 0 0.15rem var(--q-shadow));
+  filter: drop-shadow(0 0 0.15rem var(--q-chart-shadow));
   margin-bottom: 0.25rem;
 }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 1169e6f176..f6a2d7a2c8 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -706,17 +706,21 @@ const labelClipPath = computed(() => {
           height="200%"
           filterUnits="objectBoundingBox"
         >
-          <feDropShadow dx="0" dy="0" stdDeviation="1" />
-        </filter>
-        <filter
-          id="flow-icon-shadow"
-          x="-50%"
-          y="-50%"
-          width="200%"
-          height="200%"
-          filterUnits="objectBoundingBox"
-        >
-          <feDropShadow dx="0.5" dy="0.5" stdDeviation="1" />
+          <feGaussianBlur in="SourceAlpha" stdDeviation="1.5" result="castB" />
+          <feOffset in="castB" dx="1.3" dy="1.3" result="castO" />
+          <feFlood class="cast" result="castC" />
+          <feComposite in="castC" in2="castO" operator="in" result="cast" />
+
+          <feGaussianBlur in="SourceAlpha" stdDeviation="1.15" result="hlB" />
+          <feOffset in="hlB" dx="-1" dy="-1" result="hlO" />
+          <feFlood class="highlight" result="hlC" />
+          <feComposite in="hlC" in2="hlO" operator="in" result="highlight" />
+
+          <feMerge>
+            <feMergeNode in="highlight" />
+            <feMergeNode in="cast" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
         </filter>
       </defs>
 
@@ -799,6 +803,7 @@ const labelClipPath = computed(() => {
             </linearGradient>
           </defs>
           <rect
+            class="flow-surface"
             :x="-svgRectWidth / 2"
             :y="-svgSize.circleRadius"
             :width="svgRectWidth"
@@ -858,10 +863,11 @@ const labelClipPath = computed(() => {
             :transform="`translate(${svgSize.circleRadius - svgRectWidth / 2}, 0)`"
           >
             <circle
+              class="flow-surface"
               cx="0"
               cy="0"
               :r="iconCircleRadius"
-              filter="url(#flow-icon-shadow)"
+              filter="url(#flow-box-shadow)"
             />
             <!-- SoC fill: radius must match the clip-soc reference above so the
                  fill level is accurate, and the background circle below so it
@@ -1041,10 +1047,22 @@ rect {
   fill: var(--q-card-background);
 }
 
-/* Drop shadow by way of feDropShadow for browser compatibility (safari webkit). */
-feDropShadow {
-  flood-color: var(--q-flow-shadow);
-  flood-opacity: 1;
+/* the spec's `inset 0 0 0 1px` hairline; 1px is ~0.15 SVG units */
+.flow-surface {
+  stroke: var(--q-flow-chart-hairline);
+  stroke-width: 0.15;
+}
+
+/* Shadow colors via an SVG filter rather than CSS filter: drop-shadow, for
+   browser compatibility (safari webkit) */
+feFlood.cast {
+  flood-color: var(--q-flow-chart-shadow);
+  flood-opacity: var(--q-flow-chart-shadow-opacity);
+}
+
+feFlood.highlight {
+  flood-color: var(--q-flow-chart-highlight);
+  flood-opacity: var(--q-flow-chart-highlight-opacity);
 }
 
 text {
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 502414280c..f47e2c7555 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -466,7 +466,7 @@ const chartOptions = computed<ChartOptions<'line'>>(() => ({
   flex-direction: column;
   background: var(--q-card-background);
   border-radius: 15px;
-  filter: drop-shadow(0 0 0.3rem var(--q-shadow));
+  filter: drop-shadow(0 0 0.3rem var(--q-chart-shadow));
 }
 
 .legend-wrapper {
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 008b1fe6a4..135b9295fe 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -56,7 +56,14 @@ $vehicle-fill: #4f99af;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 $table-hover: #f9f8f8;
-$flow-shadow: $secondary;
+// history chart and daily totals cards (--q-shadow stays for everything else)
+$chart-shadow: $secondary;
+// energy flow chart: cast shadow, opposing highlight and inset hairline
+$flow-chart-shadow: #000000;
+$flow-chart-shadow-opacity: 0.12;
+$flow-chart-highlight: $white;
+$flow-chart-highlight-opacity: 0.9;
+$flow-chart-hairline: #{rgba($white, 0.05)};
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -72,7 +79,12 @@ $flow-shadow: $secondary;
   --q-card-background: #{$background};
   --q-list: color-mix(in srgb, var(--q-grey) 5%, transparent);
   --q-shadow: #{$secondary};
-  --q-flow-shadow: #{$flow-shadow};
+  --q-chart-shadow: #{$chart-shadow};
+  --q-flow-chart-shadow: #{$flow-chart-shadow};
+  --q-flow-chart-shadow-opacity: #{$flow-chart-shadow-opacity};
+  --q-flow-chart-highlight: #{$flow-chart-highlight};
+  --q-flow-chart-highlight-opacity: #{$flow-chart-highlight-opacity};
+  --q-flow-chart-hairline: #{$flow-chart-hairline};
   --q-text: #{$light-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
@@ -230,7 +242,15 @@ $flow-shadow: $secondary;
 $dark-primary: #2aa8ff;
 $dark-secondary: #3b3b3d; //cards - tabs background tables
 $dark-shadow: #7a7c80; // shadow color for dark theme
-$dark-flow-shadow: #000000;
+// history chart and daily totals cards (--q-shadow stays for everything else)
+$dark-chart-shadow: #000000;
+// energy flow chart: values taken directly from the design spec
+// (-4px -4px 9px highlight, 5px 5px 12px cast, inset 0 0 0 1px hairline)
+$dark-flow-chart-shadow: #000000;
+$dark-flow-chart-shadow-opacity: 0.45;
+$dark-flow-chart-highlight: $white;
+$dark-flow-chart-highlight-opacity: 0.06;
+$dark-flow-chart-hairline: #{rgba($white, 0.05)};
 $dark-accent: #546e7a;
 $dark-positive: #3e8f5e;
 $dark-negative: #c54d57;
@@ -265,7 +285,12 @@ $dark-table-hover: #ffffff12;
   --q-card-background: #{$dark-secondary};
   --q-list: #{$dark-secondary}; // drawer, list background
   --q-shadow: #{$dark-shadow};
-  --q-flow-shadow: #{$dark-flow-shadow};
+  --q-chart-shadow: #{$dark-chart-shadow};
+  --q-flow-chart-shadow: #{$dark-flow-chart-shadow};
+  --q-flow-chart-shadow-opacity: #{$dark-flow-chart-shadow-opacity};
+  --q-flow-chart-highlight: #{$dark-flow-chart-highlight};
+  --q-flow-chart-highlight-opacity: #{$dark-flow-chart-highlight-opacity};
+  --q-flow-chart-hairline: #{$dark-flow-chart-hairline};
   --q-text: #{$dark-text};
   --q-white: #{$white};
   --q-grey: #{$grey};

From fb26adc19b681d3e62be565e5cdcbcd4bd3a86c3 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 22 Jul 2026 14:27:21 +0200
Subject: [PATCH 5/5] Final CSS style

---
 .../energyFlowChart/EnergyFlowChart.vue       | 34 ++-----------------
 .../source/src/css/quasar.variables.scss      | 17 ++--------
 2 files changed, 5 insertions(+), 46 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index f6a2d7a2c8..a9ca5ca51d 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -706,21 +706,7 @@ const labelClipPath = computed(() => {
           height="200%"
           filterUnits="objectBoundingBox"
         >
-          <feGaussianBlur in="SourceAlpha" stdDeviation="1.5" result="castB" />
-          <feOffset in="castB" dx="1.3" dy="1.3" result="castO" />
-          <feFlood class="cast" result="castC" />
-          <feComposite in="castC" in2="castO" operator="in" result="cast" />
-
-          <feGaussianBlur in="SourceAlpha" stdDeviation="1.15" result="hlB" />
-          <feOffset in="hlB" dx="-1" dy="-1" result="hlO" />
-          <feFlood class="highlight" result="hlC" />
-          <feComposite in="hlC" in2="hlO" operator="in" result="highlight" />
-
-          <feMerge>
-            <feMergeNode in="highlight" />
-            <feMergeNode in="cast" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
+          <feDropShadow dx="1.3" dy="1.3" stdDeviation="1.5" />
         </filter>
       </defs>
 
@@ -803,7 +789,6 @@ const labelClipPath = computed(() => {
             </linearGradient>
           </defs>
           <rect
-            class="flow-surface"
             :x="-svgRectWidth / 2"
             :y="-svgSize.circleRadius"
             :width="svgRectWidth"
@@ -863,7 +848,6 @@ const labelClipPath = computed(() => {
             :transform="`translate(${svgSize.circleRadius - svgRectWidth / 2}, 0)`"
           >
             <circle
-              class="flow-surface"
               cx="0"
               cy="0"
               :r="iconCircleRadius"
@@ -1047,24 +1031,12 @@ rect {
   fill: var(--q-card-background);
 }
 
-/* the spec's `inset 0 0 0 1px` hairline; 1px is ~0.15 SVG units */
-.flow-surface {
-  stroke: var(--q-flow-chart-hairline);
-  stroke-width: 0.15;
-}
-
-/* Shadow colors via an SVG filter rather than CSS filter: drop-shadow, for
-   browser compatibility (safari webkit) */
-feFlood.cast {
+/* Drop shadow by way of feDropShadow for browser compatibility (safari webkit) */
+feDropShadow {
   flood-color: var(--q-flow-chart-shadow);
   flood-opacity: var(--q-flow-chart-shadow-opacity);
 }
 
-feFlood.highlight {
-  flood-color: var(--q-flow-chart-highlight);
-  flood-opacity: var(--q-flow-chart-highlight-opacity);
-}
-
 text {
   font-size: v-bind(svgFontSize);
   line-height: 1.25;
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 135b9295fe..4cf374c2c5 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -58,12 +58,9 @@ $diagram-icon: #717171;
 $table-hover: #f9f8f8;
 // history chart and daily totals cards (--q-shadow stays for everything else)
 $chart-shadow: $secondary;
-// energy flow chart: cast shadow, opposing highlight and inset hairline
+// energy flow chart: shadow behind the pills and the icon circles
 $flow-chart-shadow: #000000;
 $flow-chart-shadow-opacity: 0.12;
-$flow-chart-highlight: $white;
-$flow-chart-highlight-opacity: 0.9;
-$flow-chart-hairline: #{rgba($white, 0.05)};
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -82,9 +79,6 @@ $flow-chart-hairline: #{rgba($white, 0.05)};
   --q-chart-shadow: #{$chart-shadow};
   --q-flow-chart-shadow: #{$flow-chart-shadow};
   --q-flow-chart-shadow-opacity: #{$flow-chart-shadow-opacity};
-  --q-flow-chart-highlight: #{$flow-chart-highlight};
-  --q-flow-chart-highlight-opacity: #{$flow-chart-highlight-opacity};
-  --q-flow-chart-hairline: #{$flow-chart-hairline};
   --q-text: #{$light-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
@@ -244,13 +238,9 @@ $dark-secondary: #3b3b3d; //cards - tabs background tables
 $dark-shadow: #7a7c80; // shadow color for dark theme
 // history chart and daily totals cards (--q-shadow stays for everything else)
 $dark-chart-shadow: #000000;
-// energy flow chart: values taken directly from the design spec
-// (-4px -4px 9px highlight, 5px 5px 12px cast, inset 0 0 0 1px hairline)
+// energy flow chart: shadow behind the pills and the icon circles
 $dark-flow-chart-shadow: #000000;
 $dark-flow-chart-shadow-opacity: 0.45;
-$dark-flow-chart-highlight: $white;
-$dark-flow-chart-highlight-opacity: 0.06;
-$dark-flow-chart-hairline: #{rgba($white, 0.05)};
 $dark-accent: #546e7a;
 $dark-positive: #3e8f5e;
 $dark-negative: #c54d57;
@@ -288,9 +278,6 @@ $dark-table-hover: #ffffff12;
   --q-chart-shadow: #{$dark-chart-shadow};
   --q-flow-chart-shadow: #{$dark-flow-chart-shadow};
   --q-flow-chart-shadow-opacity: #{$dark-flow-chart-shadow-opacity};
-  --q-flow-chart-highlight: #{$dark-flow-chart-highlight};
-  --q-flow-chart-highlight-opacity: #{$dark-flow-chart-highlight-opacity};
-  --q-flow-chart-hairline: #{$dark-flow-chart-hairline};
   --q-text: #{$dark-text};
   --q-white: #{$white};
   --q-grey: #{$grey};