.user-directory {
  color: #183e46;
  font-size: 14px;
  min-width: 0;
}
.ud-search {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ud-search input {
  flex: 0 1 320px;
  width: 320px;
  min-width: 140px;
}
.ud-search input,
.ud-search select {
  border: 1px solid #b8cbce;
  border-radius: 6px;
  padding: 9px;
  background: white;
}
.ud-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.ud-chip {
  background: #e6f0eb;
  border-radius: 20px;
  padding: 6px 10px;
}
.ud-chip button {
  border: 0;
  background: none;
  margin-left: 8px;
}
.ud-status {
  color: #607a82;
  line-height: 1.6;
}
.ud-body {
  display: grid;
  grid-template-columns: minmax(160px, 27%) minmax(0, 1fr);
  gap: 16px;
}
.ud-tree {
  border: 1px solid #d4e0e2;
  border-radius: 8px;
  padding: 10px;
  max-height: 450px;
  overflow: auto;
}
.ud-tree details {
  margin: 10px 0 10px 8px;
}
.ud-tree summary {
  cursor: pointer;
}
.ud-branch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.ud-results {
  max-height: 450px;
  overflow: auto;
  border: 1px solid #d4e0e2;
  border-radius: 8px;
}
.ud-person {
  padding: 12px;
  border-bottom: 1px solid #e4eded;
}
.ud-person:last-child {
  border: 0;
}
.ud-user {
  display: flex;
  gap: 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ud-person small {
  display: block;
  margin: 6px 0 0 24px;
  color: #688087;
}
.ud-detail {
  margin: 8px 0 0 24px;
}
.ud-detail summary {
  color: #537b84;
  cursor: pointer;
}
.ud-detail div {
  white-space: pre-wrap;
  background: #f3f7f7;
  padding: 10px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.ud-pager {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}
.ud-dialog {
  width: min(1000px, 94vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid #b8cbce;
  border-radius: 14px;
  padding: 24px;
}
.ud-dialog::backdrop {
  background: #173d465c;
}
.ud-dialog > .btn {
  margin: 18px 8px 0 0;
}
@media (max-width: 600px) {
  .ud-body {
    grid-template-columns: 1fr;
  }
  .ud-tree {
    max-height: 250px;
  }
  .ud-search select {
    max-width: 100%;
  }
  .ud-dialog {
    padding: 12px;
  }
  .ud-search input {
    width: 100%;
  }
}

/* 关系类型分组、节点复选与列表批量操作。 */
.ud-list-toolbar {display:flex;align-items:center;gap:10px;margin:12px 0;flex-wrap:wrap}
.ud-list-toolbar small {color:#607a82}
.ud-relation>summary {list-style:none;display:flex;gap:8px;font-weight:600;padding:8px 0}
.ud-relation>summary::-webkit-details-marker {display:none}
.ud-relation>div {padding-left:1em}
.ud-relation[data-relation-kind="course"]>div {padding-left:3em}
.ud-branch {flex-wrap:nowrap;gap:7px;padding:6px 0;align-items:flex-start}
.ud-branch input {flex:none;margin-top:5px}
.ud-toggle {border:1px solid #b8cbce;border-radius:3px;background:white;flex:none;width:21px;line-height:19px;padding:0}
.ud-node-label {border:0;background:none;color:#17576a;text-align:left;padding:0;overflow-wrap:anywhere;line-height:1.6}
.ud-tree-children {margin-left:15px;border-left:1px solid #d4e0e2;padding-left:8px}
.ud-category>.ud-branch>.ud-node-label {font-weight:600}
.ud-category>.ud-tree-children {margin-left:0;padding-left:1em;border-left:0}
.ud-node-label.ud-current {background:#e6f0eb;color:#123f50;box-shadow:0 0 0 3px #e6f0eb;border-radius:3px}
.ud-person .ud-identity {margin:6px 0 0 24px;font-size:13px;line-height:1.65;color:#45636a}
.ud-pager {flex-wrap:wrap}
.ud-dialog {width:min(1180px,96vw)}

.ud-dialog[open] {display:flex;flex-direction:column;overflow:hidden}
.ud-dialog>.user-directory {overflow:auto;min-height:0}
.ud-dialog-actions {display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;background:white;border-top:1px solid #e4eded;padding-top:14px;margin-top:12px}
.ud-dialog-actions>.btn:first-child {margin-right:auto}
.ud-dialog .ud-tree,.ud-dialog .ud-results {max-height:min(450px,42vh)}

.ud-user {align-items:center}
.ud-user-name {border:0;background:none;color:#17576a;font:inherit;text-align:left;padding:0;cursor:pointer;overflow-wrap:anywhere}
.ud-user-name:hover {text-decoration:underline}
.ud-search {align-items:center}
.ud-search>.btn {white-space:nowrap}
@media(max-width:600px){.ud-search input{flex:1 1 180px;width:auto}}