/* ───────── Base (light) ───────── */

.clients-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0;
}

.clients-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:12px;
}

.client-card{
  background:rgba(255,255,255,0.5);
  border-radius:14px;
  padding:12px;
}

.client-card header{ font-weight:500; margin-bottom:6px; }
.client-card .muted{ color:var(--muted); }

.client-card .actions{ display:flex; gap:8px; margin-top:8px; }
.client-card .btn{ background:rgba(0,0,0,.08); }
.client-card .btn:hover{ background:var(--brand1); color:#f3f5f2; }

/* ───────── Dashboard (light) ───────── */

#clientDashboardHeading{
  font-weight:500; font-size:18px; line-height:1.2; color:#222; margin:14px 0 6px;
}

#clientDeepDiveModal .subcard{
  background:rgba(0,0,0,.03);
  border-radius:14px;
  padding:12px;
}

#clientDashboard .dashboard-card{
  background:rgba(0,0,0,.03);
  border-radius:14px;
  padding:12px;
}

#clientDashboard .dashboard-card>header,
#clientDeepDiveModal .subcard>.subhead{
  color:#222; font-weight:400; margin-bottom:6px; font-size:13px; letter-spacing:.02em;
}

#clientDashboard .donut-legend,
#clientDeepDiveModal .donut-legend{
  display:grid; gap:6px; align-content:center; font-size:12px; color:#222;
}

#clientDashboard svg text,
#clientDeepDiveModal svg text { fill: var(--ink); }

/* Mini donut text (light) */
.client-card .mini-viz-text{ font-size:12px; color:#222; }
.client-card .mini-viz-text strong{ color:#111; }

/* ───────── Company grouping (Clients view) ───────── */

/* Host grid (critical for layout) */
.company-groups{
  display:grid;
  grid-auto-flow:row dense;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

/* Wrapper structure; visual chrome added below for multi */
.company-group{ margin:4px 0; border-radius:16px; padding:8px; background:rgba(0,0,0,.03)}

/* Title */
.company-group-title{
  margin:0 0 8px 2px;
  font-weight:400;
  font-size:16px;
  letter-spacing:.2px;
  color:#111; /* readable on light */
}

/* Multi-client group: inner 2-col grid */
.company-group--multi .company-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}

/* Singleton: no chrome, stretches to match tall neighbors */
.company-group--single{
  padding:0; border:none; background:transparent;
  display:grid; grid-template-rows:auto 1fr; gap:8px; align-self: start;
}
.company-group--single .company-grid{
  display:grid; grid-template-rows:auto;
}
.company-group--single .client-card{
  height:auto; display:block; flex-direction:column; 
}
.company-group--single .client-card .actions{ margin-top:auto; }

/* Light theme chrome for multi (scoped to Clients view) */
html[data-theme="lt"] #view-clients .company-group--multi{
  background:rgba(0,0,0,1);
}

/* Responsive collapse */
@media (max-width:820px){
  .company-groups{ grid-template-columns:1fr !important; }
  .company-group{ grid-column:span 1 !important; }
  .company-grid{ grid-template-columns:1fr !important; }
}

/* hook: .company-grid may be themed later */
.company-grid{}