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

.position-page {
  --primary: #1768e5;
  --cyan: #20b7d8;
  --ink: #182338;
  --muted: #7c899d;
  min-height: 100%;
  padding: 22px;
  color: var(--ink);
  background: radial-gradient(
      circle at 8% 4%,
      rgba(32, 183, 216, 0.09),
      transparent 24%
    ),
    radial-gradient(circle at 92% 0%, rgba(23, 104, 229, 0.08), transparent 22%),
    #f3f6fb;
}

.action-toolbar {
  margin-bottom: 18px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid #e0e7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(40, 67, 106, 0.05);
}
.view-toolbar {
  min-height: 54px;
  padding: 8px;
  justify-content: space-between;
  gap: 16px;
}
.toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.toolbar-actions ::v-deep .el-button + .el-button {
  margin-left: 0;
}

.metric-grid {
  margin: 0 0 18px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.metric-card {
  min-height: 112px;
  padding: 19px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(211, 221, 235, 0.74);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 30px rgba(37, 67, 111, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(37, 67, 111, 0.13);
}
.metric-card span,
.metric-card small {
  display: block;
  color: var(--muted);
}
.metric-card strong {
  margin: 4px 0;
  display: block;
  color: #17243a;
  font-size: 29px;
}
.metric-card small {
  font-size: 12px;
}
.metric-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 23px;
}
.metric-blue .metric-icon {
  color: #1677ff;
  background: #eaf3ff;
}
.metric-green .metric-icon {
  color: #16a77b;
  background: #e7faf4;
}
.metric-orange .metric-icon {
  color: #ef8c2f;
  background: #fff3e6;
}
.metric-teal .metric-icon {
  color: #0ca6a6;
  background: #e6f8f8;
}

.mode-tabs {
  margin: 0;
  padding: 5px;
  width: fit-content;
  display: flex;
  gap: 4px;
  border: 1px solid #dfe7f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(40, 67, 106, 0.06);
}
.mode-tabs button {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  color: #607187;
  background: transparent;
  cursor: pointer;
}
.mode-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #1768e5, #20b7d8);
  box-shadow: 0 8px 18px rgba(23, 104, 229, 0.22);
}

.workspace {
  width: 100%;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.sequence-panel,
.table-panel,
.detail-panel,
.promote-map,
.review-panel,
.matrix-panel,
.certificate-panel {
  overflow: hidden;
  border: 1px solid #e0e7f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(40, 67, 106, 0.06);
}
.sequence-panel {
  min-height: 680px;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
}
.panel-heading,
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.panel-heading h2,
.table-toolbar h2 {
  margin: 4px 0 0;
  font-size: 19px;
}
.promote-map > .panel-heading h2,
.review-panel > .panel-heading h2,
.matrix-panel > .panel-heading h2,
.certificate-panel > .panel-heading h2 {
  margin-top: 0;
}
.panel-heading.compact {
  margin-bottom: 16px;
}
.panel-kicker {
  color: #2c85ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.icon-button,
.close-detail {
  width: 34px;
  height: 34px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  color: #55708f;
  background: #f8faff;
  cursor: pointer;
}
.tree-search {
  margin: 20px 0 14px;
}

.sequence-list {
  display: grid;
  gap: 10px;
}
.sequence-card {
  min-width: 0;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e3eaf4;
  border-radius: 11px;
  background: #fbfdff;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sequence-card:hover,
.sequence-card.active {
  border-color: var(--seq-color);
  background: linear-gradient(90deg, rgba(23, 104, 229, 0.06), #fff);
  transform: translateX(2px);
}
.sequence-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: var(--seq-color);
  font-weight: 700;
}
.sequence-main {
  min-width: 0;
  flex: 1;
}
.sequence-main strong,
.sequence-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sequence-main small {
  margin-top: 3px;
  color: #92a0b2;
  font-size: 11px;
}
.sequence-card em {
  min-width: 25px;
  padding: 3px 7px;
  border-radius: 9px;
  color: #66768e;
  background: #edf2f8;
  font-style: normal;
  font-size: 11px;
  text-align: center;
}
.level-list {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #edf1f6;
}
.level-title {
  margin-bottom: 9px;
  color: #66768e;
  font-size: 12px;
  font-weight: 700;
}
.level-list button {
  width: 100%;
  height: 36px;
  margin-bottom: 7px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #607187;
  background: #f7faff;
  cursor: pointer;
}
.level-list button.active {
  color: #1768e5;
  border-color: #cfe2ff;
  background: #edf6ff;
}

.table-panel {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.table-toolbar {
  padding: 22px 24px 18px;
  position: relative;
  z-index: 5;
}
.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.keyword-input {
  width: 270px;
}
.medium-filter {
  width: 190px;
}
.small-filter {
  width: 120px;
}
.local-filter-select {
  position: relative;
}
.local-filter-select ::v-deep .el-select-dropdown {
  z-index: 30 !important;
}
.active-filter {
  margin: 0 24px 14px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dfebfa;
  border-radius: 9px;
  color: #718096;
  background: #f7faff;
  font-size: 12px;
  flex-wrap: wrap;
}
.active-filter strong {
  margin-left: auto;
  color: #2d5f9d;
}
.position-table::before {
  display: none;
}
.position-table ::v-deep th.el-table__cell {
  height: 50px;
  color: #68778c;
  background: #f6f8fb;
  font-weight: 600;
}
.position-table ::v-deep td.el-table__cell {
  padding: 12px 0;
}
.position-table ::v-deep .el-table__row {
  cursor: pointer;
}

.position-name-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}
.position-name-cell strong,
.position-name-cell small {
  display: block;
}
.position-name-cell small {
  margin-top: 4px;
  color: #99a4b4;
  font-size: 11px;
  font-family: Consolas, monospace;
}
.position-avatar,
.detail-badge {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.seq-M {
  background: linear-gradient(135deg, #1768e5, #55a1ff);
}
.seq-P {
  background: linear-gradient(135deg, #7c5ce5, #a488ff);
}
.seq-T {
  background: linear-gradient(135deg, #0ca6a6, #32d1b4);
}
.seq-O {
  background: linear-gradient(135deg, #ed8a22, #f4bd58);
}
.dept-cell span,
.dept-cell small {
  display: block;
}
.dept-cell small {
  margin-top: 4px;
  color: #9ca8b8;
  font-size: 11px;
}
.staffing-cell span {
  color: #526277;
  font-size: 12px;
}
.staffing-cell ::v-deep .el-progress-bar__outer {
  height: 6px !important;
  margin-top: 5px;
}
.salary-range {
  color: #35618f;
  font-weight: 600;
}
.skill-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 12px;
  font-size: 11px;
}
.status-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.status-pill.is-active {
  color: #118969;
  background: #e8f8f3;
}
.status-pill.is-active i {
  background: #16b98a;
}
.status-pill.is-inactive {
  color: #8b94a2;
  background: #f0f2f5;
}
.status-pill.is-inactive i {
  background: #9aa4b2;
}
.status-pill.is-warning {
  color: #c46f11;
  background: #fff4e5;
}
.status-pill.is-warning i {
  background: #f0a43c;
}
.status-pill.is-archived {
  color: #667085;
  background: #eef0f3;
}
.status-pill.is-archived i {
  background: #7d8796;
}
.more-button {
  margin-left: 8px;
}

.detail-panel {
  min-height: 680px;
}
.detail-panel-drawer {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
:global(.position-detail-drawer) {
  overflow: auto;
  background: #fff;
}
:global(.position-detail-drawer .el-drawer__body) {
  overflow: auto;
}
.detail-panel-drawer .detail-header {
  padding-top: 28px;
}
.detail-header {
  padding: 22px 22px 18px;
  position: relative;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #10284e, #0a637a);
}
.close-detail {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}
.detail-badge {
  margin: 0 auto 12px;
  width: 48px;
  height: 48px;
}
.detail-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
}
.detail-header p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.68);
}
.detail-tabs {
  padding: 0 18px 18px;
}
.detail-tab-spaced {
  padding-top: 12px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.detail-grid div,
.info-strip {
  padding: 12px;
  border: 1px solid #e4ebf4;
  border-radius: 9px;
  background: #f8fbff;
}
.detail-grid span,
.info-strip span,
.info-strip small {
  display: block;
  color: #8a98aa;
  font-size: 11px;
}
.detail-grid strong,
.info-strip strong {
  margin-top: 4px;
  display: block;
  color: #22334f;
}
.info-strip {
  margin-top: 10px;
}
.info-strip strong {
  font-size: 18px;
}
.section-title {
  margin: 14px 0 9px;
  color: #22334f;
  font-size: 13px;
  font-weight: 700;
}
.duty-list {
  margin: 0;
  padding-left: 19px;
  color: #536277;
  line-height: 1.8;
}
.tag-wrap {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.kv-list p {
  margin: 10px 0;
  color: #536277;
  line-height: 1.6;
}
.kv-list span {
  min-width: 70px;
  display: inline-block;
  color: #8b98aa;
}
.path-line {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 6px;
  align-items: center;
}
.path-line div {
  min-height: 78px;
  padding: 12px;
  border: 1px solid #e4ebf4;
  border-radius: 9px;
  background: #f8fbff;
}
.path-line .current {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1768e5, #20b7d8);
}
.path-line small,
.path-line strong {
  display: block;
}
.path-line small {
  color: #8b98aa;
}
.path-line .current small {
  color: rgba(255, 255, 255, 0.75);
}
.skill-progress {
  margin-bottom: 14px;
}
.skill-progress div {
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.skill-progress span {
  color: #8b98aa;
  font-size: 12px;
}
.cert-list {
  display: grid;
  gap: 8px;
}
.cert-list div,
.employee-list div {
  padding: 10px;
  border: 1px solid #e4ebf4;
  border-radius: 9px;
  background: #f8fbff;
}
.cert-list strong,
.cert-list span {
  display: block;
}
.cert-list span {
  margin-top: 4px;
  color: #8b98aa;
  font-size: 12px;
}
.employee-list {
  display: grid;
  gap: 8px;
}
.employee-list > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.employee-list small {
  display: block;
  margin-top: 3px;
  color: #8b98aa;
}
.employee-list em {
  margin-left: auto;
  color: #1768e5;
  font-style: normal;
  font-weight: 700;
}
.history-line {
  padding: 5px 2px 0;
}
.history-line p {
  margin: 6px 0 0;
  color: #66768e;
  line-height: 1.6;
}

.promote-workbench,
.skill-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
}
.promote-map,
.matrix-panel {
  padding: 22px 24px 24px;
}
.review-panel,
.certificate-panel {
  padding: 22px 18px;
}
.lane-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.lane {
  min-height: 480px;
  padding: 14px;
  border: 1px solid #e2eaf4;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.95), #fff);
}
.lane-title {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--seq-color);
}
.lane-title strong,
.lane-title span {
  display: block;
}
.lane-title span {
  margin-top: 4px;
  color: #8b98aa;
  font-size: 12px;
}
.lane-cards {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.promote-card {
  min-height: 118px;
  padding: 14px;
  position: relative;
  border: 1px solid #e3eaf4;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.promote-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(37, 67, 111, 0.11);
}
.promote-card.selected {
  border-color: var(--seq-color);
  box-shadow: 0 0 0 2px rgba(23, 104, 229, 0.12);
}
.canvas-tools {
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.canvas-tools ::v-deep .el-slider {
  width: 90px;
}
.zoom-button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce5f0;
  border-radius: 7px;
  color: #52677f;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.zoom-button:hover:not(:disabled) {
  color: #1768e5;
  border-color: #8fbcf5;
  background: #edf6ff;
}
.zoom-button:active:not(:disabled) {
  transform: scale(0.94);
}
.zoom-button:disabled {
  color: #c5ced9;
  background: #f5f7fa;
  cursor: not-allowed;
}
.zoom-value {
  min-width: 38px;
  color: #66768e;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.promote-property {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid #dce8f8;
  border-radius: 9px;
  background: #f7fbff;
}
.promote-property h3 {
  margin: 6px 0 10px;
}
.promote-property p {
  margin: 6px 0;
  color: #66768e;
  font-size: 12px;
}
.promote-card small {
  color: var(--seq-color);
  font-weight: 700;
}
.promote-card strong,
.promote-card span {
  display: block;
}
.promote-card strong {
  margin: 8px 0;
}
.promote-card span {
  color: #8b98aa;
  font-size: 12px;
  line-height: 1.5;
}
.promote-card i {
  position: absolute;
  right: 13px;
  top: 13px;
  color: var(--seq-color);
}
.review-card {
  margin-bottom: 12px;
  padding: 13px;
  border: 1px solid #e3eaf4;
  border-radius: 10px;
  background: #fbfdff;
}
.review-card strong,
.review-card small {
  display: block;
}
.review-card > .el-button {
  margin-top: 8px;
}
.review-card small {
  margin-top: 4px;
  color: #8b98aa;
}
.review-card ::v-deep .el-progress {
  margin: 10px 0;
}
.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8b98aa;
  font-size: 12px;
}
.stats-mini {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stats-mini div {
  padding: 12px;
  border-radius: 9px;
  background: #f5f8fc;
}
.stats-mini strong,
.stats-mini span {
  display: block;
}
.stats-mini strong {
  color: #1768e5;
  font-size: 22px;
}
.stats-mini span {
  color: #8b98aa;
  font-size: 11px;
}

.matrix-table {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 190px repeat(8, minmax(105px, 1fr));
  overflow: auto;
  border: 1px solid #e2eaf4;
  border-radius: 10px;
}
.matrix-head,
.matrix-position,
.matrix-cell {
  min-height: 54px;
  padding: 10px;
  border-right: 1px solid #e7eef7;
  border-bottom: 1px solid #e7eef7;
}
.matrix-head {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #526277;
  background: #f4f7fb;
  font-weight: 700;
  text-align: center;
}
.sticky-cell {
  justify-content: flex-start;
  position: sticky;
  left: 0;
  z-index: 2;
}
.matrix-position {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}
.matrix-position strong,
.matrix-position small {
  display: block;
}
.matrix-position small {
  margin-top: 4px;
  color: #8b98aa;
}
.matrix-cell {
  border-top: 0;
  border-left: 0;
  font-weight: 700;
  cursor: pointer;
}
.matrix-cell.ok {
  color: #118969;
  background: #e8f8f3;
}
.matrix-cell.warn {
  color: #b46a10;
  background: #fff5e7;
}
.matrix-cell.bad {
  color: #c94242;
  background: #fff0f0;
}
.certificate-card {
  margin-bottom: 10px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #e3eaf4;
  border-radius: 10px;
  background: #fbfdff;
}
.certificate-card strong,
.certificate-card small {
  display: block;
}
.certificate-card small {
  margin-top: 4px;
  color: #8b98aa;
}
.certificate-card span {
  color: #118969;
  font-weight: 700;
}
.certificate-card span.danger {
  color: #d45b38;
}
.skill-library {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #edf1f6;
}
.library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.empty-state {
  padding: 52px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #99a4b4;
}
.empty-state strong {
  margin: 14px 0 6px;
  color: #526277;
}
.empty-orbit {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe7f5;
  border-radius: 50%;
  color: #2685ed;
  background: #f3f8ff;
  box-shadow: 0 0 0 10px #f8fbff;
  font-size: 25px;
}

@media screen and (max-width: 1500px) {
  .workspace {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (max-width: 1180px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workspace,
  .promote-workbench,
  .skill-workbench {
    grid-template-columns: 1fr;
  }
  .sequence-panel {
    min-height: auto;
  }
  .lane-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .table-toolbar {
    align-items: flex-start;
  }
  .view-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .view-toolbar .toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 760px) {
  .position-page {
    padding: 12px;
  }
  .action-toolbar {
    padding: 10px;
  }
  .toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .toolbar-actions ::v-deep .el-button {
    flex: 1 1 calc(50% - 5px);
    margin: 0;
  }
  .metric-grid {
    margin: 0 0 16px;
    grid-template-columns: 1fr;
  }
  .mode-tabs {
    width: 100%;
  }
  .mode-tabs button {
    flex: 1;
    justify-content: center;
    padding: 0 8px;
  }
  .table-toolbar {
    display: block;
  }
  .toolbar-controls {
    margin-top: 14px;
    justify-content: flex-start;
  }
  .keyword-input,
  .medium-filter,
  .small-filter {
    width: 100%;
  }
  .detail-grid,
  .lane-grid {
    grid-template-columns: 1fr;
  }
  .path-line {
    grid-template-columns: 1fr;
  }
  .path-line > i {
    transform: rotate(90deg);
    justify-self: center;
  }
}