From 16e6c4fa5665fcfb98a006c2d8fa20cbf39dd96f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 4 Dec 2025 15:48:40 +0100
Subject: [PATCH 01/14] add secondary counters to daily totals slide if
 configured

---
 .../koala/source/public/icons/owbCounter.svg  |  1 +
 .../source/src/components/DailyTotals.vue     | 96 ++++++++++++++++++-
 .../source/src/css/quasar.variables.scss      | 29 ++++++
 .../koala/source/src/stores/mqtt-store.ts     |  8 +-
 4 files changed, 125 insertions(+), 9 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/public/icons/owbCounter.svg

diff --git a/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg b/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg
new file mode 100644
index 0000000000..8a8f271fce
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M686.606225 510.524392 517.747399 638.968763c-2.403746-0.198521-4.801353-0.401136-7.206122-0.401136-35.411511 0-64.020082 28.613688-64.020082 64.028269 0 35.410488 28.608571 64.021106 64.020082 64.021106 35.414581 0 64.028269-28.609595 64.028269-64.021106 0-2.403746-0.200568-4.801353-0.401136-7.206122l128.444371-168.859849L686.606225 510.524392 686.606225 510.524392zM686.606225 510.524392"  /><path d="M510.541277 190.410678c-247.484557 0-448.155926 200.672392-448.155926 448.157973 0 68.828598 15.60542 133.852544 43.214221 192.07048l72.226998 0c-30.810726-53.217039-48.414663-113.238041-51.017954-176.063925l63.61997 0 0-32.006971-63.61997 0c2.4017-57.623395 17.407462-113.044636 43.61331-162.862251l55.020104 31.813566 16.007579-27.812439-55.020104-31.608905c14.805194-23.210631 32.414247-45.216831 52.420907-65.22349 20.406772-20.207227 42.61354-38.015825 66.220191-53.021587l31.611975 54.618968 27.813462-16.001439-31.614022-54.618968c49.618071-26.010397 104.437607-40.615023 161.66089-43.018769l0 63.620993 32.006971 0 0-63.620993c57.222259 2.402723 112.041796 17.207917 161.659867 43.018769l-31.41243 54.618968 27.812439 16.001439 31.608905-54.618968c23.611767 15.005762 45.816488 32.81436 66.224284 53.021587 20.007683 20.006659 37.415145 41.812291 52.42193 65.22349l-54.819536 31.608905 16.002462 27.812439 55.020104-31.813566c26.209942 49.817616 41.215704 105.239879 43.618427 162.862251l-64.026222 0 0 32.006971 63.627133 0c-2.604314 62.825884-20.207227 122.846886-51.018977 176.063925l72.222905 0c27.611871-58.21896 43.218314-123.242905 43.218314-192.07048C958.70539 391.08307 758.034021 190.410678 510.541277 190.410678L510.541277 190.410678zM510.541277 190.410678"  /></svg>
diff --git a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
index 508376bb91..354f2fd355 100644
--- a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
@@ -26,7 +26,14 @@
         <template #body="props">
           <q-tr
             :props="props"
-            :class="props.row.id"
+            @click="
+              props.row.id === 'grid' ? (gridExpanded = !gridExpanded) : null
+            "
+            :class="[
+              props.row.id,
+              String(props.row.id).startsWith('counter-') ? 'grid' : '',
+              props.row.id === 'grid' ? 'cursor-pointer' : '',
+            ]"
           >
             <q-td key="icon" :props="props">
               <img
@@ -43,7 +50,15 @@
               :props="props"
               class="text-weight-bold"
             >
-              {{ props.row.title }}
+              <div class="row items-center no-wrap">
+                <span>{{ props.row.title }}</span>
+                <q-icon
+                  v-if="props.row.id === 'grid' && secondaryCounterConfigured "
+                  class="q-ml-xs"
+                  :name="gridExpanded ? 'expand_less' : 'expand_more'"
+                  size="24px"
+                />
+              </div>
             </q-td>
 
             <q-td
@@ -150,6 +165,7 @@ import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
 
 const $q = useQuasar();
 const mqttStore = useMqttStore();
+const gridExpanded = ref(false);
 
 const iconSize = ref(28);
 
@@ -206,6 +222,9 @@ const socValueVisible = computed(() => $q.screen.width >= 700);
 
 const batteryConfigured = computed(() => mqttStore.batteryConfigured);
 const pvConfigured = computed(() => mqttStore.getPvConfigured);
+const secondaryCounterConfigured = computed(
+  () => mqttStore.getSecondaryCounterIds.length > 0,
+);
 const chargePointConfigured = computed(
   () => mqttStore.chargePointIds.length > 0,
 );
@@ -225,6 +244,22 @@ const rows = computed((): DailyTotalsItem[] => {
     },
   });
 
+  if (gridExpanded.value) {
+    mqttStore.getSecondaryCounterIds.forEach((id) => {
+      components.push({
+        id: `counter-${id}`,
+        title: mqttStore.getComponentName(id),
+        icon: 'icons/owbCounter.svg',
+        power: mqttStore.getGridPower('textValue', id) as string,
+        powerValue: mqttStore.getGridPower('value', id) as number,
+        today: {
+          imported: 'test',
+          exported: 'test2',
+        },
+      });
+    });
+  }
+
   if (batteryConfigured.value) {
     components.push({
       id: 'battery',
@@ -388,16 +423,67 @@ watch(rows, calculateRowHeight, { deep: true });
 .banner-table :deep(.q-table__middle) {
   background: var(--q-background-2) !important;
 }
-
+/* grid */
 .grid {
-  background: #d5bbc0;
+  background: var(--q-grid-fill);
 }
+
+.banner-table :deep(tbody tr.grid) td {
+  border-top: 2px solid var(--q-grid-stroke);
+  border-bottom: 2px solid var(--q-grid-stroke);
+}
+.banner-table :deep(tbody tr.grid) td:first-child {
+  border-left: 2px solid var(--q-grid-stroke);
+}
+.banner-table :deep(tbody tr.grid) td:last-child {
+  border-right: 2px solid var(--q-grid-stroke);
+}
+
 .body--dark .grid {
   background: #a13a41;
 }
 
+/* secondary counter */
+[class^='counter-'],
+[class*=' counter-'] {
+  background: var(--q-secondary-counter-fill);
+}
+
+.banner-table :deep(tbody tr[class*='counter-']) td {
+  border-top: 2px solid var(--q-secondary-counter-stroke);
+  border-bottom: 2px solid var(--q-secondary-counter-stroke);
+}
+.banner-table :deep(tbody tr[class*='counter-']) td:first-child {
+  border-left: 2px solid var(--q-secondary-counter-stroke);
+}
+.banner-table :deep(tbody tr[class*='counter-']) td:last-child {
+  border-right: 2px solid var(--q-secondary-counter-stroke);
+}
+
+
+
+/*  [class^='counter-'] {
+  background: #d5bbc0;
+}
+.body--dark [class^='counter-'] {
+  background: #a13a41;
+} */
+
+
+/* battery */
 .battery {
-  background: #c7a388;
+  background: var(--q-battery-fill);
+}
+
+.banner-table :deep(tbody tr.battery) td {
+  border-top: 2px solid var(--q-battery-stroke);
+  border-bottom: 2px solid var(--q-battery-stroke);
+}
+.banner-table :deep(tbody tr.battery) td:first-child {
+  border-left: 2px solid var(--q-battery-stroke);
+}
+.banner-table :deep(tbody tr.battery) td:last-child {
+  border-right: 2px solid var(--q-battery-stroke);
 }
 .body--dark .battery {
   background: #b97a1f;
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 286da62c15..598d8eb5bd 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
@@ -35,7 +35,19 @@ $brown-text: #524f57;
 $white: #ffffff;
 $grey: #9e9e9e; // Quasar's default grey
 $toggle-off: #e0e0e0;
+$grid-stroke: #a33c42;
+$grid-fill: #efb6bc33;
+$secondary-counter-stroke: #FFA9A8;
+$secondary-counter-fill: #FFA9A833;
+$home-stroke: #949aa1;
+$home-fill: #949aa133;
+$pv-stroke: #66bd7a;
+$pv-fill: #90ee9033;
 $battery: #ba7128;
+$battery-stroke: #ba7128;
+$battery-fill: #ba712833;
+$charge-point-stroke: #5c93d1;
+$charge-point-fill: #5c93d14D;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -54,6 +66,20 @@ $battery: #ba7128;
   --q-toggle-off: #{$toggle-off};
   --q-flow-home-stroke: #{$grey};
   --q-battery: #{$battery};
+  --q-grid-fill: #{$grid-fill};
+  --q-grid-stroke: #{$grid-stroke};
+  --q-home-fill: #{$home-fill};
+  --q-home-stroke: #{$home-stroke};
+  --q-secondary-counter-stroke: #{$secondary-counter-stroke};
+  --q-secondary-counter-fill: #{$secondary-counter-fill};
+  --q-pv-stroke: #{$pv-stroke};
+  --q-pv-fill: #{$pv-fill};
+  --q-battery-stroke: #{$battery-stroke};
+  --q-battery-fill: #{$battery-fill};
+  --q-charge-point-stroke: #{$charge-point-stroke};
+  --q-charge-point-fill: #{$charge-point-fill};
+
+
   // Main background
   background-color: var(--q-background-1);
   // Text color
@@ -251,6 +277,9 @@ $dark-tab-icon: #d7d9e0;
   --q-tab-icon: #{$dark-tab-icon};
   --q-flow-home-stroke: #{$grey};
   --q-battery: #{$dark-warning};
+  --q-grid-stroke: #{$grid-stroke};
+  --q-grid-fill: #{$grid-fill};
+
   // Main background
   background-color: $dark-page;
   // Text color
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index bad1ca5fcf..dfcb0697d9 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3343,14 +3343,14 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @returns string | number | ValueObject | undefined
    */
   const getGridPower = computed(() => {
-    return (returnType: string = 'textValue') => {
-      const gridId = getGridId.value;
-      if (gridId === undefined) {
+    return (returnType: string = 'textValue', counterId?: number) => {
+      const id = counterId ?? getGridId.value;
+      if (id === undefined) {
         return '---';
       }
       const power =
         (getValue.value(
-          `openWB/counter/${gridId}/get/power`,
+          `openWB/counter/${id}/get/power`,
           undefined,
           0,
         ) as number) || 0;

From ffc16c956f78254f9763adac0c9eed67e8c4ba98 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 5 Dec 2025 17:09:08 +0100
Subject: [PATCH 02/14] Grid component as expansion item - Standardize colors
 (chart, energy-flow, daily-totals)

---
 .../source/src/components/DailyTotals.vue     | 647 ++++++++----------
 .../energyFlowChart/EnergyFlowChart.vue       |  61 +-
 .../charts/historyChart/HistoryChart.vue      |  31 +-
 .../source/src/css/quasar.variables.scss      |  17 +-
 .../koala/source/src/stores/mqtt-store.ts     |  37 +-
 5 files changed, 351 insertions(+), 442 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
index 354f2fd355..25dd3bfb76 100644
--- a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
@@ -1,264 +1,232 @@
 <template>
-  <div
-    class="flex column items-center justify-center container"
-    ref="rootRef"
-    :style="{ '--row-h': rowHeight + 'px' }"
-  >
-    <div class="centered-panel">
-      <div
-        class="flex justify-between text-subtitle1 text-weight-bold full-width"
-        ref="titleRef"
-      >
-        <div v-if="currentPowerVisible">Aktuelle Leistung</div>
-        <div>Tageswerte</div>
-      </div>
-      <q-table
-        flat
-        :rows="rows"
-        :columns="columns"
-        row-key="id"
-        hide-header
-        hide-bottom
-        dense
-        separator="none"
-        class="banner-table theme-text"
-      >
-        <template #body="props">
-          <q-tr
-            :props="props"
-            @click="
-              props.row.id === 'grid' ? (gridExpanded = !gridExpanded) : null
-            "
-            :class="[
-              props.row.id,
-              String(props.row.id).startsWith('counter-') ? 'grid' : '',
-              props.row.id === 'grid' ? 'cursor-pointer' : '',
-            ]"
+  <div class="daily-root">
+    <div class="daily-center">
+      <div class="daily-scroll-wrapper">
+        <div class="daily-scroll">
+          <div
+            class="flex justify-between text-subtitle1 text-weight-bold q-mb-xs"
+          >
+            <div v-if="currentPowerVisible">Aktuelle Leistung</div>
+            <div>Tageswerte</div>
+          </div>
+          <q-expansion-item
+            dense
+            expand-separator
+            v-model="gridExpanded"
+            class="grid q-mb-xs"
+            header-class="cursor-pointer"
           >
-            <q-td key="icon" :props="props">
+            <!-- grid header -->
+            <template #header>
+              <div class="row items-center full-width no-wrap">
+                <img
+                  :src="gridData.icon"
+                  class="icon q-mr-sm"
+                  :style="{ width: iconSize + 'px', height: iconSize + 'px' }"
+                />
+                <div
+                  v-if="componentNameVisible"
+                  class="text-weight-bold q-mr-sm"
+                >
+                  {{ gridData.title }}
+                </div>
+                <div
+                  class="row items-center q-mr-sm"
+                  v-if="currentPowerVisible"
+                >
+                  <q-icon
+                    :name="
+                      arrowDirection('grid').noCurrent
+                        ? 'horizontal_rule'
+                        : 'double_arrow'
+                    "
+                    :class="{ 'rotate-180': arrowDirection('grid').rotate180 }"
+                  />
+                  <span class="q-ml-xs">
+                    {{ String(gridData.power).replace('-', '') }}
+                  </span>
+                </div>
+
+                <div class="col"></div>
+
+                <div class="text-right text-weight-bold">
+                  <div>Bezug: {{ gridData.today.imported }}</div>
+                  <div>Einspeisung: {{ gridData.today.exported }}</div>
+                </div>
+              </div>
+            </template>
+            <!-- secondary counters -->
+            <div
+              v-for="item in secondaryCounterData"
+              :key="item.id"
+              class="counter"
+            >
+              <div class="row items-center full-width no-wrap">
+                <img
+                  src="icons/owbCounter.svg"
+                  class="icon q-mr-sm"
+                  :style="{ width: iconSize + 'px', height: iconSize + 'px' }"
+                />
+                <div
+                  v-if="componentNameVisible"
+                  class="text-weight-bold q-mr-sm"
+                >
+                  {{ item.title }}
+                </div>
+                <div
+                  class="row items-center q-mr-sm"
+                  v-if="currentPowerVisible"
+                >
+                  <q-icon
+                    :name="
+                      arrowDirection(item.id).noCurrent
+                        ? 'horizontal_rule'
+                        : 'double_arrow'
+                    "
+                    :class="{
+                      'rotate-180': arrowDirection(item.id).rotate180,
+                    }"
+                  />
+                  <span class="q-ml-xs">
+                    {{ String(item.power).replace('-', '') }}
+                  </span>
+                </div>
+
+                <div class="col"></div>
+
+                <div class="text-right text-weight-bold">
+                  <div>Bezug: {{ item.today.imported }}</div>
+                  <div>Einspeisung: {{ item.today.exported }}</div>
+                </div>
+              </div>
+            </div>
+          </q-expansion-item>
+
+          <!-- all other components -->
+          <q-card
+            v-for="item in componentData"
+            :key="item.id"
+            class="q-card q-mb-xs"
+            :class="item.id"
+            flat
+            bordered
+          >
+            <q-card-section class="row items-center full-width no-wrap">
               <img
-                :src="props.row.icon"
-                :alt="props.row.title"
-                class="icon"
+                :src="item.icon"
+                class="icon q-mr-sm"
                 :style="{ width: iconSize + 'px', height: iconSize + 'px' }"
               />
-            </q-td>
-
-            <q-td
-              v-if="componentNameVisible"
-              key="title"
-              :props="props"
-              class="text-weight-bold"
-            >
-              <div class="row items-center no-wrap">
-                <span>{{ props.row.title }}</span>
-                <q-icon
-                  v-if="props.row.id === 'grid' && secondaryCounterConfigured "
-                  class="q-ml-xs"
-                  :name="gridExpanded ? 'expand_less' : 'expand_more'"
-                  size="24px"
-                />
+              <div v-if="componentNameVisible" class="text-weight-bold q-mr-sm">
+                {{ item.title }}
               </div>
-            </q-td>
-
-            <q-td
-              v-if="socValueVisible"
-              key="soc"
-              :props="props"
-              class="text-right"
-            >
-              <span v-if="props.row.id === 'battery'"
-                >{{ props.row.soc }}%</span
+              <div
+                v-if="socValueVisible && item.id === 'battery'"
+                class="q-mr-sm"
               >
-            </q-td>
-
-            <q-td v-if="currentPowerVisible" key="arrow" :props="props">
-              <q-icon
-                :name="
-                  props.row.id === 'house'
-                    ? 'horizontal_rule'
-                    : arrowDirection(props.row.id).noCurrent
+                {{ item.soc }}%
+              </div>
+              <div class="row items-center q-mr-sm" v-if="currentPowerVisible">
+                <q-icon
+                  :name="
+                    arrowDirection(item.id).noCurrent
                       ? 'horizontal_rule'
                       : 'double_arrow'
-                "
-                :class="{
-                  'rotate-180': arrowDirection(props.row.id).rotate180,
-                }"
-              />
-            </q-td>
-
-            <q-td
-              v-if="currentPowerVisible"
-              key="power"
-              :props="props"
-              class="text-right"
-            >
-              {{ String(props.row.power).replace('-', '') }}
-            </q-td>
-
-            <!-- Gap column stretches -->
-            <q-td key="gap" :props="props"></q-td>
-
-            <q-td
-              key="rightLabel"
-              :props="props"
-              class="text-right text-weight-bold"
-            >
-              <template
-                v-if="['battery', 'chargepoint'].includes(props.row.id)"
-              >
-                <div>Geladen:</div>
-                <div>Entladen:</div>
-              </template>
-              <template v-else-if="props.row.id === 'grid'">
-                <div>Bezug:</div>
-                <div>Einspeisung:</div>
-              </template>
-              <template v-else-if="props.row.id === 'pv'">
-                <div>Ertrag:</div>
-              </template>
-              <template v-else-if="props.row.id === 'house'">
-                <div>Verbrauch:</div>
-              </template>
-            </q-td>
-
-            <q-td key="rightValue" :props="props">
-              <div
-                v-if="
-                  ['battery', 'grid', 'house', 'chargepoint'].includes(
-                    props.row.id,
-                  )
-                "
-              >
-                {{ props.row.today.imported }}
+                  "
+                  :class="{ 'rotate-180': arrowDirection(item.id).rotate180 }"
+                />
+                <span class="q-ml-xs">
+                  {{ String(item.power).replace('-', '') }}
+                </span>
               </div>
-              <div
-                v-if="
-                  ['battery', 'grid', 'pv', 'chargepoint'].includes(
-                    props.row.id,
-                  )
-                "
-              >
-                {{ props.row.today.exported }}
+              <div class="col"></div>
+              <div class="text-right text-weight-bold">
+                <div v-if="item.id !== 'pv' && item.id !== 'house'">
+                  Geladen:
+                  {{ item.today.imported }}
+                </div>
+                <div v-if="item.id !== 'pv' && item.id !== 'house'">
+                  Entladen:
+                  {{ item.today.exported }}
+                </div>
+                <div v-if="item.id === 'pv'">
+                  Ertrag:
+                  {{ item.today.exported }}
+                </div>
+                <div v-if="item.id === 'house'">
+                  Ertrag:
+                  {{ item.today.imported }}
+                </div>
               </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </q-table>
+            </q-card-section>
+          </q-card>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-  watch,
-} from 'vue';
+import { computed, ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import type { QTableColumn } from 'quasar';
 import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
 
 const $q = useQuasar();
 const mqttStore = useMqttStore();
-const gridExpanded = ref(false);
 
+const gridExpanded = ref(false);
 const iconSize = ref(28);
 
-const columns: QTableColumn<DailyTotalsItem>[] = [
-  {
-    name: 'icon',
-    label: '',
-    field: 'icon',
-    align: 'left',
-    style: 'width:32px;',
-  },
-  {
-    name: 'title',
-    label: '',
-    field: 'title',
-    align: 'left',
-    style: 'width:80px;',
-  },
-  { name: 'soc', label: '', field: 'soc', align: 'right', style: 'width:6px;' },
-  {
-    name: 'arrow',
-    label: '',
-    field: 'arrow',
-    align: 'center',
-    style: 'width:24px;',
-  },
-  {
-    name: 'power',
-    label: '',
-    field: 'power',
-    align: 'right',
-    style: 'width:20px;',
-  },
-  { name: 'gap', label: '', field: 'gap', align: 'left', style: 'width:auto;' },
-  {
-    name: 'rightLabel',
-    label: '',
-    field: 'rightLabel',
-    align: 'right',
-    style: 'width:100px;',
-  },
-  {
-    name: 'rightValue',
-    label: '',
-    field: 'rightValue',
-    align: 'right',
-    style: 'width:70px;',
-  },
-];
-
 const componentNameVisible = computed(() => $q.screen.width >= 375);
 const currentPowerVisible = computed(() => $q.screen.width >= 500);
 const socValueVisible = computed(() => $q.screen.width >= 700);
 
 const batteryConfigured = computed(() => mqttStore.batteryConfigured);
 const pvConfigured = computed(() => mqttStore.getPvConfigured);
-const secondaryCounterConfigured = computed(
-  () => mqttStore.getSecondaryCounterIds.length > 0,
-);
 const chargePointConfigured = computed(
   () => mqttStore.chargePointIds.length > 0,
 );
+const secondaryCountersConfigured = computed(
+  () => mqttStore.getSecondaryCounterIds.length > 0,
+);
 
-const rows = computed((): DailyTotalsItem[] => {
-  const components: DailyTotalsItem[] = [];
-
-  components.push({
+const gridData = computed((): DailyTotalsItem => {
+  return {
     id: 'grid',
     title: 'Netz',
     icon: 'icons/owbGrid.svg',
-    power: mqttStore.getGridPower('textValue') as string,
-    powerValue: mqttStore.getGridPower('value') as number,
+    power: mqttStore.getCounterPower('textValue') as string,
+    powerValue: mqttStore.getCounterPower('value') as number,
     today: {
-      imported: mqttStore.gridDailyImported('textValue') as string,
-      exported: mqttStore.gridDailyExported('textValue') as string,
+      imported: mqttStore.counterDailyImported('textValue') as string,
+      exported: mqttStore.counterDailyExported('textValue') as string,
     },
-  });
+  };
+});
 
-  if (gridExpanded.value) {
+const secondaryCounterData = computed((): DailyTotalsItem[] => {
+  const counters: DailyTotalsItem[] = [];
+  if (gridExpanded.value && secondaryCountersConfigured.value) {
     mqttStore.getSecondaryCounterIds.forEach((id) => {
-      components.push({
+      counters.push({
         id: `counter-${id}`,
         title: mqttStore.getComponentName(id),
         icon: 'icons/owbCounter.svg',
-        power: mqttStore.getGridPower('textValue', id) as string,
-        powerValue: mqttStore.getGridPower('value', id) as number,
+        power: mqttStore.getCounterPower('textValue', id) as string,
+        powerValue: mqttStore.getCounterPower('value', id) as number,
         today: {
-          imported: 'test',
-          exported: 'test2',
+          imported: mqttStore.counterDailyImported('textValue', id) as string,
+          exported: mqttStore.counterDailyExported('textValue', id) as string,
         },
       });
     });
   }
+  return counters;
+});
+
+const componentData = computed((): DailyTotalsItem[] => {
+  const components: DailyTotalsItem[] = [];
 
   if (batteryConfigured.value) {
     components.push({
@@ -312,200 +280,141 @@ const rows = computed((): DailyTotalsItem[] => {
   return components;
 });
 
-const getArrowDirection = computed(() =>
-  rows.value.map((item) => {
-    let rotate = false;
-    let noCurrent = false;
-    if (item.powerValue === 0) noCurrent = true;
-    if (item.id === 'grid') {
-      rotate = Number(item.powerValue) < 0;
-    } else {
-      rotate = Number(item.powerValue) > 0;
-    }
-    return { id: item.id, rotate180: rotate, noCurrent };
-  }),
-);
-
-const arrowDirection = (itemId: string) =>
-  getArrowDirection.value.find((component) => component.id === itemId) ?? {
-    rotate180: false,
-    noCurrent: false,
-  };
-
-const rootRef = ref<HTMLElement | null>(null);
-const titleRef = ref<HTMLElement | null>(null);
-const rowHeight = ref(44);
-
-let slideElement: HTMLElement | null = null;
-let slideObserver: ResizeObserver | null = null;
-
-function getSlideElement(): HTMLElement | null {
-  return rootRef.value?.closest('.q-carousel__slide') as HTMLElement | null;
-}
-
-const calculateRowHeight = () => {
-  nextTick(() => {
-    const slide = slideElement ?? getSlideElement();
-    if (!slide) return;
-    const style = window.getComputedStyle(slide);
-    const paddings =
-      parseFloat(style.paddingTop || '0') +
-      parseFloat(style.paddingBottom || '0');
-    const totalHeight = slide.clientHeight - paddings;
-    const titleHeight = titleRef.value?.offsetHeight ?? 0;
-    const verticalGaps = (rows.value.length - 1) * 3;
-    const safetyPadding = 12;
-    const availableHeight = Math.max(
-      0,
-      totalHeight - titleHeight - verticalGaps - safetyPadding,
-    );
-    const rowCount = Math.max(1, rows.value.length);
-    const ROW_MIN = 36;
-    const ROW_MAX = 65;
-    rowHeight.value = Math.max(
-      ROW_MIN,
-      Math.min(ROW_MAX, Math.floor(availableHeight / rowCount)),
-    );
-  });
-};
+const arrowDirection = (id: string) => {
+  let value = 0;
+  switch (id) {
+    case 'grid':
+      value = mqttStore.getCounterPower('value') as number;
+      break;
+    case 'battery':
+      value = mqttStore.batteryTotalPower('value') as number;
+      break;
+    case 'pv':
+      value = mqttStore.getPvPower('value') as number;
+      break;
+    case 'house':
+      value = mqttStore.getHomePower('value') as number;
+      break;
+    case 'chargepoint':
+      value = mqttStore.chargePointSumPower('value') as number;
+      break;
+    default:
+      if (id.startsWith('counter-')) {
+        const counterId = Number(id.replace('counter-', ''));
+        value = mqttStore.getCounterPower('value', counterId) as number;
+      }
+  }
+  const noCurrent = value === 0;
+  let rotate180 = false;
 
-onMounted(() => {
-  slideElement = getSlideElement();
-  // Observe slide size changes (e.g. viewport resize, fullscreen, layout shifts)
-  if (slideElement) {
-    slideObserver = new ResizeObserver(calculateRowHeight);
-    slideObserver.observe(slideElement);
+  if (id === 'grid') {
+    rotate180 = value < 0;
+  } else if (id !== 'house') {
+    rotate180 = value > 0;
   }
-  // Fallback: also listen to window resize
-  window.addEventListener('resize', calculateRowHeight, { passive: true });
-  calculateRowHeight();
-});
 
-onBeforeUnmount(() => {
-  slideObserver?.disconnect();
-  slideObserver = null;
-  window.removeEventListener('resize', calculateRowHeight);
-});
-// Recompute when number of rows changes (components shown/hidden)
-watch(rows, calculateRowHeight, { deep: true });
+  return { noCurrent, rotate180 };
+};
 </script>
 
 <style scoped>
-.container {
-  min-height: 100%;
-  overflow-y: auto;
-}
-
-.centered-panel {
+/* fills the carousel slide */
+.daily-root {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+/* fixed-width column */
+.daily-center {
+  width: 100%;
   max-width: 600px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+/* wrapper */
+.daily-scroll-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden; /* clips scroll div */
+}
+/* scrolling area */
+.daily-scroll {
   width: 100%;
+  max-height: 100%; /* allows scrolling when needed */
+  overflow-y: auto;
 }
 
-.banner-table :deep(.q-table__middle table) {
-  border-collapse: separate;
-  border-spacing: 0 3px; /* vertical gap between “cards” */
+/* Hide expansion item chevron */
+:deep(.q-expansion-item__toggle-icon) {
+  display: none !important;
 }
 
-.banner-table :deep(tbody tr) {
-  height: var(--row-h);
+/* make padding same as cards inside expansion header */
+:deep(.q-expansion-item__container .q-item) {
+  padding: 3px 8px !important;
 }
 
-.banner-table :deep(tbody td:first-child) {
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-}
-.banner-table :deep(tbody td:last-child) {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
+/* Remove the padding inside q-item__section */
+:deep(.q-item__section) {
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
-.banner-table :deep(.q-table__container),
-.banner-table :deep(.q-table__middle) {
-  background: var(--q-background-2) !important;
-}
-/* grid */
-.grid {
-  background: var(--q-grid-fill);
+/* Apply same padding to Q-card */
+:deep(.q-card__section) {
+  padding: 3px 8px !important;
+  min-height: 48px;
 }
 
-.banner-table :deep(tbody tr.grid) td {
-  border-top: 2px solid var(--q-grid-stroke);
-  border-bottom: 2px solid var(--q-grid-stroke);
-}
-.banner-table :deep(tbody tr.grid) td:first-child {
-  border-left: 2px solid var(--q-grid-stroke);
-}
-.banner-table :deep(tbody tr.grid) td:last-child {
-  border-right: 2px solid var(--q-grid-stroke);
+.q-card {
+  border-radius: 8px;
 }
 
-.body--dark .grid {
-  background: #a13a41;
+.grid {
+  border-radius: 8px;
+  background: var(--q-grid-fill);
+  border: 2px solid var(--q-grid-stroke);
 }
 
-/* secondary counter */
-[class^='counter-'],
-[class*=' counter-'] {
+.counter {
+  border-radius: 8px;
+  padding: 3px 8px;
   background: var(--q-secondary-counter-fill);
+  border: 2px solid var(--q-secondary-counter-stroke);
 }
-
-.banner-table :deep(tbody tr[class*='counter-']) td {
-  border-top: 2px solid var(--q-secondary-counter-stroke);
-  border-bottom: 2px solid var(--q-secondary-counter-stroke);
-}
-.banner-table :deep(tbody tr[class*='counter-']) td:first-child {
-  border-left: 2px solid var(--q-secondary-counter-stroke);
-}
-.banner-table :deep(tbody tr[class*='counter-']) td:last-child {
-  border-right: 2px solid var(--q-secondary-counter-stroke);
-}
-
-
-
-/*  [class^='counter-'] {
-  background: #d5bbc0;
-}
-.body--dark [class^='counter-'] {
-  background: #a13a41;
-} */
-
-
-/* battery */
 .battery {
   background: var(--q-battery-fill);
+  border: 2px solid var(--q-battery-stroke);
 }
-
-.banner-table :deep(tbody tr.battery) td {
-  border-top: 2px solid var(--q-battery-stroke);
-  border-bottom: 2px solid var(--q-battery-stroke);
+.pv {
+  background: var(--q-pv-fill);
+  border: 2px solid var(--q-pv-stroke);
+}
+.house {
+  background: var(--q-home-fill);
+  border: 2px solid var(--q-home-stroke);
 }
-.banner-table :deep(tbody tr.battery) td:first-child {
-  border-left: 2px solid var(--q-battery-stroke);
+.chargepoint {
+  background: var(--q-charge-point-fill);
+  border: 2px solid var(--q-charge-point-stroke);
 }
-.banner-table :deep(tbody tr.battery) td:last-child {
-  border-right: 2px solid var(--q-battery-stroke);
+
+.body--dark .grid {
+  background: #a13a41 !important;
+  border: 2px solid #da959a;
 }
 .body--dark .battery {
   background: #b97a1f;
-}
-
-.pv {
-  background: #b3ccbc;
+  border: 2px solid #e7c08a;
 }
 .body--dark .pv {
   background: #27623a;
 }
-
-.house {
-  background: #bababf;
-}
 .body--dark .house {
   background: #6e6e6e;
 }
-
-.chargepoint {
-  background: #b1c0d6;
-}
 .body--dark .chargepoint {
   background: #254a8c;
 }
@@ -520,10 +429,4 @@ watch(rows, calculateRowHeight, { deep: true });
 .rotate-180 {
   transform: rotate(180deg);
 }
-
-@media (min-width: 500px) {
-  .banner-table tbody td {
-    font-size: 15px;
-  }
-}
 </style>
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 c3f0dc85f4..ea1200dd8a 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
@@ -49,7 +49,7 @@ const absoluteValueObject = (valueObject: ValueObject): ValueObject => {
 };
 
 const gridPower = computed(
-  () => mqttStore.getGridPower('object') as ValueObject,
+  () => mqttStore.getCounterPower('object') as ValueObject,
 );
 const gridConsumption = computed(() => Number(gridPower.value.value) > 0);
 const gridFeedIn = computed(() => Number(gridPower.value.value) < 0);
@@ -286,18 +286,9 @@ const animationDurations = computed(() => {
     home: calcDuration(Number(homePower.value.value), maxPower),
     pv: calcDuration(Number(pvPower.value.value), maxPower),
     battery: calcDuration(Number(batteryPower.value.value), maxPower),
-    chargePoint1: calcDuration(
-      Number(chargePoint1Power.value.value),
-      maxPower,
-    ),
-    chargePoint2: calcDuration(
-      Number(chargePoint2Power.value.value),
-      maxPower,
-    ),
-    chargePoint3: calcDuration(
-      Number(chargePoint3Power.value.value),
-      maxPower,
-    ),
+    chargePoint1: calcDuration(Number(chargePoint1Power.value.value), maxPower),
+    chargePoint2: calcDuration(Number(chargePoint2Power.value.value), maxPower),
+    chargePoint3: calcDuration(Number(chargePoint3Power.value.value), maxPower),
     chargePointSum: calcDuration(
       Number(chargePointSumPower.value.value),
       maxPower,
@@ -837,7 +828,7 @@ path.animatedReverse.grid {
 
 path.animated.home,
 path.animatedReverse.home {
-  stroke: var(--q-flow-home-stroke);
+  stroke: var(--q-home-stroke);
   animation-duration: v-bind('animationDurations.home');
 }
 
@@ -849,28 +840,28 @@ path.animatedReverse.pv {
 
 path.animated.battery,
 path.animatedReverse.battery {
-  stroke: var(--q-warning);
+  stroke: var(--q-battery-stroke);
   animation-duration: v-bind('animationDurations.battery');
 }
 
 path.animated.charge-point-1,
 path.animatedReverse.charge-point-1 {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
   animation-duration: v-bind('animationDurations.chargePoint1');
 }
 path.animated.charge-point-2,
 path.animatedReverse.charge-point-2 {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
   animation-duration: v-bind('animationDurations.chargePoint2');
 }
 path.animated.charge-point-3,
 path.animatedReverse.charge-point-3 {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
   animation-duration: v-bind('animationDurations.chargePoint3');
 }
 path.animated.charge-point-sum,
 path.animatedReverse.charge-point-sum {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
   animation-duration: v-bind('animationDurations.chargePointSum');
 }
 
@@ -909,7 +900,7 @@ path.animatedReverse.vehicle-3 {
 
 :root {
   path.home {
-    stroke: var(--q-grey);
+    stroke: var(--q-home-stroke);
   }
 }
 
@@ -958,7 +949,7 @@ text .fill-success {
 }
 
 text .fill-danger {
-  fill: var(--q-negative);
+  fill: var(--q-grid-stroke);
 }
 
 text .fill-dark {
@@ -966,42 +957,42 @@ text .fill-dark {
 }
 
 .grid text {
-  fill: var(--q-negative);
+  fill: var(--q-grid-stroke);
 }
 
 .grid circle,
 .grid rect {
-  stroke: var(--q-negative);
+  stroke: var(--q-grid-stroke);
 }
 
 .grid circle {
-  fill: color-mix(in srgb, var(--q-negative) 20%, transparent);
+  fill: var(--q-grid-fill);
 }
 
 .pv text {
-  fill: var(--q-positive);
+  fill: var(--q-pv-stroke);
 }
 
 .pv circle,
 .pv rect {
-  stroke: var(--q-positive);
+  stroke: var(--q-pv-stroke);
 }
 
 .pv circle {
-  fill: color-mix(in srgb, var(--q-positive) 30%, transparent);
+  fill: var(--q-pv-fill);
 }
 
 .battery text {
-  fill: var(--q-battery);
+  fill: var(--q-battery-stroke);
 }
 
 .battery circle,
 .battery rect {
-  stroke: var(--q-battery);
+  stroke: var(--q-battery-stroke);
 }
 
 .battery circle:not(.soc) {
-  fill: color-mix(in srgb, var(--q-battery) 50%, transparent);
+  fill: var(--q-battery-fill);
 }
 
 :root {
@@ -1018,24 +1009,24 @@ text .fill-dark {
 
 .home circle,
 .home rect {
-  stroke: var(--q-flow-home-stroke);
+  stroke: var(--q-home-stroke);
 }
 
 .home circle {
-  fill: color-mix(in srgb, var(--q-brown-text) 20%, transparent);
+  fill: var(--q-home-fill);
 }
 
 .charge-point text {
-  fill: var(--q-primary);
+  fill: var(--q-charge-point-stroke);
 }
 
 .charge-point circle,
 .charge-point rect {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
 }
 
 .charge-point circle {
-  fill: color-mix(in srgb, var(--q-primary) 30%, transparent);
+  fill: var(--q-charge-point-fill);
 }
 
 .background-circle {
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 942141836d..8b8c1db139 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
@@ -118,13 +118,20 @@ const chartRange = computed(
   () => mqttStore.themeConfiguration?.history_chart_range || 3600,
 );
 
+const getGlobalColor = (name: string, fallback?: string) => {
+  const fromRoot = getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+  return fromRoot || fallback;
+};
+
 const secondaryCounterDatasets = computed(() =>
   mqttStore.getSecondaryCounterIds.map((id) => ({
     label: mqttStore.getComponentName(id),
     category: 'component',
     unit: 'kW',
-    borderColor: '#FFA9A8',
-    backgroundColor: 'rgba(255,169,168, 0.2)',
+    borderColor: getGlobalColor('--q-secondary-counter-stroke'),
+    backgroundColor: getGlobalColor('--q-secondary-counter-fill'),
     data: selectedData.value.map((item) => ({
       x: item.timestamp * 1000,
       y: item[`counter${id}-power`] ?? 0,
@@ -143,8 +150,8 @@ const chargePointDatasets = computed(() =>
     label: `${chargePointNames.value(cpId)}`,
     category: 'chargepoint',
     unit: 'kW',
-    borderColor: '#4766b5',
-    backgroundColor: 'rgba(71, 102, 181, 0.2)',
+    borderColor: getGlobalColor('--q-charge-point-stroke'),
+    backgroundColor: getGlobalColor('--q-charge-point-fill'),
     data: selectedData.value.map((item) => ({
       x: item.timestamp * 1000,
       y: item[`cp${cpId}-power`] || 0,
@@ -223,8 +230,8 @@ const lineChartData = computed(() => {
         label: gridMeterName.value,
         category: 'component',
         unit: 'kW',
-        borderColor: '#a33c42',
-        backgroundColor: 'rgba(239,182,188, 0.2)',
+        borderColor: getGlobalColor('--q-grid-stroke'),
+        backgroundColor: getGlobalColor('--q-grid-fill'),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item.grid,
@@ -240,8 +247,8 @@ const lineChartData = computed(() => {
         label: 'Hausverbrauch',
         category: 'component',
         unit: 'kW',
-        borderColor: '#949aa1',
-        backgroundColor: 'rgba(148, 154, 161, 0.2)',
+        borderColor: getGlobalColor('--q-home-stroke'),
+        backgroundColor: getGlobalColor('--q-home-fill'),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item['house-power'],
@@ -258,8 +265,8 @@ const lineChartData = computed(() => {
         label: 'PV ges.',
         category: 'component',
         unit: 'kW',
-        borderColor: 'green',
-        backgroundColor: 'rgba(144, 238, 144, 0.2)',
+        borderColor: getGlobalColor('--q-pv-stroke'),
+        backgroundColor: getGlobalColor('--q-pv-fill'),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item['pv-all'],
@@ -275,8 +282,8 @@ const lineChartData = computed(() => {
         label: 'Speicher ges.',
         category: 'component',
         unit: 'kW',
-        borderColor: '#b5a647',
-        backgroundColor: 'rgba(181, 166, 71, 0.2)',
+        borderColor: getGlobalColor('--q-battery-stroke'),
+        backgroundColor: getGlobalColor('--q-battery-fill'),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item['bat-all-power'],
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 598d8eb5bd..b4f2b88394 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
@@ -64,8 +64,6 @@ $charge-point-fill: #5c93d14D;
   --q-grey: #{$grey};
   --q-carousel-control: #{$primary};
   --q-toggle-off: #{$toggle-off};
-  --q-flow-home-stroke: #{$grey};
-  --q-battery: #{$battery};
   --q-grid-fill: #{$grid-fill};
   --q-grid-stroke: #{$grid-stroke};
   --q-home-fill: #{$home-fill};
@@ -79,7 +77,6 @@ $charge-point-fill: #5c93d14D;
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
 
-
   // Main background
   background-color: var(--q-background-1);
   // Text color
@@ -275,10 +272,18 @@ $dark-tab-icon: #d7d9e0;
   --q-toggle-off: #{$toggle-off};
   --q-list: #{$dark-list};
   --q-tab-icon: #{$dark-tab-icon};
-  --q-flow-home-stroke: #{$grey};
-  --q-battery: #{$dark-warning};
-  --q-grid-stroke: #{$grid-stroke};
   --q-grid-fill: #{$grid-fill};
+  --q-grid-stroke: #{$grid-stroke};
+  --q-home-fill: #{$home-fill};
+  --q-home-stroke: #{$home-stroke};
+  --q-secondary-counter-stroke: #{$secondary-counter-stroke};
+  --q-secondary-counter-fill: #{$secondary-counter-fill};
+  --q-pv-stroke: #{$pv-stroke};
+  --q-pv-fill: #{$pv-fill};
+  --q-battery-stroke: #{$battery-stroke};
+  --q-battery-fill: #{$battery-fill};
+  --q-charge-point-stroke: #{$charge-point-stroke};
+  --q-charge-point-fill: #{$charge-point-fill};
 
   // Main background
   background-color: $dark-page;
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index dfcb0697d9..d3bde18597 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3338,11 +3338,12 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get grid power identified from root of component hierarchy
+   * Get counter power identified by root grid counter in component hierarchy or counterId
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @param counterId counter ID
    * @returns string | number | ValueObject | undefined
    */
-  const getGridPower = computed(() => {
+  const getCounterPower = computed(() => {
     return (returnType: string = 'textValue', counterId?: number) => {
       const id = counterId ?? getGridId.value;
       if (id === undefined) {
@@ -3366,19 +3367,20 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get daily grid energy imported identified from root of component hierarchy
+   * Get daily counter energy imported identified by root grid counter in component hierarchy or counterId
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @param counterId counter ID
    * @returns string | number | ValueObject | undefined
    */
-  const gridDailyImported = computed(() => {
-    return (returnType: string = 'textValue') => {
-      const gridId = getGridId.value;
-      if (gridId === undefined) {
+  const counterDailyImported = computed(() => {
+    return (returnType: string = 'textValue', counterId?: number ) => {
+      const id = counterId ?? getGridId.value;
+      if (id === undefined) {
         return '---';
       }
       const energy =
         (getValue.value(
-          `openWB/counter/${gridId}/get/daily_imported`,
+          `openWB/counter/${id}/get/daily_imported`,
           undefined,
           0,
         ) as number) || 0;
@@ -3394,19 +3396,20 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get daily grid energy exported identified from root of component hierarchy
+   * Get daily counter energy exported identified by root grid counter in component hierarchy or counterId
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @param counterId counter ID
    * @returns string | number | ValueObject | undefined
    */
-  const gridDailyExported = computed(() => {
-    return (returnType: string = 'textValue') => {
-      const gridId = getGridId.value;
-      if (gridId === undefined) {
+  const counterDailyExported = computed(() => {
+    return (returnType: string = 'textValue', counterId?: number) => {
+      const id = counterId ?? getGridId.value;
+      if (id === undefined) {
         return '---';
       }
       const energy =
         (getValue.value(
-          `openWB/counter/${gridId}/get/daily_exported`,
+          `openWB/counter/${id}/get/daily_exported`,
           undefined,
           0,
         ) as number) || 0;
@@ -3705,9 +3708,9 @@ export const useMqttStore = defineStore('mqtt', () => {
     getAllCounterIds,
     getSecondaryCounterIds,
     getComponentName,
-    getGridPower,
-    gridDailyImported,
-    gridDailyExported,
+    getCounterPower,
+    counterDailyImported,
+    counterDailyExported,
     // Home data
     getHomePower,
     homeDailyYield,

From 666baa9f94d1189dfd9c166865131134a1ae5819 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 8 Dec 2025 14:53:03 +0100
Subject: [PATCH 03/14] Convert all components to q-expansion-items

---
 .../source/src/components/DailyTotals.vue     | 525 ++++++++++++------
 1 file changed, 345 insertions(+), 180 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
index 25dd3bfb76..eb227dc05a 100644
--- a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
@@ -1,83 +1,85 @@
 <template>
-  <div class="daily-root">
-    <div class="daily-center">
-      <div class="daily-scroll-wrapper">
-        <div class="daily-scroll">
-          <div
-            class="flex justify-between text-subtitle1 text-weight-bold q-mb-xs"
-          >
-            <div v-if="currentPowerVisible">Aktuelle Leistung</div>
-            <div>Tageswerte</div>
-          </div>
-          <q-expansion-item
-            dense
-            expand-separator
-            v-model="gridExpanded"
-            class="grid q-mb-xs"
-            header-class="cursor-pointer"
-          >
-            <!-- grid header -->
-            <template #header>
-              <div class="row items-center full-width no-wrap">
-                <img
-                  :src="gridData.icon"
-                  class="icon q-mr-sm"
-                  :style="{ width: iconSize + 'px', height: iconSize + 'px' }"
-                />
-                <div
-                  v-if="componentNameVisible"
-                  class="text-weight-bold q-mr-sm"
-                >
-                  {{ gridData.title }}
-                </div>
-                <div
-                  class="row items-center q-mr-sm"
-                  v-if="currentPowerVisible"
-                >
+  <div class="container" ref="rootRef">
+    <div class="centered-panel">
+      <div class="scroll-container">
+        <div
+          class="flex justify-between text-subtitle1 text-weight-bold q-mb-xs"
+          ref="titleRef"
+        >
+          <div v-if="currentPowerVisible">Aktuelle Leistung</div>
+          <div>Tageswerte</div>
+        </div>
+        <q-expansion-item
+          dense
+          expand-separator
+          v-model="gridExpanded"
+          class="grid q-mb-xs card"
+          header-class="cursor-pointer"
+        >
+          <!-- grid header -->
+          <template #header>
+            <table class="daily-table">
+              <tr :style="{ height: rowHeight + 'px' }">
+                <td class="col-icon">
+                  <img :src="gridData.icon" class="icon" />
+                </td>
+                <td class="col-title text-weight-bold">
+                  <span v-if="componentNameVisible">{{ gridData.title }}</span>
+                </td>
+                <!-- spacing added if battery SOC is visible -->
+                <td :class="socValueVisible ? 'col-soc' : 'col-soc-empty'"></td>
+                <td class="col-arrow">
                   <q-icon
+                    v-if="currentPowerVisible"
                     :name="
                       arrowDirection('grid').noCurrent
                         ? 'horizontal_rule'
                         : 'double_arrow'
                     "
-                    :class="{ 'rotate-180': arrowDirection('grid').rotate180 }"
+                    :class="{
+                      'rotate-180': arrowDirection('grid').rotate180,
+                    }"
                   />
-                  <span class="q-ml-xs">
+                </td>
+                <td class="col-power">
+                  <span v-if="currentPowerVisible">
                     {{ String(gridData.power).replace('-', '') }}
                   </span>
-                </div>
-
-                <div class="col"></div>
-
-                <div class="text-right text-weight-bold">
-                  <div>Bezug: {{ gridData.today.imported }}</div>
-                  <div>Einspeisung: {{ gridData.today.exported }}</div>
-                </div>
-              </div>
-            </template>
-            <!-- secondary counters -->
-            <div
-              v-for="item in secondaryCounterData"
-              :key="item.id"
-              class="counter"
-            >
-              <div class="row items-center full-width no-wrap">
-                <img
-                  src="icons/owbCounter.svg"
-                  class="icon q-mr-sm"
-                  :style="{ width: iconSize + 'px', height: iconSize + 'px' }"
-                />
-                <div
-                  v-if="componentNameVisible"
-                  class="text-weight-bold q-mr-sm"
-                >
-                  {{ item.title }}
-                </div>
-                <div
-                  class="row items-center q-mr-sm"
-                  v-if="currentPowerVisible"
-                >
+                </td>
+                <td class="col-flex"></td>
+                <td class="col-right-label text-weight-bold">
+                  <div>Bezug:</div>
+                  <div>Einspeisung:</div>
+                </td>
+                <td class="col-right-value">
+                  <div>{{ gridData.today.imported }}</div>
+                  <div>{{ gridData.today.exported }}</div>
+                </td>
+              </tr>
+            </table>
+          </template>
+          <!-- secondary counters -->
+          <div
+            v-for="item in secondaryCounterData"
+            :key="item.id"
+            class="counter"
+          >
+            <table class="daily-table">
+              <tr :style="{ height: rowHeight + 'px' }">
+                <td class="col-icon">
+                  <img src="icons/owbCounter.svg" class="icon" />
+                </td>
+                <td class="col-title text-weight-bold">
+                  <div v-if="componentNameVisible" class="ellipsis-wrapper">
+                    {{ item.title }}
+                    <q-tooltip>{{ item.title }}</q-tooltip>
+                  </div>
+                </td>
+                <!-- spacing added if battery SOC is visible -->
+                <td :class="socValueVisible ? 'col-soc' : 'col-soc-empty'"></td>
+                <td class="col-arrow">
                   <q-icon
+                    v-if="currentPowerVisible"
                     :name="
                       arrowDirection(item.id).noCurrent
                         ? 'horizontal_rule'
@@ -87,96 +89,128 @@
                       'rotate-180': arrowDirection(item.id).rotate180,
                     }"
                   />
-                  <span class="q-ml-xs">
+                </td>
+                <td class="col-power">
+                  <span v-if="currentPowerVisible">
                     {{ String(item.power).replace('-', '') }}
                   </span>
-                </div>
-
-                <div class="col"></div>
-
-                <div class="text-right text-weight-bold">
-                  <div>Bezug: {{ item.today.imported }}</div>
-                  <div>Einspeisung: {{ item.today.exported }}</div>
-                </div>
-              </div>
-            </div>
-          </q-expansion-item>
-
-          <!-- all other components -->
-          <q-card
-            v-for="item in componentData"
-            :key="item.id"
-            class="q-card q-mb-xs"
-            :class="item.id"
-            flat
-            bordered
-          >
-            <q-card-section class="row items-center full-width no-wrap">
-              <img
-                :src="item.icon"
-                class="icon q-mr-sm"
-                :style="{ width: iconSize + 'px', height: iconSize + 'px' }"
-              />
-              <div v-if="componentNameVisible" class="text-weight-bold q-mr-sm">
-                {{ item.title }}
-              </div>
-              <div
-                v-if="socValueVisible && item.id === 'battery'"
-                class="q-mr-sm"
-              >
-                {{ item.soc }}%
-              </div>
-              <div class="row items-center q-mr-sm" v-if="currentPowerVisible">
-                <q-icon
-                  :name="
-                    arrowDirection(item.id).noCurrent
-                      ? 'horizontal_rule'
-                      : 'double_arrow'
-                  "
-                  :class="{ 'rotate-180': arrowDirection(item.id).rotate180 }"
-                />
-                <span class="q-ml-xs">
-                  {{ String(item.power).replace('-', '') }}
-                </span>
-              </div>
-              <div class="col"></div>
-              <div class="text-right text-weight-bold">
-                <div v-if="item.id !== 'pv' && item.id !== 'house'">
-                  Geladen:
-                  {{ item.today.imported }}
-                </div>
-                <div v-if="item.id !== 'pv' && item.id !== 'house'">
-                  Entladen:
-                  {{ item.today.exported }}
-                </div>
-                <div v-if="item.id === 'pv'">
-                  Ertrag:
-                  {{ item.today.exported }}
-                </div>
-                <div v-if="item.id === 'house'">
-                  Ertrag:
-                  {{ item.today.imported }}
-                </div>
-              </div>
-            </q-card-section>
-          </q-card>
-        </div>
+                </td>
+                <td class="col-flex"></td>
+                <td class="col-right-label text-weight-bold">
+                  <div>Bezug:</div>
+                  <div>Einspeisung:</div>
+                </td>
+                <td class="col-right-value">
+                  <div>{{ item.today.imported }}</div>
+                  <div>{{ item.today.exported }}</div>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </q-expansion-item>
+        <!-- all other components -->
+
+        <q-expansion-item
+          v-for="item in componentData"
+          :key="item.id"
+          dense
+          expand-separator
+          :class="[item.id, 'q-mb-xs', 'card']"
+          header-class="no-pointer"
+        >
+          <template #header>
+            <table class="daily-table">
+              <tr :style="{ height: rowHeight + 'px' }">
+                <td class="col-icon">
+                  <img :src="item.icon" class="icon" />
+                </td>
+                <td class="col-title text-weight-bold">
+                  <span v-if="componentNameVisible">{{ item.title }}</span>
+                </td>
+                <!-- spacing added if battery SOC is visible -->
+                <td :class="socValueVisible ? 'col-soc' : 'col-soc-empty'">
+                  <span v-if="socValueVisible && item.id === 'battery'">
+                    {{ item.soc }}%
+                  </span>
+                </td>
+                <td class="col-arrow">
+                  <q-icon
+                    v-if="currentPowerVisible"
+                    :name="
+                      item.id === 'house'
+                        ? 'horizontal_rule'
+                        : arrowDirection(item.id).noCurrent
+                          ? 'horizontal_rule'
+                          : 'double_arrow'
+                    "
+                    :class="{
+                      'rotate-180': arrowDirection(item.id).rotate180,
+                    }"
+                  />
+                </td>
+                <td class="col-power">
+                  <span v-if="currentPowerVisible">
+                    {{ String(item.power).replace('-', '') }}
+                  </span>
+                </td>
+                <td class="col-flex"></td>
+                <td class="col-right-label text-weight-bold">
+                  <template
+                    v-if="item.id === 'battery' || item.id === 'chargepoint'"
+                  >
+                    <div>Geladen:</div>
+                    <div>Entladen:</div>
+                  </template>
+                  <template v-else-if="item.id === 'pv'">
+                    <div>Ertrag:</div>
+                  </template>
+                  <template v-else-if="item.id === 'house'">
+                    <div>Verbrauch:</div>
+                  </template>
+                </td>
+                <td class="col-right-value">
+                  <div
+                    v-if="
+                      ['battery', 'grid', 'house', 'chargepoint'].includes(
+                        item.id,
+                      )
+                    "
+                  >
+                    {{ item.today.imported }}
+                  </div>
+                  <div
+                    v-if="
+                      ['battery', 'grid', 'pv', 'chargepoint'].includes(item.id)
+                    "
+                  >
+                    {{ item.today.exported }}
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </template>
+        </q-expansion-item>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import {
+  computed,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  watch,
+} from 'vue';
 import { useQuasar } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
 
 const $q = useQuasar();
 const mqttStore = useMqttStore();
-
 const gridExpanded = ref(false);
-const iconSize = ref(28);
 
 const componentNameVisible = computed(() => $q.screen.width >= 375);
 const currentPowerVisible = computed(() => $q.screen.width >= 500);
@@ -307,7 +341,7 @@ const arrowDirection = (id: string) => {
   const noCurrent = value === 0;
   let rotate180 = false;
 
-  if (id === 'grid') {
+  if (id === 'grid' || id.startsWith('counter-')) {
     rotate180 = value < 0;
   } else if (id !== 'house') {
     rotate180 = value > 0;
@@ -315,75 +349,203 @@ const arrowDirection = (id: string) => {
 
   return { noCurrent, rotate180 };
 };
+
+const rootRef = ref<HTMLElement | null>(null);
+const titleRef = ref<HTMLElement | null>(null);
+const rowHeight = ref(45); // default / fallback
+
+const totalRowCount = computed(() => {
+  let count = 0;
+  count += 1; // grid header
+  count += secondaryCounterData.value.length; // secondary counters (only when expanded)
+  count += componentData.value.length; // all other components
+  return count;
+});
+
+let slideElement: HTMLElement | null = null;
+let slideObserver: ResizeObserver | null = null;
+
+function getSlideElement(): HTMLElement | null {
+  return rootRef.value?.closest('.q-carousel__slide') as HTMLElement | null;
+}
+
+const calculateRowHeight = () => {
+  nextTick(() => {
+    const slide = slideElement ?? getSlideElement();
+    if (!slide) return;
+    const style = window.getComputedStyle(slide);
+    const paddings =
+      parseFloat(style.paddingTop || '0') +
+      parseFloat(style.paddingBottom || '0');
+    const totalHeight = slide.clientHeight - paddings;
+    const titleHeight = titleRef.value?.offsetHeight ?? 0;
+    // small vertical gaps between rows + some safety padding
+    const verticalGaps = (totalRowCount.value - 1) * 4;
+    const safetyPadding = 40;
+    const availableHeight = Math.max(
+      0,
+      totalHeight - titleHeight - verticalGaps - safetyPadding,
+    );
+    const ROW_MIN = 32;
+    const ROW_MAX = 70;
+    if (totalRowCount.value <= 0) {
+      rowHeight.value = ROW_MIN;
+      return;
+    }
+    rowHeight.value = Math.max(
+      ROW_MIN,
+      Math.min(ROW_MAX, Math.floor(availableHeight / totalRowCount.value)),
+    );
+  });
+};
+
+onMounted(() => {
+  slideElement = getSlideElement();
+
+  if (slideElement) {
+    slideObserver = new ResizeObserver(calculateRowHeight);
+    slideObserver.observe(slideElement);
+  }
+
+  window.addEventListener('resize', calculateRowHeight, { passive: true });
+  calculateRowHeight();
+});
+
+onBeforeUnmount(() => {
+  slideObserver?.disconnect();
+  slideObserver = null;
+  window.removeEventListener('resize', calculateRowHeight);
+});
+
+// Recompute when rows or grid expansion change
+watch(
+  () => ({
+    rows: componentData.value.length + secondaryCounterData.value.length,
+    expanded: gridExpanded.value,
+  }),
+  () => calculateRowHeight(),
+);
 </script>
 
 <style scoped>
-/* fills the carousel slide */
-.daily-root {
+.container {
   height: 100%;
   display: flex;
   justify-content: center;
 }
-/* fixed-width column */
-.daily-center {
+.centered-panel {
   width: 100%;
   max-width: 600px;
   height: 100%;
   display: flex;
-  flex-direction: column;
-}
-/* wrapper */
-.daily-scroll-wrapper {
-  flex: 1;
-  display: flex;
   align-items: center;
-  overflow: hidden; /* clips scroll div */
+  overflow: hidden; /* clip scroll area */
 }
-/* scrolling area */
-.daily-scroll {
+.scroll-container {
   width: 100%;
-  max-height: 100%; /* allows scrolling when needed */
-  overflow-y: auto;
+  max-height: 100%;
+  overflow-y: auto; /* show scrollbar when needed */
 }
-
 /* Hide expansion item chevron */
 :deep(.q-expansion-item__toggle-icon) {
   display: none !important;
 }
-
 /* make padding same as cards inside expansion header */
 :deep(.q-expansion-item__container .q-item) {
-  padding: 3px 8px !important;
+  padding: 0px 0px !important;
 }
-
 /* Remove the padding inside q-item__section */
 :deep(.q-item__section) {
   padding: 0 !important;
   margin: 0 !important;
 }
-
-/* Apply same padding to Q-card */
-:deep(.q-card__section) {
-  padding: 3px 8px !important;
-  min-height: 48px;
+/* headers that should NOT look clickable */
+:deep(.no-pointer) {
+  cursor: default !important;
 }
-
-.q-card {
-  border-radius: 8px;
+/* Expansion item: override any clickable helper classes- prevent cursor: pointer */
+:deep(.no-pointer.q-item--clickable),
+:deep(.no-pointer.q-link),
+:deep(.no-pointer.cursor-pointer) {
+  cursor: default !important;
+  pointer-events: none;
+}
+.daily-table {
+  width: 100%;
+  min-height: 42px;
+  border-collapse: collapse;
+}
+.daily-table td {
+  padding: 0px 6px !important;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.daily-table td.col-icon img {
+  width: 28px;
+  display: block;
+  margin: 0 auto;
+}
+.col-icon {
+  width: 32px;
+}
+.col-title {
+  width: 85px;
+  max-width: 85px; /* prevent growing */
+}
+.ellipsis-wrapper {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 85px;
+}
+.col-soc {
+  width: 50px;
+  text-align: right;
+  white-space: nowrap;
+}
+.col-soc-empty {
+  width: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+}
+.col-arrow {
+  width: 24px;
+  text-align: center;
+}
+.col-power {
+  width: 70px;
+  text-align: right;
+  white-space: nowrap;
+}
+/* flexible gap */
+.col-flex {
+  width: auto;
+}
+.col-right-label {
+  width: 100px;
+  text-align: right;
+  white-space: nowrap;
+}
+.col-right-value {
+  width: 80px;
+  text-align: right;
+  white-space: nowrap;
 }
-
 .grid {
-  border-radius: 8px;
   background: var(--q-grid-fill);
   border: 2px solid var(--q-grid-stroke);
 }
-
 .counter {
-  border-radius: 8px;
-  padding: 3px 8px;
+  padding: 0px 0px;
   background: var(--q-secondary-counter-fill);
   border: 2px solid var(--q-secondary-counter-stroke);
 }
+.card,
+.grid,
+.counter {
+  border-radius: 8px;
+}
 .battery {
   background: var(--q-battery-fill);
   border: 2px solid var(--q-battery-stroke);
@@ -400,7 +562,6 @@ const arrowDirection = (id: string) => {
   background: var(--q-charge-point-fill);
   border: 2px solid var(--q-charge-point-stroke);
 }
-
 .body--dark .grid {
   background: #a13a41 !important;
   border: 2px solid #da959a;
@@ -418,15 +579,19 @@ const arrowDirection = (id: string) => {
 .body--dark .chargepoint {
   background: #254a8c;
 }
-
 .icon {
   filter: brightness(0.4);
 }
 .body--dark .icon {
   filter: brightness(1);
 }
-
 .rotate-180 {
   transform: rotate(180deg);
 }
+
+@media (max-width: 500px) {
+  .daily-table td {
+    font-size: 13px;
+  }
+}
 </style>

From 6a63edf69c300944ffae7bb1a8063af16b1628fb Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 8 Dec 2025 16:47:17 +0100
Subject: [PATCH 04/14] Refactor daily totals into two components

---
 .../source/src/components/ChartCarousel.vue   |   2 +-
 .../{ => charts/dailyTotals}/DailyTotals.vue  | 339 ++++--------------
 .../charts/dailyTotals/DailyTotalsRow.vue     | 197 ++++++++++
 3 files changed, 267 insertions(+), 271 deletions(-)
 rename packages/modules/web_themes/koala/source/src/components/{ => charts/dailyTotals}/DailyTotals.vue (52%)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
index 17c95214e1..9925e73fc1 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
@@ -51,7 +51,7 @@ import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import EnergyFlowChart from './charts/energyFlowChart/EnergyFlowChart.vue';
 import HistoryChart from './charts/historyChart/HistoryChart.vue';
-import DailyTotals from './DailyTotals.vue';
+import DailyTotals from './charts/dailyTotals/DailyTotals.vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
diff --git a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
similarity index 52%
rename from packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
rename to packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index eb227dc05a..ee5bc35c69 100644
--- a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -9,6 +9,7 @@
           <div v-if="currentPowerVisible">Aktuelle Leistung</div>
           <div>Tageswerte</div>
         </div>
+        <!-- grid -->
         <q-expansion-item
           dense
           expand-separator
@@ -16,100 +17,31 @@
           class="grid q-mb-xs card"
           header-class="cursor-pointer"
         >
-          <!-- grid header -->
           <template #header>
-            <table class="daily-table">
-              <tr :style="{ height: rowHeight + 'px' }">
-                <td class="col-icon">
-                  <img :src="gridData.icon" class="icon" />
-                </td>
-                <td class="col-title text-weight-bold">
-                  <span v-if="componentNameVisible">{{ gridData.title }}</span>
-                </td>
-                <!-- spacing added if battery SOC is visible -->
-                <td :class="socValueVisible ? 'col-soc' : 'col-soc-empty'"></td>
-                <td class="col-arrow">
-                  <q-icon
-                    v-if="currentPowerVisible"
-                    :name="
-                      arrowDirection('grid').noCurrent
-                        ? 'horizontal_rule'
-                        : 'double_arrow'
-                    "
-                    :class="{
-                      'rotate-180': arrowDirection('grid').rotate180,
-                    }"
-                  />
-                </td>
-                <td class="col-power">
-                  <span v-if="currentPowerVisible">
-                    {{ String(gridData.power).replace('-', '') }}
-                  </span>
-                </td>
-                <td class="col-flex"></td>
-                <td class="col-right-label text-weight-bold">
-                  <div>Bezug:</div>
-                  <div>Einspeisung:</div>
-                </td>
-                <td class="col-right-value">
-                  <div>{{ gridData.today.imported }}</div>
-                  <div>{{ gridData.today.exported }}</div>
-                </td>
-              </tr>
-            </table>
+            <DailyTotalsRow
+              :item="gridData"
+              :rowHeight="rowHeight"
+              :componentNameVisible="componentNameVisible"
+              :currentPowerVisible="currentPowerVisible"
+              :socValueVisible="socValueVisible"
+            />
           </template>
-          <!-- secondary counters -->
+          <!-- Secondary Counters -->
           <div
             v-for="item in secondaryCounterData"
             :key="item.id"
             class="counter"
           >
-            <table class="daily-table">
-              <tr :style="{ height: rowHeight + 'px' }">
-                <td class="col-icon">
-                  <img src="icons/owbCounter.svg" class="icon" />
-                </td>
-                <td class="col-title text-weight-bold">
-                  <div v-if="componentNameVisible" class="ellipsis-wrapper">
-                    {{ item.title }}
-                    <q-tooltip>{{ item.title }}</q-tooltip>
-                  </div>
-                </td>
-                <!-- spacing added if battery SOC is visible -->
-                <td :class="socValueVisible ? 'col-soc' : 'col-soc-empty'"></td>
-                <td class="col-arrow">
-                  <q-icon
-                    v-if="currentPowerVisible"
-                    :name="
-                      arrowDirection(item.id).noCurrent
-                        ? 'horizontal_rule'
-                        : 'double_arrow'
-                    "
-                    :class="{
-                      'rotate-180': arrowDirection(item.id).rotate180,
-                    }"
-                  />
-                </td>
-                <td class="col-power">
-                  <span v-if="currentPowerVisible">
-                    {{ String(item.power).replace('-', '') }}
-                  </span>
-                </td>
-                <td class="col-flex"></td>
-                <td class="col-right-label text-weight-bold">
-                  <div>Bezug:</div>
-                  <div>Einspeisung:</div>
-                </td>
-                <td class="col-right-value">
-                  <div>{{ item.today.imported }}</div>
-                  <div>{{ item.today.exported }}</div>
-                </td>
-              </tr>
-            </table>
+            <DailyTotalsRow
+              :item="item"
+              :rowHeight="rowHeight"
+              :componentNameVisible="componentNameVisible"
+              :currentPowerVisible="currentPowerVisible"
+              :socValueVisible="socValueVisible"
+            />
           </div>
         </q-expansion-item>
         <!-- all other components -->
-
         <q-expansion-item
           v-for="item in componentData"
           :key="item.id"
@@ -119,75 +51,46 @@
           header-class="no-pointer"
         >
           <template #header>
-            <table class="daily-table">
-              <tr :style="{ height: rowHeight + 'px' }">
-                <td class="col-icon">
-                  <img :src="item.icon" class="icon" />
-                </td>
-                <td class="col-title text-weight-bold">
-                  <span v-if="componentNameVisible">{{ item.title }}</span>
-                </td>
-                <!-- spacing added if battery SOC is visible -->
-                <td :class="socValueVisible ? 'col-soc' : 'col-soc-empty'">
-                  <span v-if="socValueVisible && item.id === 'battery'">
-                    {{ item.soc }}%
-                  </span>
-                </td>
-                <td class="col-arrow">
-                  <q-icon
-                    v-if="currentPowerVisible"
-                    :name="
-                      item.id === 'house'
-                        ? 'horizontal_rule'
-                        : arrowDirection(item.id).noCurrent
-                          ? 'horizontal_rule'
-                          : 'double_arrow'
-                    "
-                    :class="{
-                      'rotate-180': arrowDirection(item.id).rotate180,
-                    }"
-                  />
-                </td>
-                <td class="col-power">
-                  <span v-if="currentPowerVisible">
-                    {{ String(item.power).replace('-', '') }}
-                  </span>
-                </td>
-                <td class="col-flex"></td>
-                <td class="col-right-label text-weight-bold">
-                  <template
-                    v-if="item.id === 'battery' || item.id === 'chargepoint'"
-                  >
-                    <div>Geladen:</div>
-                    <div>Entladen:</div>
-                  </template>
-                  <template v-else-if="item.id === 'pv'">
-                    <div>Ertrag:</div>
-                  </template>
-                  <template v-else-if="item.id === 'house'">
-                    <div>Verbrauch:</div>
-                  </template>
-                </td>
-                <td class="col-right-value">
-                  <div
-                    v-if="
-                      ['battery', 'grid', 'house', 'chargepoint'].includes(
-                        item.id,
-                      )
-                    "
-                  >
-                    {{ item.today.imported }}
-                  </div>
-                  <div
-                    v-if="
-                      ['battery', 'grid', 'pv', 'chargepoint'].includes(item.id)
-                    "
-                  >
-                    {{ item.today.exported }}
-                  </div>
-                </td>
-              </tr>
-            </table>
+            <DailyTotalsRow
+              :item="item"
+              :rowHeight="rowHeight"
+              :componentNameVisible="componentNameVisible"
+              :currentPowerVisible="currentPowerVisible"
+              :socValueVisible="socValueVisible"
+            >
+              <template #right-label>
+                <template
+                  v-if="item.id === 'battery' || item.id === 'chargepoint'"
+                >
+                  <div>Geladen:</div>
+                  <div>Entladen:</div>
+                </template>
+                <template v-else-if="item.id === 'pv'">
+                  <div>Ertrag:</div>
+                </template>
+                <template v-else-if="item.id === 'house'">
+                  <div>Verbrauch:</div>
+                </template>
+              </template>
+              <template #right-value>
+                <div
+                  v-if="
+                    ['battery', 'grid', 'house', 'chargepoint'].includes(
+                      item.id,
+                    )
+                  "
+                >
+                  {{ item.today.imported }}
+                </div>
+                <div
+                  v-if="
+                    ['battery', 'grid', 'pv', 'chargepoint'].includes(item.id)
+                  "
+                >
+                  {{ item.today.exported }}
+                </div>
+              </template>
+            </DailyTotalsRow>
           </template>
         </q-expansion-item>
       </div>
@@ -206,6 +109,7 @@ import {
 } from 'vue';
 import { useQuasar } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import DailyTotalsRow from './DailyTotalsRow.vue';
 import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
 
 const $q = useQuasar();
@@ -310,46 +214,9 @@ const componentData = computed((): DailyTotalsItem[] => {
       },
     });
   }
-
   return components;
 });
 
-const arrowDirection = (id: string) => {
-  let value = 0;
-  switch (id) {
-    case 'grid':
-      value = mqttStore.getCounterPower('value') as number;
-      break;
-    case 'battery':
-      value = mqttStore.batteryTotalPower('value') as number;
-      break;
-    case 'pv':
-      value = mqttStore.getPvPower('value') as number;
-      break;
-    case 'house':
-      value = mqttStore.getHomePower('value') as number;
-      break;
-    case 'chargepoint':
-      value = mqttStore.chargePointSumPower('value') as number;
-      break;
-    default:
-      if (id.startsWith('counter-')) {
-        const counterId = Number(id.replace('counter-', ''));
-        value = mqttStore.getCounterPower('value', counterId) as number;
-      }
-  }
-  const noCurrent = value === 0;
-  let rotate180 = false;
-
-  if (id === 'grid' || id.startsWith('counter-')) {
-    rotate180 = value < 0;
-  } else if (id !== 'house') {
-    rotate180 = value > 0;
-  }
-
-  return { noCurrent, rotate180 };
-};
-
 const rootRef = ref<HTMLElement | null>(null);
 const titleRef = ref<HTMLElement | null>(null);
 const rowHeight = ref(45); // default / fallback
@@ -450,7 +317,7 @@ watch(
 :deep(.q-expansion-item__toggle-icon) {
   display: none !important;
 }
-/* make padding same as cards inside expansion header */
+/* Remove the padding inside expansion header */
 :deep(.q-expansion-item__container .q-item) {
   padding: 0px 0px !important;
 }
@@ -470,82 +337,19 @@ watch(
   cursor: default !important;
   pointer-events: none;
 }
-.daily-table {
-  width: 100%;
-  min-height: 42px;
-  border-collapse: collapse;
-}
-.daily-table td {
-  padding: 0px 6px !important;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-.daily-table td.col-icon img {
-  width: 28px;
-  display: block;
-  margin: 0 auto;
-}
-.col-icon {
-  width: 32px;
-}
-.col-title {
-  width: 85px;
-  max-width: 85px; /* prevent growing */
-}
-.ellipsis-wrapper {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 85px;
-}
-.col-soc {
-  width: 50px;
-  text-align: right;
-  white-space: nowrap;
-}
-.col-soc-empty {
-  width: 0 !important;
-  padding: 0 !important;
-  border: 0 !important;
-  overflow: hidden !important;
-}
-.col-arrow {
-  width: 24px;
-  text-align: center;
-}
-.col-power {
-  width: 70px;
-  text-align: right;
-  white-space: nowrap;
-}
-/* flexible gap */
-.col-flex {
-  width: auto;
-}
-.col-right-label {
-  width: 100px;
-  text-align: right;
-  white-space: nowrap;
-}
-.col-right-value {
-  width: 80px;
-  text-align: right;
-  white-space: nowrap;
+.card,
+.grid,
+.counter {
+  border-radius: 8px;
 }
 .grid {
   background: var(--q-grid-fill);
   border: 2px solid var(--q-grid-stroke);
 }
 .counter {
-  padding: 0px 0px;
   background: var(--q-secondary-counter-fill);
   border: 2px solid var(--q-secondary-counter-stroke);
 }
-.card,
-.grid,
-.counter {
-  border-radius: 8px;
-}
 .battery {
   background: var(--q-battery-fill);
   border: 2px solid var(--q-battery-stroke);
@@ -562,6 +366,13 @@ watch(
   background: var(--q-charge-point-fill);
   border: 2px solid var(--q-charge-point-stroke);
 }
+.icon {
+  filter: brightness(0.4);
+}
+.rotate-180 {
+  transform: rotate(180deg);
+}
+/* Dark mode overrides */
 .body--dark .grid {
   background: #a13a41 !important;
   border: 2px solid #da959a;
@@ -579,19 +390,7 @@ watch(
 .body--dark .chargepoint {
   background: #254a8c;
 }
-.icon {
-  filter: brightness(0.4);
-}
 .body--dark .icon {
   filter: brightness(1);
 }
-.rotate-180 {
-  transform: rotate(180deg);
-}
-
-@media (max-width: 500px) {
-  .daily-table td {
-    font-size: 13px;
-  }
-}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
new file mode 100644
index 0000000000..b86d9c27fa
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -0,0 +1,197 @@
+<template>
+  <table class="daily-table">
+    <tr :style="{ height: props.rowHeight + 'px' }">
+      <td class="col-icon">
+        <img :src="props.item.icon" class="icon" />
+      </td>
+      <td class="col-title text-weight-bold">
+        <div v-if="componentNameVisible">
+          <template v-if="props.item.id.startsWith('counter-')">
+            <div class="ellipsis-wrapper">
+              {{ props.item.title }}
+              <q-tooltip>{{ props.item.title }}</q-tooltip>
+            </div>
+          </template>
+          <template v-else>
+            {{ props.item.title }}
+          </template>
+        </div>
+      </td>
+      <td :class="props.socValueVisible ? 'col-soc' : 'col-soc-empty'">
+        <span v-if="props.socValueVisible && props.item.id === 'battery'">
+          {{ props.item.soc }}%
+        </span>
+      </td>
+      <td class="col-arrow">
+        <q-icon
+          v-if="props.currentPowerVisible"
+          :name="
+            arrowDirection(props.item.id).noCurrent
+              ? 'horizontal_rule'
+              : 'double_arrow'
+          "
+          :class="{
+            'rotate-180': arrowDirection(props.item.id).rotate180,
+          }"
+        />
+      </td>
+      <td class="col-power">
+        <span v-if="props.currentPowerVisible">
+          {{ String(props.item.power).replace('-', '') }}
+        </span>
+      </td>
+      <td class="col-flex"></td>
+      <td class="col-right-label text-weight-bold">
+        <slot name="right-label" :item="props.item">
+          <template
+            v-if="
+              props.item.id === 'grid' || props.item.id.startsWith('counter-')
+            "
+          >
+            <div>Bezug:</div>
+            <div>Einspeisung:</div>
+          </template>
+        </slot>
+      </td>
+      <td class="col-right-value">
+        <slot name="right-value" :item="props.item">
+          <template
+            v-if="
+              props.item.id === 'grid' || props.item.id.startsWith('counter-')
+            "
+          >
+            <div>{{ props.item.today.imported }}</div>
+            <div>{{ props.item.today.exported }}</div>
+          </template>
+        </slot>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { useMqttStore } from 'src/stores/mqtt-store';
+import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
+
+const mqttStore = useMqttStore();
+
+const props = defineProps<{
+  item: DailyTotalsItem;
+  rowHeight: number;
+  componentNameVisible: boolean;
+  currentPowerVisible: boolean;
+  socValueVisible: boolean;
+}>();
+
+const arrowDirection = (id: string) => {
+  let value = 0;
+  switch (id) {
+    case 'grid':
+      value = mqttStore.getCounterPower('value') as number;
+      break;
+    case 'battery':
+      value = mqttStore.batteryTotalPower('value') as number;
+      break;
+    case 'pv':
+      value = mqttStore.getPvPower('value') as number;
+      break;
+    case 'house':
+      value = mqttStore.getHomePower('value') as number;
+      break;
+    case 'chargepoint':
+      value = mqttStore.chargePointSumPower('value') as number;
+      break;
+    default:
+      if (id.startsWith('counter-')) {
+        const counterId = Number(id.replace('counter-', ''));
+        value = mqttStore.getCounterPower('value', counterId) as number;
+      }
+  }
+  const noCurrent = value === 0;
+  let rotate180 = false;
+
+  if (id === 'grid' || id.startsWith('counter-')) {
+    rotate180 = value < 0;
+  } else if (id !== 'house') {
+    rotate180 = value > 0;
+  }
+
+  return { noCurrent, rotate180 };
+};
+</script>
+
+<style scoped>
+.daily-table {
+  width: 100%;
+  min-height: 42px;
+  border-collapse: collapse;
+}
+.daily-table td {
+  padding: 0px 6px !important;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.daily-table td.col-icon img {
+  width: 28px;
+  display: block;
+  margin: 0 auto;
+}
+.col-icon {
+  width: 32px;
+}
+.col-title {
+  width: 85px;
+  max-width: 85px;
+}
+.ellipsis-wrapper {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 85px;
+}
+.col-soc {
+  width: 50px;
+  text-align: right;
+  white-space: nowrap;
+}
+.col-soc-empty {
+  width: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+}
+.col-arrow {
+  width: 24px;
+  text-align: center;
+}
+.col-power {
+  width: 70px;
+  text-align: right;
+  white-space: nowrap;
+}
+.col-flex {
+  width: auto;
+}
+.col-right-label {
+  width: 100px;
+  text-align: right;
+  white-space: nowrap;
+}
+.col-right-value {
+  width: 80px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.icon {
+  filter: brightness(0.4);
+}
+.rotate-180 {
+  transform: rotate(180deg);
+}
+@media (max-width: 500px) {
+  .daily-table td {
+    font-size: 13px;
+  }
+}
+</style>

From 07f0498256d3af143f9fe1e3d91e690e1c7e32f1 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 8 Dec 2025 17:20:37 +0100
Subject: [PATCH 05/14] CSS adjustments

---
 .../source/src/components/charts/dailyTotals/DailyTotals.vue    | 2 +-
 .../source/src/components/charts/dailyTotals/DailyTotalsRow.vue | 2 +-
 .../web_themes/koala/source/src/css/quasar.variables.scss       | 2 +-
 3 files changed, 3 insertions(+), 3 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 ee5bc35c69..cc10329d49 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
@@ -1,7 +1,7 @@
 <template>
   <div class="container" ref="rootRef">
     <div class="centered-panel">
-      <div class="scroll-container">
+      <div class="scroll-container narrow-scrollbar">
         <div
           class="flex justify-between text-subtitle1 text-weight-bold q-mb-xs"
           ref="titleRef"
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index b86d9c27fa..0859a4612d 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -178,7 +178,7 @@ const arrowDirection = (id: string) => {
   white-space: nowrap;
 }
 .col-right-value {
-  width: 80px;
+  width: 85px;
   text-align: right;
   white-space: nowrap;
 }
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 b4f2b88394..9db0f64daa 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
@@ -216,7 +216,7 @@ $charge-point-fill: #5c93d14D;
   }
 
   // Scrollbar styling für .q-list auto Light Theme
-  .q-list {
+  .q-list, .narrow-scrollbar {
     scrollbar-width: thin;
     scrollbar-color: var(--q-primary) var(--q-background-2);
   }

From 01cfe57c78675cc2d582d90169bf6b7dffd02a9c Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 9 Dec 2025 09:29:42 +0100
Subject: [PATCH 06/14] CSS enhancements

---
 .../charts/dailyTotals/DailyTotals.vue          | 15 ++++++++++-----
 .../charts/dailyTotals/DailyTotalsRow.vue       | 17 +++++++++++++++--
 2 files changed, 25 insertions(+), 7 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 cc10329d49..8f47e1c9d8 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
@@ -14,7 +14,7 @@
           dense
           expand-separator
           v-model="gridExpanded"
-          class="grid q-mb-xs card"
+          class="grid card"
           header-class="cursor-pointer"
         >
           <template #header>
@@ -24,6 +24,8 @@
               :componentNameVisible="componentNameVisible"
               :currentPowerVisible="currentPowerVisible"
               :socValueVisible="socValueVisible"
+              :secondaryCountersConfigured="secondaryCountersConfigured"
+              :gridExpanded="gridExpanded"
             />
           </template>
           <!-- Secondary Counters -->
@@ -47,7 +49,7 @@
           :key="item.id"
           dense
           expand-separator
-          :class="[item.id, 'q-mb-xs', 'card']"
+          :class="[item.id, 'card']"
           header-class="no-pointer"
         >
           <template #header>
@@ -338,9 +340,9 @@ watch(
   pointer-events: none;
 }
 .card,
-.grid,
-.counter {
+.grid {
   border-radius: 8px;
+  margin-bottom: 2px;
 }
 .grid {
   background: var(--q-grid-fill);
@@ -348,7 +350,10 @@ watch(
 }
 .counter {
   background: var(--q-secondary-counter-fill);
-  border: 2px solid var(--q-secondary-counter-stroke);
+  border-top: 2px solid var(--q-secondary-counter-stroke);
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
 }
 .battery {
   background: var(--q-battery-fill);
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index 0859a4612d..7121ac4cfb 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -15,9 +15,15 @@
           <template v-else>
             {{ props.item.title }}
           </template>
+          <q-icon
+            v-if="item.id === 'grid' && secondaryCountersConfigured"
+            name="keyboard_arrow_down"
+            :class="[gridExpanded ? 'rotate-180' : '', 'expand-icon']"
+          />
         </div>
       </td>
-      <td :class="props.socValueVisible ? 'col-soc' : 'col-soc-empty'">
+      <!-- spacing added if battery SOC is visible -->
+      <td :class="props.socValueVisible ? 'col-soc' : 'col-soc-spacer'">
         <span v-if="props.socValueVisible && props.item.id === 'battery'">
           {{ props.item.soc }}%
         </span>
@@ -81,6 +87,8 @@ const props = defineProps<{
   componentNameVisible: boolean;
   currentPowerVisible: boolean;
   socValueVisible: boolean;
+  secondaryCountersConfigured?: boolean;
+  gridExpanded?: boolean;
 }>();
 
 const arrowDirection = (id: string) => {
@@ -154,7 +162,7 @@ const arrowDirection = (id: string) => {
   text-align: right;
   white-space: nowrap;
 }
-.col-soc-empty {
+.col-soc-spacer {
   width: 0 !important;
   padding: 0 !important;
   border: 0 !important;
@@ -189,6 +197,11 @@ const arrowDirection = (id: string) => {
 .rotate-180 {
   transform: rotate(180deg);
 }
+.expand-icon {
+  font-size: 20px;
+  margin-left: 8px;
+  cursor: pointer;
+}
 @media (max-width: 500px) {
   .daily-table td {
     font-size: 13px;

From 99055c29a666f498b54ec8496a0f59a3398f7f93 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 9 Dec 2025 16:57:54 +0100
Subject: [PATCH 07/14] Simplify total row count computed property

---
 .../src/components/charts/dailyTotals/DailyTotals.vue      | 7 ++-----
 1 file changed, 2 insertions(+), 5 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 8f47e1c9d8..40af49e5e8 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
@@ -224,11 +224,8 @@ const titleRef = ref<HTMLElement | null>(null);
 const rowHeight = ref(45); // default / fallback
 
 const totalRowCount = computed(() => {
-  let count = 0;
-  count += 1; // grid header
-  count += secondaryCounterData.value.length; // secondary counters (only when expanded)
-  count += componentData.value.length; // all other components
-  return count;
+  // grid header + secondary counters (only when expanded) + other components
+  return 1 + secondaryCounterData.value.length + componentData.value.length;
 });
 
 let slideElement: HTMLElement | null = null;

From 4dea91f62f6fcf1571866f4dd60c6354e41e86e6 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 9 Dec 2025 17:05:02 +0100
Subject: [PATCH 08/14] Convert slideElement to computed property

---
 .../charts/dailyTotals/DailyTotals.vue        | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 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 40af49e5e8..584fca9f8a 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
@@ -228,16 +228,15 @@ const totalRowCount = computed(() => {
   return 1 + secondaryCounterData.value.length + componentData.value.length;
 });
 
-let slideElement: HTMLElement | null = null;
-let slideObserver: ResizeObserver | null = null;
+const slideObserver = ref<ResizeObserver | null>(null);
 
-function getSlideElement(): HTMLElement | null {
-  return rootRef.value?.closest('.q-carousel__slide') as HTMLElement | null;
-}
+const slideElement = computed<HTMLElement | null>(() => {
+  return (rootRef.value?.closest('.q-carousel__slide') as HTMLElement | null);
+});
 
 const calculateRowHeight = () => {
   nextTick(() => {
-    const slide = slideElement ?? getSlideElement();
+    const slide = slideElement.value;
     if (!slide) return;
     const style = window.getComputedStyle(slide);
     const paddings =
@@ -266,11 +265,9 @@ const calculateRowHeight = () => {
 };
 
 onMounted(() => {
-  slideElement = getSlideElement();
-
-  if (slideElement) {
-    slideObserver = new ResizeObserver(calculateRowHeight);
-    slideObserver.observe(slideElement);
+  if (slideElement.value) {
+    slideObserver.value = new ResizeObserver(calculateRowHeight);
+    slideObserver.value.observe(slideElement.value);
   }
 
   window.addEventListener('resize', calculateRowHeight, { passive: true });
@@ -278,8 +275,8 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  slideObserver?.disconnect();
-  slideObserver = null;
+  slideObserver.value?.disconnect();
+  slideObserver.value = null;
   window.removeEventListener('resize', calculateRowHeight);
 });
 

From 61456ae8570d96e180b7e31b3d93fb250b56de7f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 9 Dec 2025 17:23:52 +0100
Subject: [PATCH 09/14] Move CSS to style section

---
 .../src/components/charts/dailyTotals/DailyTotalsRow.vue  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index 7121ac4cfb..37d4a3942f 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -1,6 +1,6 @@
 <template>
   <table class="daily-table">
-    <tr :style="{ height: props.rowHeight + 'px' }">
+    <tr class="row-height">
       <td class="col-icon">
         <img :src="props.item.icon" class="icon" />
       </td>
@@ -76,6 +76,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
 
@@ -91,6 +92,8 @@ const props = defineProps<{
   gridExpanded?: boolean;
 }>();
 
+const rowHeightCssValue = computed(() => `${props.rowHeight}px`);
+
 const arrowDirection = (id: string) => {
   let value = 0;
   switch (id) {
@@ -139,6 +142,9 @@ const arrowDirection = (id: string) => {
   white-space: nowrap;
   vertical-align: middle;
 }
+.row-height {
+  height: v-bind(rowHeightCssValue);
+}
 .daily-table td.col-icon img {
   width: 28px;
   display: block;

From 5a0b60421752f1d0c909329573db019a3791eb42 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 9 Dec 2025 17:27:39 +0100
Subject: [PATCH 10/14] Remove unnecessary typecasting

---
 .../source/src/components/charts/dailyTotals/DailyTotalsRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index 37d4a3942f..992aee0fe8 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -43,7 +43,7 @@
       </td>
       <td class="col-power">
         <span v-if="props.currentPowerVisible">
-          {{ String(props.item.power).replace('-', '') }}
+          {{ props.item.power.replace('-', '') }}
         </span>
       </td>
       <td class="col-flex"></td>

From 5a885df45e90609b26acb8050e8309e2834a5000 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 9 Dec 2025 18:09:57 +0100
Subject: [PATCH 11/14] Remove "cursor: pointer" from grid component when no
 secondary counters configured

---
 .../source/src/components/charts/dailyTotals/DailyTotals.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 584fca9f8a..e6e362e5c8 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
@@ -15,7 +15,7 @@
           expand-separator
           v-model="gridExpanded"
           class="grid card"
-          header-class="cursor-pointer"
+          :header-class="secondaryCountersConfigured ? 'cursor-pointer' : 'no-pointer'"
         >
           <template #header>
             <DailyTotalsRow

From 6145f2cd6adaa58cf1d51daf98898661dd87f03c Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 10 Dec 2025 09:17:16 +0100
Subject: [PATCH 12/14] Fix - move icon CSS to child component (DailyTotalsRow)

---
 .../src/components/charts/dailyTotals/DailyTotals.vue       | 6 ------
 .../src/components/charts/dailyTotals/DailyTotalsRow.vue    | 4 +++-
 2 files changed, 3 insertions(+), 7 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 e6e362e5c8..a155f1d158 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
@@ -365,9 +365,6 @@ watch(
   background: var(--q-charge-point-fill);
   border: 2px solid var(--q-charge-point-stroke);
 }
-.icon {
-  filter: brightness(0.4);
-}
 .rotate-180 {
   transform: rotate(180deg);
 }
@@ -389,7 +386,4 @@ watch(
 .body--dark .chargepoint {
   background: #254a8c;
 }
-.body--dark .icon {
-  filter: brightness(1);
-}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index 992aee0fe8..c1613fcb1e 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -196,10 +196,12 @@ const arrowDirection = (id: string) => {
   text-align: right;
   white-space: nowrap;
 }
-
 .icon {
   filter: brightness(0.4);
 }
+.body--dark .icon {
+  filter: brightness(1);
+}
 .rotate-180 {
   transform: rotate(180deg);
 }

From 46a1302614891dc8df149f9b364de5a195c373f3 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 10 Dec 2025 12:07:52 +0100
Subject: [PATCH 13/14] Improved CSS layout - Replaced fixed pixel widths with
 rem units for better scalability

---
 .../charts/dailyTotals/DailyTotals.vue        |  29 +-
 .../charts/dailyTotals/DailyTotalsRow.vue     | 288 ++++++++++--------
 2 files changed, 182 insertions(+), 135 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 a155f1d158..af86baf6a9 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
@@ -15,7 +15,9 @@
           expand-separator
           v-model="gridExpanded"
           class="grid card"
-          :header-class="secondaryCountersConfigured ? 'cursor-pointer' : 'no-pointer'"
+          :header-class="
+            secondaryCountersConfigured ? 'cursor-pointer' : 'no-pointer'
+          "
         >
           <template #header>
             <DailyTotalsRow
@@ -229,9 +231,8 @@ const totalRowCount = computed(() => {
 });
 
 const slideObserver = ref<ResizeObserver | null>(null);
-
 const slideElement = computed<HTMLElement | null>(() => {
-  return (rootRef.value?.closest('.q-carousel__slide') as HTMLElement | null);
+  return rootRef.value?.closest('.q-carousel__slide') as HTMLElement | null;
 });
 
 const calculateRowHeight = () => {
@@ -251,8 +252,8 @@ const calculateRowHeight = () => {
       0,
       totalHeight - titleHeight - verticalGaps - safetyPadding,
     );
-    const ROW_MIN = 32;
-    const ROW_MAX = 70;
+    const ROW_MIN = 42;
+    const ROW_MAX = 75;
     if (totalRowCount.value <= 0) {
       rowHeight.value = ROW_MIN;
       return;
@@ -315,7 +316,7 @@ watch(
 }
 /* Remove the padding inside expansion header */
 :deep(.q-expansion-item__container .q-item) {
-  padding: 0px 0px !important;
+  padding: 0 0 !important;
 }
 /* Remove the padding inside q-item__section */
 :deep(.q-item__section) {
@@ -335,35 +336,35 @@ watch(
 }
 .card,
 .grid {
-  border-radius: 8px;
-  margin-bottom: 2px;
+  border-radius: 0.5rem;
+  margin-bottom: 0.125rem;
 }
 .grid {
   background: var(--q-grid-fill);
-  border: 2px solid var(--q-grid-stroke);
+  border: 0.125rem solid var(--q-grid-stroke);
 }
 .counter {
   background: var(--q-secondary-counter-fill);
-  border-top: 2px solid var(--q-secondary-counter-stroke);
+  border-top: 0.125rem solid var(--q-secondary-counter-stroke);
   border-left: 0;
   border-right: 0;
   border-bottom: 0;
 }
 .battery {
   background: var(--q-battery-fill);
-  border: 2px solid var(--q-battery-stroke);
+  border: 0.125rem solid var(--q-battery-stroke);
 }
 .pv {
   background: var(--q-pv-fill);
-  border: 2px solid var(--q-pv-stroke);
+  border: 0.125rem solid var(--q-pv-stroke);
 }
 .house {
   background: var(--q-home-fill);
-  border: 2px solid var(--q-home-stroke);
+  border: 0.125rem solid var(--q-home-stroke);
 }
 .chargepoint {
   background: var(--q-charge-point-fill);
-  border: 2px solid var(--q-charge-point-stroke);
+  border: 0.125rem solid var(--q-charge-point-stroke);
 }
 .rotate-180 {
   transform: rotate(180deg);
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index c1613fcb1e..a87bca1974 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -1,78 +1,85 @@
 <template>
-  <table class="daily-table">
-    <tr class="row-height">
-      <td class="col-icon">
-        <img :src="props.item.icon" class="icon" />
-      </td>
-      <td class="col-title text-weight-bold">
-        <div v-if="componentNameVisible">
-          <template v-if="props.item.id.startsWith('counter-')">
-            <div class="ellipsis-wrapper">
-              {{ props.item.title }}
-              <q-tooltip>{{ props.item.title }}</q-tooltip>
-            </div>
-          </template>
-          <template v-else>
+  <div class="component-container">
+    <!-- Icon -->
+    <div class="col-icon">
+      <img :src="props.item.icon" class="icon" />
+    </div>
+    <!-- Title -->
+    <div class="col-title text-weight-bold">
+      <div v-if="componentNameVisible" class="title-wrapper">
+        <template v-if="props.item.id.startsWith('counter-')">
+          <div class="ellipsis-wrapper">
             {{ props.item.title }}
-          </template>
-          <q-icon
-            v-if="item.id === 'grid' && secondaryCountersConfigured"
-            name="keyboard_arrow_down"
-            :class="[gridExpanded ? 'rotate-180' : '', 'expand-icon']"
-          />
-        </div>
-      </td>
-      <!-- spacing added if battery SOC is visible -->
-      <td :class="props.socValueVisible ? 'col-soc' : 'col-soc-spacer'">
-        <span v-if="props.socValueVisible && props.item.id === 'battery'">
-          {{ props.item.soc }}%
-        </span>
-      </td>
-      <td class="col-arrow">
+            <q-tooltip>{{ props.item.title }}</q-tooltip>
+          </div>
+        </template>
+        <template v-else>
+          {{ props.item.title }}
+        </template>
+        <!-- Expansion chevron icon -->
         <q-icon
-          v-if="props.currentPowerVisible"
-          :name="
-            arrowDirection(props.item.id).noCurrent
+          v-if="props.item.id === 'grid' && secondaryCountersConfigured"
+          name="keyboard_arrow_down"
+          :class="['expand-icon', { 'rotate-180': gridExpanded }]"
+        />
+      </div>
+    </div>
+    <!-- SOC -->
+    <div :class="props.socValueVisible ? 'col-soc' : 'col-soc-spacer'">
+      <span v-if="props.socValueVisible && props.item.id === 'battery'">
+        {{ props.item.soc }}%
+      </span>
+    </div>
+    <!-- Arrow -->
+    <div class="col-arrow">
+      <q-icon
+        v-if="props.currentPowerVisible"
+        :name="
+          item.id === 'house'
+            ? 'horizontal_rule'
+            : arrowDirection(item.id).noCurrent
               ? 'horizontal_rule'
               : 'double_arrow'
+        "
+        :class="{ 'rotate-180': arrowDirection(props.item.id).rotate180 }"
+      />
+    </div>
+    <!-- Power -->
+    <div class="col-power">
+      <span v-if="props.currentPowerVisible">
+        {{ props.item.power.replace('-', '') }}
+      </span>
+    </div>
+
+    <div class="col-flex"></div>
+
+    <!-- Right label -->
+    <div class="col-right-label text-weight-bold">
+      <slot name="right-label" :item="props.item">
+        <template
+          v-if="
+            props.item.id === 'grid' || props.item.id.startsWith('counter-')
           "
-          :class="{
-            'rotate-180': arrowDirection(props.item.id).rotate180,
-          }"
-        />
-      </td>
-      <td class="col-power">
-        <span v-if="props.currentPowerVisible">
-          {{ props.item.power.replace('-', '') }}
-        </span>
-      </td>
-      <td class="col-flex"></td>
-      <td class="col-right-label text-weight-bold">
-        <slot name="right-label" :item="props.item">
-          <template
-            v-if="
-              props.item.id === 'grid' || props.item.id.startsWith('counter-')
-            "
-          >
-            <div>Bezug:</div>
-            <div>Einspeisung:</div>
-          </template>
-        </slot>
-      </td>
-      <td class="col-right-value">
-        <slot name="right-value" :item="props.item">
-          <template
-            v-if="
-              props.item.id === 'grid' || props.item.id.startsWith('counter-')
-            "
-          >
-            <div>{{ props.item.today.imported }}</div>
-            <div>{{ props.item.today.exported }}</div>
-          </template>
-        </slot>
-      </td>
-    </tr>
-  </table>
+        >
+          <div>Bezug:</div>
+          <div>Einspeisung:</div>
+        </template>
+      </slot>
+    </div>
+    <!-- Right value -->
+    <div class="col-right-value">
+      <slot name="right-value" :item="props.item">
+        <template
+          v-if="
+            props.item.id === 'grid' || props.item.id.startsWith('counter-')
+          "
+        >
+          <div>{{ props.item.today.imported }}</div>
+          <div>{{ props.item.today.exported }}</div>
+        </template>
+      </slot>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -121,98 +128,137 @@ const arrowDirection = (id: string) => {
   const noCurrent = value === 0;
   let rotate180 = false;
 
-  if (id === 'grid' || id.startsWith('counter-')) {
-    rotate180 = value < 0;
-  } else if (id !== 'house') {
-    rotate180 = value > 0;
-  }
+  if (id === 'grid' || id.startsWith('counter-')) rotate180 = value < 0;
+  else if (id !== 'house') rotate180 = value > 0;
 
   return { noCurrent, rotate180 };
 };
 </script>
 
 <style scoped>
-.daily-table {
+.component-container {
+  display: flex;
+  align-items: center;
   width: 100%;
-  min-height: 42px;
-  border-collapse: collapse;
-}
-.daily-table td {
-  padding: 0px 6px !important;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-.row-height {
   height: v-bind(rowHeightCssValue);
+  gap: 0.4rem;
+  font-size: 0.9rem;
+  padding-inline: 0.5rem;
 }
-.daily-table td.col-icon img {
-  width: 28px;
-  display: block;
-  margin: 0 auto;
+/* allow columns to shrink properly in flex layout */
+.component-container > div {
+  min-width: 0;
+  flex-shrink: 1;
 }
 .col-icon {
-  width: 32px;
+  flex: 0 0 2rem;
+  display: flex;
+  justify-content: center;
+}
+.icon {
+  width: 1.75rem;
+  filter: brightness(0.4);
+}
+.body--dark .icon {
+  filter: brightness(1);
 }
 .col-title {
-  width: 85px;
-  max-width: 85px;
+  flex: 0 0 5.5rem;
+}
+.title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 .ellipsis-wrapper {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 85px;
+  white-space: nowrap;
+}
+.expand-icon {
+  font-size: 1.3rem;
+}
+.rotate-180 {
+  transform: rotate(180deg);
 }
 .col-soc {
-  width: 50px;
+  flex: 0 0 3rem;
   text-align: right;
   white-space: nowrap;
 }
 .col-soc-spacer {
-  width: 0 !important;
-  padding: 0 !important;
-  border: 0 !important;
-  overflow: hidden !important;
+  flex: 0 0 0;
+  overflow: hidden;
 }
 .col-arrow {
-  width: 24px;
+  flex: 0 0 1.3rem;
   text-align: center;
 }
 .col-power {
-  width: 70px;
+  flex: 0 0 4rem;
   text-align: right;
   white-space: nowrap;
 }
+/* flexible column before right-side labels */
 .col-flex {
-  width: auto;
+  flex: 1 1 auto;
+}
+.col-right-label,
+.col-right-value {
+  display: grid;
+  grid-template-rows: auto auto;
+  align-items: center;
+  white-space: nowrap;
 }
 .col-right-label {
-  width: 100px;
+  flex: 0 0 5rem;
   text-align: right;
-  white-space: nowrap;
 }
 .col-right-value {
-  width: 85px;
+  flex: 0 0 5rem;
   text-align: right;
-  white-space: nowrap;
 }
-.icon {
-  filter: brightness(0.4);
-}
-.body--dark .icon {
-  filter: brightness(1);
-}
-.rotate-180 {
-  transform: rotate(180deg);
-}
-.expand-icon {
-  font-size: 20px;
-  margin-left: 8px;
-  cursor: pointer;
+
+@media (max-width: 480px) {
+  .component-container {
+    font-size: 0.85rem;
+    gap: 0.3rem;
+  }
+  .col-title {
+    flex: 0 0 4.2rem;
+  }
+  .col-soc {
+    flex: 0 0 2.3rem;
+  }
+  .col-power {
+    flex: 0 0 3.4rem;
+  }
+  .col-right-label {
+    flex: 0 0 5rem;
+  }
+  .col-right-value {
+    flex: 0 0 5.5rem;
+  }
 }
-@media (max-width: 500px) {
-  .daily-table td {
-    font-size: 13px;
+
+@media (max-width: 380px) {
+  .component-container {
+    font-size: 0.75rem;
+  }
+  .col-title {
+    flex: 0 0 3.5rem;
+  }
+  .col-soc {
+    flex: 0 0 1.8rem;
+  }
+  .col-power {
+    flex: 0 0 2.8rem;
+  }
+  .col-right-label {
+    flex: 0 0 8rem;
+  }
+  .col-right-value {
+    flex: 0 0 5.5rem;
   }
 }
 </style>

From 5d281bae4c528181e71b2aca151bd5339c751bbe Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 11 Dec 2025 11:43:49 +0100
Subject: [PATCH 14/14] Move daily totals dark mode colors to quasar global CSS
 file

---
 .../components/charts/dailyTotals/DailyTotals.vue | 14 +++++++-------
 .../koala/source/src/css/quasar.variables.scss    | 15 +++++++++++++++
 2 files changed, 22 insertions(+), 7 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 af86baf6a9..7a9b8ae3e7 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
@@ -371,20 +371,20 @@ watch(
 }
 /* Dark mode overrides */
 .body--dark .grid {
-  background: #a13a41 !important;
-  border: 2px solid #da959a;
+  background: var(--q-dark-daily-totals-grid-fill);
+  border: 0.125rem solid var(--q-dark-daily-totals-grid-stroke);
 }
 .body--dark .battery {
-  background: #b97a1f;
-  border: 2px solid #e7c08a;
+  background: var(--q-dark-daily-totals-battery-fill);
+  border: 0.125rem solid var(--q-dark-daily-totals-battery-stroke);
 }
 .body--dark .pv {
-  background: #27623a;
+  background: var(--q-dark-daily-totals-pv-fill);
 }
 .body--dark .house {
-  background: #6e6e6e;
+  background: var(--q-dark-daily-totals-house-fill);
 }
 .body--dark .chargepoint {
-  background: #254a8c;
+  background: var(--q-dark-daily-totals-chargepoint-fill);
 }
 </style>
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 9db0f64daa..0c0d3f7f87 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
@@ -255,6 +255,14 @@ $dark-background-2: #010322;
 $dark-list: rgb(40, 42, 62);
 $dark-carousel: #8b8f9f;
 $dark-tab-icon: #d7d9e0;
+$dark-daily-totals-grid-fill: #a13a41;
+$dark-daily-totals-grid-stroke: #da959a;
+$dark-daily-totals-battery-fill: #b97a1f;
+$dark-daily-totals-battery-stroke: #e7c08a;
+$dark-daily-totals-pv-fill: #27623a;
+$dark-daily-totals-house-fill: #6e6e6e;
+$dark-daily-totals-chargepoint-fill: #254a8c;
+
 // Dark theme
 .body--dark {
   --q-primary: #{$dark-primary};
@@ -284,6 +292,13 @@ $dark-tab-icon: #d7d9e0;
   --q-battery-fill: #{$battery-fill};
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
+  --q-dark-daily-totals-grid-fill: #{$dark-daily-totals-grid-fill};
+  --q-dark-daily-totals-grid-stroke: #{$dark-daily-totals-grid-stroke};
+  --q-dark-daily-totals-battery-fill: #{$dark-daily-totals-battery-fill};
+  --q-dark-daily-totals-battery-stroke: #{$dark-daily-totals-battery-stroke};
+  --q-dark-daily-totals-pv-fill: #{$dark-daily-totals-pv-fill};
+  --q-dark-daily-totals-house-fill: #{$dark-daily-totals-house-fill};
+  --q-dark-daily-totals-chargepoint-fill: #{$dark-daily-totals-chargepoint-fill};
 
   // Main background
   background-color: $dark-page;