/* Unified personnel presentation: avatar + name on a neutral rounded surface. */
.person-card{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:none;
  height:26px;
  min-height:26px;
  flex:0 0 auto;
  padding:2px 9px 2px 2px;
  border-radius:999px;
  background:var(--bg-button,#F2F3F5);
  color:var(--text,#1F2329);
  font-size:12px;
  font-weight:400;
  line-height:18px;
  vertical-align:middle;
  box-sizing:border-box;
}
.person-card-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin-right:6px;
  flex:0 0 22px;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(135deg,#5B8FF9,#7C3AED);
  color:#fff;
  font-size:10px;
  font-weight:600;
  line-height:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
}
.person-card[data-person-tone="1"] .person-card-avatar{background:linear-gradient(135deg,#00A870,#36CFC9)}
.person-card[data-person-tone="2"] .person-card-avatar{background:linear-gradient(135deg,#F28C2C,#F7BA1E)}
.person-card[data-person-tone="3"] .person-card-avatar{background:linear-gradient(135deg,#7C3AED,#C084FC)}
.person-card[data-person-tone="4"] .person-card-avatar{background:linear-gradient(135deg,#0E7490,#67E8F9)}
.person-card[data-person-tone="5"] .person-card-avatar{background:linear-gradient(135deg,#C2410C,#FB923C)}
.person-card-avatar::before{content:attr(data-initial)}
.person-card-label{
  min-width:max-content;
  flex:0 0 auto;
  white-space:nowrap;
}
.person-card-label b{font-weight:400}
.person-card-cell{white-space:nowrap}
.person-card-column{
  width:var(--person-column-width,116px)!important;
  min-width:var(--person-column-width,116px)!important;
  max-width:var(--person-column-width,116px)!important;
}
.person-card-embedded{
  gap:0!important;
  height:26px!important;
  min-height:26px!important;
  width:max-content!important;
  max-width:none!important;
  padding:2px 9px 2px 2px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--bg-button,#F2F3F5)!important;
  color:var(--text,#1F2329)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:18px!important;
}

html body[data-current-page="deptpermissions"] #page-deptpermissions.show .dpm-picker-trigger{
  overflow:hidden;
}
html body[data-current-page="deptpermissions"] #page-deptpermissions.show .dpm-picker-text{
  max-width:100%;
}

/* The fill table previously forced its frozen name column to 80px. Keep the
   frozen layout, but let the shared person-card measurement own that width. */
html body[data-current-page="fill2"] #page-fill2.show #fill2-tbl :is(th,td).sc2.person-card-column,
.fill2-page-sticky-head thead th.sc2.person-card-column{
  width:var(--person-column-width,116px)!important;
  min-width:var(--person-column-width,116px)!important;
  max-width:var(--person-column-width,116px)!important;
}

/* Task progress: reveal every person name in a portal tooltip on hover/focus. */
html body[data-current-page="task"] #page-task.show #task-designer-progress-table .task-person-hover-cell{
  overflow:visible;
}
html body[data-current-page="task"] #page-task.show #task-designer-progress-table .task-person-hover-target{
  display:inline-flex;
  align-items:center;
  min-width:0;
  max-width:100%;
  cursor:default;
  border-radius:999px;
  outline:none;
}
html body[data-current-page="task"] #page-task.show #task-designer-progress-table .task-person-hover-target:focus-visible{
  box-shadow:0 0 0 2px rgba(51,112,255,.28);
}
.task-person-list-tooltip{
  position:fixed;
  z-index:2200;
  width:max-content;
  min-width:180px;
  max-width:min(360px,calc(100vw - 24px));
  padding:10px 12px 12px;
  border:1px solid #E5E6EB;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 24px rgba(31,35,41,.16);
  color:#1F2329;
  pointer-events:none;
  box-sizing:border-box;
}
.task-person-list-tooltip[hidden]{display:none!important}
.task-person-list-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
  font-size:12px;
  line-height:18px;
}
.task-person-list-title b{font-weight:600}
.task-person-list-title span{color:#8F959E}
.task-person-list-body{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:334px;
}
