kd-aiot-frontend-hr/src/styles/views/employeeArchive/index.scss

.employee-archive-page {
  --primary: #1890ff;
  --ink: #19243a;
  --muted: #7c899d;
  min-height: auto;
  padding: 0;
  color: var(--ink);
  background: transparent;
}
.metric-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.metric-card { position: relative; min-height: 96px; display: flex; align-items: center; gap: 14px; padding: 18px 20px; overflow: hidden; border: 1px solid rgba(211, 221, 235, .78); border-radius: 15px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 26px rgba(37, 67, 111, .07); transition: transform .2s ease, box-shadow .2s ease; }
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(37, 67, 111, .11); }
.metric-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 14px; font-size: 22px; }
.metric-main { min-width: 0; flex: 1; }
.metric-main > span, .metric-main strong { display: block; }
.metric-main > span { color: var(--muted); font-size: 14px; line-height: 1.2; }
.metric-main strong { margin-top: 6px; color: #26374c; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.metric-main small { margin-left: 4px; color: #758397; font-size: 14px; font-weight: 400; }
.tone-blue .metric-icon { color: #1890ff; background: #eaf2ff; }
.tone-green .metric-icon { color: #148c64; background: #e8f7f1; }
.tone-amber .metric-icon { color: #b8740c; background: #fff4df; }
.tone-red .metric-icon { color: #c94d61; background: #fcecef; }
.filter-panel { position: relative; z-index: 3; margin-bottom: 18px; padding: 15px 17px; border: 1px solid #e0e7f1; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(40, 67, 106, .05); }
.filter-grid { display: grid; grid-template-columns: minmax(210px, 1.4fr) 130px 110px minmax(260px, 1fr) auto auto; gap: 9px; }
.hire-range { width: 260px !important; }
.archive-workspace { display: grid; grid-template-columns: 286px minmax(0, 1fr); align-items: stretch; gap: 18px; }
.organization-panel {
  overflow: hidden;
  border: 1px solid #e0e7f1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(40, 67, 106, .06);
}
.table-panel {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.organization-panel { min-width: 0; padding: 22px 18px 18px; transition: width .2s; }
.organization-panel.collapsed { width: 58px; padding: 14px 8px; }
.archive-workspace:has(.organization-panel.collapsed) { grid-template-columns: 58px minmax(0, 1fr); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading { padding: 0 3px 13px; border-bottom: 1px solid #edf0f3; }
.panel-heading h2 { margin: 0; color: #26364c; font-size: 19px; letter-spacing: 0; }
.panel-heading span { display: block; margin-top: 3px; color: #96a1af; font-size: 14px; }
.icon-button { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #dfe7f2; border-radius: 9px; color: #55708f; background: #f8faff; cursor: pointer; }
.tree-search { margin: 18px 0 12px; }
.all-organization { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-radius: 9px; color: #58687c; font-size: 14px; cursor: pointer; }
.all-organization.active { color: #1890ff; background: linear-gradient(90deg, #eaf3ff, #f4f9ff); }
.all-organization i { margin-right: 7px; }
.all-organization em, .tree-node-content em { min-width: 24px; padding: 1px 5px; border-radius: 8px; color: #8190a3; font-size: 14px; font-style: normal; text-align: center; background: #eef1f5; }
.organization-tree { max-height: 530px; overflow-y: auto; font-size: 14px; }
.organization-tree ::v-deep .el-tree-node__content { height: 44px; margin: 1px 0; border-radius: 9px; }
.organization-tree ::v-deep .el-tree-node__content:hover { background: #f5f7fa; }
.organization-tree ::v-deep .is-current > .el-tree-node__content { color: #1890ff; background: linear-gradient(90deg, #eaf3ff, #f4f9ff); }
.tree-node-content { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 6px; }
.tree-node-label { min-width: 0; display: flex; align-items: center; gap: 6px; }
.tree-node-label > span { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.tree-node-label i { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 7px; color: #2579e8; background: #eaf3ff; }
.collapsed .panel-heading > div { display: none; }
.collapsed .panel-heading { justify-content: center; border: 0; padding-bottom: 8px; }
.collapsed-tree-button { width: 40px; min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 4px; color: #607087; background: #f4f6f9; cursor: pointer; }
.collapsed-tree-button span { writing-mode: vertical-rl; font-size: 14px; }
.table-panel { min-width: 0; overflow: hidden; padding-top: 0; }
.table-toolbar-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; margin-right: 12px; white-space: nowrap; }
.selected-count { color: #1890ff; font-size: 14px; }
.active-filters { min-height: 41px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 20px 12px; padding: 8px 12px; border: 1px solid #dfebfa; border-radius: 8px; background: #f7faff; }
.active-filters > span { color: #8491a3; font-size: 14px; }
.active-filters button { margin-left: auto; border: 0; color: #1890ff; font-size: 14px; background: none; cursor: pointer; }
.employee-table { width: 100%; }
.employee-table::before { display: none; }
.employee-table ::v-deep .ele-table-tool { min-height: 70px; padding: 13px 20px; border-bottom: 1px solid #e8edf3; }
.employee-table ::v-deep .ele-table-tool-title { min-width: 0; align-items: center; }
/* 工具栏按钮之间留出间距（导入/导出被 el-dropdown 包裹，默认的 el-button 相邻间距不生效） */
.employee-table ::v-deep .ele-table-tool-title-content { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.employee-table ::v-deep .ele-table-tool-title-content > .el-button { margin: 0; }
.employee-table ::v-deep .ele-table-tool-title-label { flex: 0 0 auto; }
.employee-table ::v-deep .ele-table-tool-title-label h6 { margin: 0; color: #26364c; font-size: 17px; font-weight: 600; }
.employee-table ::v-deep .ele-table-tool-title-label > div { margin-top: 3px; color: #8d99a9; font-size: 14px; }
.employee-table ::v-deep th.el-table__cell { height: 50px; padding: 0; color: #68778c; background: #f6f8fb; font-weight: 600; }
.employee-table ::v-deep td.el-table__cell { padding: 10px 0; transition: background .2s ease; }
.employee-table ::v-deep .el-table__row:hover > td.el-table__cell { background: #f2f7ff !important; }
.employee-table ::v-deep td.el-table__cell, .employee-table ::v-deep th.el-table__cell { border-bottom-color: #edf0f3; }
.employee-table ::v-deep .el-table__row { cursor: default; }
.employee-table ::v-deep .el-table-column--selection .cell { padding-left: 13px; padding-right: 13px; text-align: center; }
.employee-table ::v-deep .el-table-column--selection .el-checkbox { margin: 0; }
.employee-cell { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; color: inherit; text-align: left; background: none; cursor: pointer; }
.table-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 2px solid #fff; border-radius: 11px; box-shadow: 0 5px 12px rgba(35, 91, 160, .16); color: #fff; font-size: 14px; font-weight: 600; background: var(--avatar-color); }
.table-avatar img { width: 100%; height: 100%; object-fit: cover; }
.employee-cell > span:last-child { min-width: 0; }
.employee-cell ::v-deep .el-link, .employee-cell small, .department-cell span, .department-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 员工姓名：颜色由 el-link type="primary"（蓝色）提供，这里只统一字号字重 */
.employee-cell ::v-deep .el-link { font-size: 14px; font-weight: 600; line-height: 1.5; }
.employee-cell small { margin-top: 3px; color: #95a0af; font-size: 14px; }
.department-cell span { color: #47586e; font-size: 14px; }
.department-cell small { max-width: 150px; margin-top: 3px; color: #9aa5b2; font-size: 14px; }
.position-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.position-cell span { min-width: 0; overflow: visible; color: #47586e; white-space: normal; word-break: break-word; }
.employee-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 12px; font-size: 14px; }
.employee-status i { width: 6px; height: 6px; border-radius: 50%; }
.employee-status.active { color: #178560; background: #e8f8f3; } .employee-status.active i { background: #22ad7b; }
.employee-status.probation { color: #b16d08; background: #fff5df; } .employee-status.probation i { background: #e7a32e; }
.employee-status.inactive { color: #7c8795; background: #f0f2f5; } .employee-status.inactive i { background: #9ca6b2; }
.employee-status.disabled { color: #c34a5d; background: #fcecef; } .employee-status.disabled i { background: #d85a6d; }
.action-cell { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 7px; white-space: nowrap; }
.action-cell ::v-deep .el-button + .el-button { margin-left: 0; }
.action-cell ::v-deep .action-button { width: 32px; height: 32px; padding: 0; border-color: #dbe5f1; border-radius: 8px; color: #59718e; background: #fff; box-shadow: 0 2px 7px rgba(42, 69, 105, .06); transition: all .2s ease; }
.action-cell ::v-deep .action-button:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(35, 91, 160, .14); }
.action-cell ::v-deep .action-button.is-view:hover { color: #fff; border-color: #2187f3; background: #2187f3; }
.action-cell ::v-deep .action-button.is-edit:hover { color: #1890ff; border-color: #b8d4f7; background: #edf5ff; }
.action-cell ::v-deep .action-button.is-more:hover { color: #3e556f; border-color: #cbd8e6; background: #f4f7fa; }
.empty-state { padding: 34px 0; color: #8b97a7; }
.empty-state > span { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; color: #6e8caf; font-size: 20px; background: #eef3f8; }
.empty-state strong { display: block; color: #53657a; font-size: 14px; }
.empty-state p { margin: 5px 0 10px; font-size: 14px; }

@media (max-width: 1040px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-workspace, .archive-workspace:has(.organization-panel.collapsed) { grid-template-columns: 1fr; }
  .organization-panel.collapsed { width: 100%; }
  .collapsed-tree-button { width: 100%; min-height: 36px; flex-direction: row; }
  .collapsed-tree-button span { writing-mode: initial; }
  .organization-tree { max-height: 250px; }
}
@media (max-width: 720px) {
  .employee-archive-page { padding: 12px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 88px; padding: 16px 18px; }
  .filter-grid { grid-template-columns: 1fr; }
  .employee-table ::v-deep .ele-table-tool { align-items: flex-start; }
  .employee-table ::v-deep .ele-table-tool-title { align-items: flex-start; flex-direction: column; gap: 10px; }
  .table-toolbar-actions { width: 100%; margin-left: 0; overflow-x: auto; justify-content: flex-start; }
  .table-toolbar-actions > * { flex: 0 0 auto; }
}