/*
 * 人员管理与月度工资结算专属布局
 * 设计基准：第 25 稿网页的“横向台账 + 纵向业务层级”。
 * 不能让专属页面作为 dashboard 的单个四分之一网格项渲染，
 * 否则会出现文字逐字换行、指标卡变成窄条的问题。
 */
#dashboardPanel.dashboard > .hrWorkspace,
#dashboardPanel.dashboard > .settlementWorkspace {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
}

.hrWorkspace,
.settlementWorkspace {
  overflow: visible !important;
}

.hrWorkspace > *,
.settlementWorkspace > * {
  min-width: 0 !important;
}

/* 页头保持一行主信息；较窄时自然换行，而不是压缩文字。 */
.hrHeader,
.settlementHeader {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 16px !important;
}

.hrHeader > div:first-child,
.settlementHeader > div:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.hrHeaderMeta,
.settlementHeaderMeta {
  flex: 0 0 auto !important;
}

/* 四项经营指标改为最低宽度卡片，空间不足自动折行。 */
.hrStats,
.settlementStats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
}

.hrStats article,
.settlementStats > article {
  min-width: 190px !important;
  min-height: 126px !important;
  padding: 16px 18px !important;
  overflow: hidden !important;
}

.hrStats b,
.settlementStats b {
  font-size: 28px !important;
  line-height: 1.16 !important;
  white-space: nowrap !important;
}

.hrStats small,
.settlementStats small {
  font-size: 13px !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}

/* 人员工作区：角色卡以两列横向展开，使用常规行高。 */
.hrMasterPanel,
.settlementTablePanel {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.hrRoleOverview {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

.hrRoleCard,
.hrGuideStrip,
.settlementFilters,
.settlementSteps {
  min-width: 0 !important;
}

.hrRoleCard {
  padding: 18px !important;
}

.hrRoleCard p,
.hrRoleCard small,
.hrGuideStrip p {
  line-height: 1.6 !important;
  word-break: break-word !important;
}

/* 五步工资流程采用可换行横向步骤，不再强制挤成五根细柱。 */
.settlementSteps {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px !important;
  box-sizing: border-box !important;
}

.settlementSteps > div {
  flex: 1 1 190px !important;
  min-width: 190px !important;
  min-height: 84px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
}

.settlementSteps b {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.settlementSteps span {
  font-size: 13px !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}

/* 筛选、草稿表和操作区按整行显示，复杂台账始终放在横向滚动容器中。 */
.settlementFilters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.settlementFilterFields {
  display: flex !important;
  flex: 1 1 540px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.settlementFilterFields label {
  flex: 1 1 180px !important;
  min-width: 180px !important;
}

.payrollTable,
.settlementTablePanel .tableWrap {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.payrollTable table {
  min-width: 1040px !important;
}

@media (max-width: 1100px) {
  .hrRoleOverview { grid-template-columns: 1fr !important; }
  .hrStats, .settlementStats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .hrHeader, .settlementHeader { flex-direction: column !important; }
  .hrHeaderMeta, .settlementHeaderMeta { width: 100% !important; }
  .hrStats, .settlementStats { grid-template-columns: 1fr !important; }
  .hrStats article, .settlementStats > article { min-width: 0 !important; min-height: 0 !important; }
  .settlementSteps > div { flex-basis: 100% !important; min-width: 0 !important; }
  .settlementFilterFields, .settlementFilterFields label { flex-basis: 100% !important; min-width: 0 !important; }
}