/* pages/managers.css */
/* ---------- HH Employer groups + manager roster (F1 / employer-managers page) ---------- */
.employer-group {
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--border-subtle);
}
.employer-group:last-child { border-bottom: none; margin-bottom: 0; }
.employer-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.employer-group__head h3 {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
/* Coverage chip: "подключено K из N" — muted pill-style badge */
.employer-group__coverage {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  white-space: nowrap;
}
/* Container for "not yet connected" manager rows */
.manager-roster { margin-top: var(--space-8); display: grid; gap: var(--space-8); }
/* Individual not-connected row: flex, muted dashed appearance */
.manager-roster__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  background: var(--bg-elevated);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-8);
}
.manager-roster__name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--fs-body);
}
/* "все подключены" note when nothing to connect */
.manager-roster--all-connected {
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding: var(--space-4) 0;
}

/* ---------- Manager card extras (usage bar + danger state) ---------- */
.manager-card--danger { border-left: 3px solid var(--danger); }
.manager-card__usage {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.manager-card__usage-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}
.manager-card__usage-counter { color: var(--text-secondary); }
.manager-card__usage-bar {
  position: relative;
  height: 4px;
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.manager-card__usage-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--ok);
  transition: width var(--dur-slow) var(--ease-out);
}
.manager-card__usage-fill--warn   { background: var(--warn); }
.manager-card__usage-fill--danger { background: var(--danger); }

/* U1.2 — manager-card meta rows (employer/manager_id/oauth) */
.manager-card__meta-row {
  display: flex;
  gap: var(--space-8);
  align-items: baseline;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.manager-card__meta-row .caps {
  min-width: 80px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
}
.manager-card__copy {
  cursor: pointer;
  user-select: all;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.manager-card__copy:hover { color: var(--accent); }
/* U5.2 — token-revoked banner */
.manager-card__banner {
  margin-top: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-6);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.manager-card__banner--danger {
  background: rgba(217, 59, 59, 0.12);
  color: var(--danger);
  border: 1px solid rgba(217, 59, 59, 0.3);
}