/* C4 model editor. Each element is a g.person-man group; a <g> paints no stroke, so relay the
   hover/selection outline onto the group's shape (rect for a box, path for a cylinder). Boundaries
   are dashed <rect> that carry their own stroke, so they highlight directly. Relationship lines are
   <line>/<path>; their label <text> gets the accent fill (a stroke reads badly on text). */

/* element group -> outline its inner shape */
.dia-c4 .flow-canvas g.person-man.dia-pick-hover > rect,
.dia-c4 .flow-canvas g.person-man.dia-pick-hover > path {
  stroke: rgba(59, 110, 246, 0.5) !important;
  stroke-width: 2px !important;
}
.dia-c4 .flow-canvas g.person-man.dia-pick-sel > rect,
.dia-c4 .flow-canvas g.person-man.dia-pick-sel > path {
  stroke: var(--accent, #3b6ef6) !important;
  stroke-width: 3px !important;
}

/* boundary dashed rect highlights directly */
.dia-c4 .flow-canvas rect.dia-pick-hover {
  stroke: rgba(59, 110, 246, 0.6) !important;
  stroke-width: 2px !important;
}
.dia-c4 .flow-canvas rect.dia-pick-sel {
  stroke: var(--accent, #3b6ef6) !important;
  stroke-width: 3px !important;
}

/* relationship label text -> accent fill, not a stroke outline */
.dia-c4 .flow-canvas text.dia-pick-hover,
.dia-c4 .flow-canvas text.dia-pick-sel { stroke: none !important; }
.dia-c4 .flow-canvas text.dia-pick-sel { fill: var(--accent, #3b6ef6) !important; }