/* Compact Health-style dashboard, projected from the existing local data. */
.connections-dashboard {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--sf-space-5);
  margin-top: var(--sf-space-5);
  font: 400 14px/1.5 var(--sf-font);
  color: var(--sf-fg);
}
.connections-dashboard .dashboard-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 280px;
  padding: 24px 26px;
  border: 0;
  border-radius: var(--sf-radius-lg);
}
.connections-dashboard .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-3);
}
.connections-dashboard .dashboard-card-head h3 {
  margin: 0;
  color: inherit;
  font: 400 18px/1.3 var(--sf-font);
  letter-spacing: -.35px;
}
.connections-dashboard .dashboard-card-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--sf-text-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.connections-dashboard .dashboard-card-icon svg { width: 18px; height: 18px; }
.connections-dashboard .dashboard-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-2);
  margin-top: auto;
  padding-top: 18px;
}
.connections-dashboard .dashboard-card-footer .sf-button {
  min-height: 35px;
  padding: 9px 13px;
  gap: 6px;
  font: 400 12px/1.3 var(--sf-font);
  white-space: normal;
}
.connections-dashboard .dashboard-card-footer .sf-button svg { width: 14px; height: 14px; flex-shrink: 0; }
.connections-dashboard .dashboard-assignment {
  --sf-fg: var(--sf-ink);
  --sf-text-muted: var(--sf-muted);
  color: var(--sf-fg);
  background: var(--j-dashboard-gradient,radial-gradient(ellipse at 4% 0,#fffafb,transparent 73%),linear-gradient(145deg,#f6edf0,#f0e5ee));
}
.connections-dashboard .dashboard-assignment-body {
  display: grid;
  grid-template-columns: 124px minmax(0,1fr);
  align-items: center;
  gap: 22px;
  margin-top: 15px;
}
.connections-dashboard .dashboard-ring { position: relative; width: 124px; height: 124px; }
.connections-dashboard .dashboard-ring-svg { display: block; width: 124px; height: 124px; overflow: visible; }
.connections-dashboard .dashboard-ring-svg circle { fill: none; stroke-width: 8; }
.connections-dashboard .dashboard-ring-track { stroke: var(--sf-track); }
.connections-dashboard .dashboard-ring-progress { stroke: var(--sf-accent); stroke-linecap: round; transition: stroke-dashoffset 480ms var(--sf-ease); }
.connections-dashboard .dashboard-ring-copy { position: absolute; inset: 0; display: grid; place-items: center; }
.connections-dashboard .dashboard-ring-copy strong { font: 400 29px/1.15 var(--sf-font); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.connections-dashboard .dashboard-ring-copy strong>span:last-child { margin-left: 2px; font-size: 14px; letter-spacing: 0; }
.connections-dashboard .dashboard-assignment-stats { min-width: 0; }
.connections-dashboard .dashboard-assignment-stats>strong { display: block; font: 400 26px/1.2 var(--sf-font); letter-spacing: -.65px; font-variant-numeric: tabular-nums; }
.connections-dashboard .dashboard-assignment-stats>strong>small { font-size: 16px; font-weight: 400; color: var(--sf-text-muted); letter-spacing: -.2px; }
.connections-dashboard .dashboard-assignment-stats>span { display: block; max-width: 210px; margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--sf-text-muted); }
.connections-dashboard .dashboard-assignment .sf-button--ghost { color: var(--sf-text-muted); }
.connections-dashboard .dashboard-assignment .sf-button--ghost:hover { color: var(--sf-fg); background: var(--sf-selected-fill); }
.connections-dashboard .dashboard-approvals-body {
  display: grid;
  grid-template-columns: minmax(70px,.42fr) minmax(0,1fr);
  align-items: center;
  gap: 28px;
  min-height: 124px;
  margin-top: 15px;
}
.connections-dashboard .dashboard-total { margin: 0; min-width: 0; }
.connections-dashboard .dashboard-total>strong { display: block; font: 400 42px/1.05 var(--sf-font); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.connections-dashboard .dashboard-total>span { display: block; margin-top: 8px; color: var(--sf-text-muted); font-size: 13px; }
.connections-dashboard .dashboard-bars { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.connections-dashboard .dashboard-bar-row { --dashboard-bar-color: var(--sf-accent); }
.connections-dashboard .dashboard-bar-calendar { --dashboard-bar-color: var(--sf-success); }
.connections-dashboard .dashboard-bar-crm { --dashboard-bar-color: var(--sf-warning); }
.connections-dashboard .dashboard-bar-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.connections-dashboard .dashboard-bar-label>span { display: inline-flex; align-items: center; gap: 7px; color: var(--sf-text-muted); }
.connections-dashboard .dashboard-bar-label svg { width: 13px; height: 13px; }
.connections-dashboard .dashboard-bar-label>strong { font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.connections-dashboard .dashboard-bar-track { height: 5px; overflow: hidden; border-radius: var(--sf-radius-pill); background: var(--sf-track); }
.connections-dashboard .dashboard-bar-track>span { display: block; height: 100%; border-radius: inherit; background: var(--dashboard-bar-color); transition: width 360ms var(--sf-ease); }
.connections-dashboard .dashboard-note { margin: 8px 0 0; font-size: 12px; color: var(--sf-text-muted); }
@media(max-width:760px) {
  .connections-dashboard { grid-template-columns: minmax(0,1fr); gap: var(--sf-space-4); }
  .connections-dashboard .dashboard-card { min-height: 280px; padding: 22px; border-radius: var(--sf-radius-md); }
}
@media(max-width:420px) {
  .connections-dashboard .dashboard-card { padding: 21px; }
  .connections-dashboard .dashboard-assignment-body { grid-template-columns: 112px minmax(0,1fr); gap: 17px; }
  .connections-dashboard .dashboard-ring,.connections-dashboard .dashboard-ring-svg { width: 112px; height: 112px; }
  .connections-dashboard .dashboard-assignment-stats>strong { font-size: 24px; }
  .connections-dashboard .dashboard-assignment-stats>span { font-size: 12px; }
  .connections-dashboard .dashboard-approvals-body { grid-template-columns: 78px minmax(0,1fr); gap: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .connections-dashboard :is(.dashboard-ring-progress,.dashboard-bar-track>span) { transition: none; }
}