/* ==========================================================================
   Hengxin Cloud · Department management
   ========================================================================== */

.member-department {
  display: inline-flex;
  align-items: center;
  max-width: 130px;
  padding: 2px 6px;
  border: 1px solid #e4ecf6;
  border-radius: 5px;
  background: #f4f8fd;
  color: #526983;
  font-size: 8.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.department-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 14px;
}
.department-toolbar h2 {
  margin-top: 3px;
  color: #000;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.035em;
}
.department-toolbar p {
  margin-top: 4px;
  color: #64788f;
  font-size: 9.5px;
}
.department-toolbar .btn { flex: 0 0 auto; }
.department-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.department-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e9f2;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.department-card:hover {
  border-color: #c7d9ed;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .055);
  transform: translateY(-1px);
}
.department-card.inactive { opacity: .68; }
.department-card-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #dfe9f7;
  border-radius: 9px;
  background: #f0f6ff;
  color: #2563eb;
}
.department-card-icon .icon { width: 15px; height: 15px; }
.department-card-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.department-card-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.department-card-top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
  font-size: 11.5px;
  font-weight: 600;
}
.department-status {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #f6f8fb;
  color: #71849a;
  font-size: 7px;
}
.department-status.active {
  border-color: #d7e6fa;
  background: #f0f7ff;
  color: #1d4ed8;
}
.department-card-code {
  color: #7b8fa6;
  font-family: var(--font-num);
  font-size: 7.5px;
  letter-spacing: .025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.department-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  color: #5f7187;
  font-size: 8px;
}
.department-card-desc {
  display: -webkit-box;
  color: #6c8097;
  font-size: 8.5px;
  line-height: 1.55;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.department-card-arrow {
  color: #8ba0b6;
  padding-top: 2px;
}
.department-card-arrow .icon { width: 12px; height: 12px; }

.department-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eef3f9;
  margin-bottom: 14px;
}
.department-detail-seal {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #dbe8f6;
  border-radius: 11px;
  background: #f0f6ff;
  color: #2563eb;
}
.department-detail-seal .icon { width: 18px; height: 18px; }
.department-detail-name {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #000;
  font-size: 15px;
  font-weight: 650;
}
.department-detail-sub { margin-top: 3px; color: #70849b; font-size: 9px; }
.department-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 13px;
  border: 1px solid #e8eef7;
  border-radius: 10px;
  background: #fbfdff;
}
.department-info-grid div { display: flex; flex-direction: column; gap: 3px; }
.department-info-grid span { color: #8294a9; font-size: 8px; }
.department-info-grid strong { color: #000; font-size: 10px; font-weight: 500; }
.department-detail-desc {
  padding: 12px 13px;
  border: 1px solid #eef3f9;
  border-radius: 9px;
  background: #fbfcff;
  color: #536980;
  font-size: 9.5px;
  line-height: 1.7;
}
.dept-member-list { display: flex; flex-direction: column; gap: 5px; }
.dept-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid #e9eff7;
  border-radius: 8px;
  background: #fff;
}
.dept-member-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dept-member-main strong { color: #000; font-size: 10px; font-weight: 500; }
.dept-member-main span { color: #7a8da3; font-size: 8px; }
.dept-member-row .status-pill { flex: 0 0 auto; }
.dept-member-row .btn { flex: 0 0 auto; height: 23px; font-size: 8px; }

.dept-pick-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 410px;
  overflow-y: auto;
}
.dept-pick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid #e7eef7;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dept-pick-item:hover { border-color: #c6d9ee; background: #fbfdff; }
.dept-pick-item input { accent-color: #2563eb; }
.dept-pick-item > span:not(.avatar) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dept-pick-item strong { color: #000; font-size: 10px; font-weight: 500; }
.dept-pick-item small { color: #7b8ea4; font-size: 8px; }

@media (max-width: 1180px) {
  .department-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .department-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .department-grid { grid-template-columns: 1fr; }
  .department-card { padding: 13px; }
  .department-info-grid { grid-template-columns: 1fr 1fr; }
}