From dbbde6c4fabb6eb6d91427966f324d4137ba1a56 Mon Sep 17 00:00:00 2001
From: Thomas Reitz <T.Reitz@xinion.de>
Date: Wed, 11 Mar 2026 20:15:19 +0100
Subject: [PATCH] style(crm): indent and color-highlight contact sub-rows

Sub-rows now have an indigo left border, tinted background and stronger
indent to visually separate them from company rows. Dark mode variants
included. Expanded company row also gets a primary-colored left border.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../crm/companies/CompaniesPage.module.css    | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/crm/companies/CompaniesPage.module.css b/packages/frontend/src/crm/companies/CompaniesPage.module.css
index 2a3a70e..c70339a 100644
--- a/packages/frontend/src/crm/companies/CompaniesPage.module.css
+++ b/packages/frontend/src/crm/companies/CompaniesPage.module.css
@@ -90,33 +90,53 @@
 /* Company row when expanded */
 .expandedRow {
   background: var(--color-bg);
+  border-left: 3px solid var(--color-primary);
+}
+
+:global([data-theme='dark']) .expandedRow {
+  background: rgba(99, 102, 241, 0.04);
 }
 
 /* Contact sub-rows */
 .subRow {
-  background: var(--color-bg);
+  background: rgba(99, 102, 241, 0.03);
   border-bottom: 1px solid var(--color-border);
+  border-left: 3px solid rgba(99, 102, 241, 0.3);
   cursor: pointer;
+  transition: background 0.15s;
 }
 
 .subRow:hover {
-  background: var(--color-bg-card);
+  background: rgba(99, 102, 241, 0.07);
+}
+
+:global([data-theme='dark']) .subRow {
+  background: rgba(99, 102, 241, 0.06);
+  border-left-color: rgba(129, 140, 248, 0.4);
+}
+
+:global([data-theme='dark']) .subRow:hover {
+  background: rgba(99, 102, 241, 0.12);
 }
 
 .subRowIndent {
-  padding: 0.5rem 0.5rem 0.5rem 1rem;
-  width: 40px;
+  padding: 0.5rem 0.5rem 0.5rem 2rem;
+  width: 56px;
   position: relative;
 }
 
 .subRowConnector {
   display: block;
-  width: 12px;
+  width: 16px;
   height: 1px;
-  background: var(--color-border);
+  background: rgba(99, 102, 241, 0.3);
   margin-left: auto;
 }
 
+:global([data-theme='dark']) .subRowConnector {
+  background: rgba(129, 140, 248, 0.35);
+}
+
 .subRowCell {
   padding: 0.5rem 1rem;
   font-size: 0.8125rem;
@@ -126,7 +146,7 @@
 .subRowLoading,
 .subRowError,
 .subRowEmpty {
-  padding: 0.75rem 1rem 0.75rem 3.5rem;
+  padding: 0.75rem 1rem 0.75rem 4.5rem;
   font-size: 0.8125rem;
   color: var(--color-text-muted);
   font-style: italic;