${esc(tr('groups.mode'))}${esc(modeLabelForGroup(state.mode))}
${esc(tr('groups.profile'))}${esc(presetLabelForGroup(state.preset))}
${esc(tr('groups.members'))}${state.zones.length}
` : ''}
diff --git a/web/styles.css b/web/styles.css
index d49d09f..a41c9ff 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -5923,22 +5923,26 @@ textarea[aria-invalid="true"] {
}
}
-/* Group OFF powers members down but releases group ownership; OFF groups do not membership-block thermostats. */
-.list-card.group-card.group-linked {
- border-color: color-mix(in srgb, var(--group-control-color) 42%, var(--line));
-}
-
+/* Idle groups keep the card neutral; only the state badge carries the group color. */
+.list-card.group-card.group-linked,
.list-card.group-card.group-off {
- border-style: dashed;
- border-color: color-mix(in srgb, var(--group-control-color) 62%, var(--line));
+ border-style: solid;
+ border-color: var(--line);
+ box-shadow: none;
}
+.group-on-badge,
.group-off-badge {
color: var(--group-control-color);
- border: 1px dashed color-mix(in srgb, var(--group-control-color) 55%, var(--line));
+ border: 1px solid color-mix(in srgb, var(--group-control-color) 58%, var(--line));
background: color-mix(in srgb, var(--group-control-color) 7%, var(--surface));
}
+.group-off-badge {
+ border-style: dashed;
+}
+
+/* Color the whole group card only while the group is the active control source. */
.list-card.group-card.group-linked.group-controlled {
border-style: solid;
border-color: var(--group-control-color);