:root {
--circle: 0,0,0,0.0;}

/* ───────── 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); color: var(--ink)}
.client-card .btn:hover{ background:var(--brand1); color:#f3f5f2; }

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

#clientDashboardHeading, .report-title{
  font-weight:500; font-size:24px; line-height:1.2; color:var(--ink); 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{}

.reports-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.reports-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reports-controls select {
  min-width: 180px;
}

#reportsShareBtn:disabled {
  opacity: 0.4;
  cursor: default;
}

.reports-controls select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
  position: relative;
border-bottom: 1px solid var(--line);
border-radius: 0;
margin-right: 16px;
}

.legend-row {
	margin-bottom: 4px;
}
.legend-row {
	margin-bottom: 4px;
}
.legend-subgroup {
	margin-top: 20px;
	border-top: 1px solid var(--line);
	width: 60%;
	padding-top: 8px;
}

/* Scope just to the reports table */
table.projects.projects--reports {
  table-layout: fixed; /* optional, but helps enforce widths */
  width: 100%;
}

/* 1. Project */
table.projects.projects--reports th:nth-child(1),
table.projects.projects--reports td:nth-child(1) {
  width: 32ch;
}

/* 2. Client */
table.projects.projects--reports th:nth-child(2),
table.projects.projects--reports td:nth-child(2) {
  width: 18ch;
}

/* 3. Company */
table.projects.projects--reports th:nth-child(3),
table.projects.projects--reports td:nth-child(3) {
  width: 26ch;
}

/* 4. Status */
table.projects.projects--reports th:nth-child(4),
table.projects.projects--reports td:nth-child(4) {
  width: 12ch;
}

/* 5. Start date */
table.projects.projects--reports th:nth-child(5),
table.projects.projects--reports td:nth-child(5) {
  width: 11ch;
}

/* 6. Due date */
table.projects.projects--reports th:nth-child(6),
table.projects.projects--reports td:nth-child(6) {
  width: 11ch;
}

/* 7. Value (internal) */
table.projects.projects--reports th:nth-child(7),
table.projects.projects--reports td:nth-child(7) {
  width: 13ch;
}

table.projects.projects--reports td:nth-child(7) {
  font-weight:500;
}

.dashboard-card--donut > header{font-size: 18px; font-weight: 400;}

.donut-layout {
	background: rgba(0,0,0,0.025);
	padding: 16px;
	margin-top: 16px;
	border-radius: 16px;
}

/* ---------- Reports donut legends ---------- */

.donut-legend {
  display: grid;
  gap: 4px;
}

.donut-legend .legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.donut-legend .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.donut-legend .legend-dot--sub {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: none;
  background: none /* or a neutral bullet */
}