.erp-form {
  display: grid;
  gap: var(--erp-space-4);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--erp-space-3);
}

.metrics-grid--mini {
  gap: var(--erp-space-2);
}

.erp-metric-card {
  --erp-metric-color: var(--erp-color-primary);
  --erp-metric-soft: var(--erp-color-primary-soft);
  position: relative;
  min-height: 104px;
  padding: var(--erp-space-4);
  background: var(--erp-color-surface);
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-metric-card.is-success {
  --erp-metric-color: var(--erp-color-success);
  --erp-metric-soft: var(--erp-color-success-soft);
}

.erp-metric-card.is-warning {
  --erp-metric-color: var(--erp-color-warning);
  --erp-metric-soft: var(--erp-color-warning-soft);
}

.erp-metric-card.is-danger {
  --erp-metric-color: var(--erp-color-danger);
  --erp-metric-soft: var(--erp-color-danger-soft);
}

.erp-metric-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--erp-space-3);
  margin-bottom: var(--erp-space-3);
}

.erp-metric-card__head span {
  color: var(--erp-color-text-muted);
  font-size: var(--erp-font-size-xs);
  font-weight: 700;
}

.erp-metric-card__head .el-icon {
  color: var(--erp-metric-color);
}

.erp-metric-card strong {
  display: block;
  margin-bottom: var(--erp-space-1);
  color: var(--erp-color-text);
  font-size: 25px;
  line-height: 1;
}

.erp-metric-card small {
  color: var(--erp-color-text-muted);
  font-size: var(--erp-font-size-xs);
  font-weight: 700;
}

.erp-metric-card--small,
.erp-metric-card--outline {
  border-color: color-mix(in srgb, var(--erp-metric-color) 44%, var(--erp-color-border-soft));
  box-shadow: 0 1px 0 rgba(29, 36, 51, 0.03);
}

.erp-metric-card--large,
.erp-metric-card--quiet {
  background: linear-gradient(180deg, var(--erp-metric-soft), #ffffff 66%);
  border-color: color-mix(in srgb, var(--erp-metric-color) 18%, var(--erp-color-border-soft));
}

.erp-metric-card--mini,
.erp-metric-card--compact {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head value"
    "delta value";
  min-height: 74px;
  align-items: center;
  padding: var(--erp-space-3);
  border-color: var(--erp-color-border-soft);
}

.erp-metric-card--mini .erp-metric-card__head,
.erp-metric-card--compact .erp-metric-card__head {
  grid-area: head;
  justify-content: flex-start;
  margin-bottom: 2px;
}

.erp-metric-card--mini strong,
.erp-metric-card--compact strong {
  grid-area: value;
  margin-bottom: 0;
  font-size: 22px;
  text-align: right;
}

.erp-metric-card--mini small,
.erp-metric-card--compact small {
  grid-area: delta;
  color: var(--erp-metric-color);
}

.erp-table {
  --erp-table-header-bg-color: #f2f5fa;
  --erp-table-header-text-color: #344054;
  --erp-table-row-hover-bg-color: #f5f8ff;
  --erp-table-border-color: var(--erp-color-border-soft);
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
  overflow: hidden;
}

.erp-table .el-table__cell {
  padding: 7px 0;
}

.erp-table th.el-table__cell {
  font-weight: 700;
}

.erp-virtual-table {
  overflow: hidden;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-dense-pagination {
  --el-pagination-font-size: var(--erp-font-size-sm);
  justify-content: flex-end;
}

.erp-field-control,
.erp-date-range,
.erp-entity-lookup,
.erp-tree-select {
  width: 100%;
}

.erp-choice-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--erp-space-2);
}

.erp-side-menu {
  border-right: 0;
}

.erp-side-menu .el-menu-item,
.erp-side-menu .el-sub-menu__title {
  height: 38px;
  color: #465066;
  font-size: var(--erp-font-size-sm);
}

.erp-side-menu .el-menu-item.is-active {
  color: var(--erp-color-primary);
  background: var(--erp-color-primary-soft);
}

.erp-side-menu .el-sub-menu .el-menu-item {
  min-width: 0;
  padding-left: 44px;
}

.erp-breadcrumb {
  font-size: var(--erp-font-size-sm);
}

.erp-breadcrumb .el-breadcrumb__inner {
  color: var(--erp-color-text-muted);
  font-weight: 650;
}

.erp-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: var(--erp-color-text);
}

.erp-page-header {
  padding-bottom: var(--erp-space-3);
  border-bottom: 1px solid var(--erp-color-border-soft);
}

.erp-tabs .el-tabs__header {
  margin-bottom: var(--erp-space-3);
}

.erp-tabs .el-tabs__item {
  height: 36px;
}

.erp-action-button,
.erp-action-dropdown .el-button {
  min-width: 86px;
}

.erp-status-tag,
.erp-status-badge {
  font-weight: 700;
}

.erp-status-alert {
  border-radius: var(--erp-radius-sm);
}

.erp-detail-descriptions .el-descriptions__cell {
  padding: 9px 12px;
}

.erp-detail-descriptions .el-descriptions__label {
  width: 96px;
  color: #566176;
  font-weight: 700;
  background: #f5f7fb;
}

.erp-entity-card {
  min-height: 112px;
  padding: var(--erp-space-4);
  background: #ffffff;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
  box-shadow: var(--erp-shadow-sm);
}

.erp-entity-card header {
  margin-bottom: var(--erp-space-2);
  color: var(--erp-color-text-muted);
  font-size: var(--erp-font-size-xs);
  font-weight: 800;
}

.erp-entity-card strong {
  display: block;
  color: var(--erp-color-text);
  font-size: var(--erp-font-size-lg);
}

.erp-entity-card p {
  margin: var(--erp-space-2) 0 0;
  color: var(--erp-color-text-muted);
}

.erp-tree,
.erp-tree-select {
  --el-tree-node-hover-bg-color: var(--erp-color-surface-muted);
}

.erp-upload .el-upload-dragger {
  padding: var(--erp-space-5);
  border-color: var(--erp-color-border);
  border-radius: var(--erp-radius-md);
}

.erp-empty-state {
  padding: var(--erp-space-5);
  background: #ffffff;
  border: 1px dashed var(--erp-color-border);
  border-radius: var(--erp-radius-md);
}

.erp-progress {
  --el-color-primary: var(--erp-color-primary);
}

.erp-skeleton {
  padding: var(--erp-space-4);
  background: #ffffff;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-calendar {
  overflow: hidden;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-calendar .el-calendar__body {
  padding: var(--erp-space-3);
}

.erp-calendar .el-calendar-table .el-calendar-day {
  min-height: 44px;
  height: 44px;
  padding: 6px;
}

.erp-timeline {
  padding: var(--erp-space-2) 0 0;
}

.erp-steps {
  padding: var(--erp-space-4);
  background: #ffffff;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-collapse {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-collapse .el-collapse-item__header,
.erp-collapse .el-collapse-item__content {
  padding-right: var(--erp-space-4);
  padding-left: var(--erp-space-4);
}

.erp-media-preview {
  width: 220px;
  height: 132px;
  overflow: hidden;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-carousel {
  overflow: hidden;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-inline-text,
.erp-inline-link {
  font-size: var(--erp-font-size-sm);
  font-weight: 650;
}

.erp-space {
  padding: var(--erp-space-3);
  background: #ffffff;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-statistic {
  min-width: 150px;
  padding: var(--erp-space-4);
  background: #ffffff;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-md);
}

.erp-switch,
.erp-slider,
.erp-rate,
.erp-color-picker {
  max-width: 360px;
}

.erp-transfer {
  max-width: 720px;
}

.erp-dialog,
.erp-drawer,
.erp-popconfirm,
.erp-tooltip {
  font-size: var(--erp-font-size-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.2fr 0.85fr;
  gap: var(--erp-space-4);
  align-items: end;
}

.form-grid.secondary {
  grid-template-columns: 1fr 1fr 1.2fr;
}

.table-search {
  width: 270px;
}

.icon-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #465066;
}

.risk-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.risk-dot::before {
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
}

.risk-low::before {
  background: var(--erp-color-success);
}

.risk-mid::before {
  background: var(--erp-color-warning);
}

.risk-high::before {
  background: var(--erp-color-danger);
}

.component-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.component-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  color: #344054;
  font-size: var(--erp-font-size-xs);
  font-weight: 700;
  background: #ffffff;
  border: 1px solid var(--erp-color-border-soft);
  border-radius: var(--erp-radius-xs);
}

.component-chip small {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  padding: 0 4px;
  color: var(--erp-color-text-muted);
  font-size: 11px;
  background: var(--erp-color-surface-muted);
  border-radius: 999px;
}

.component-chip.priority-高 {
  color: var(--erp-color-primary-strong);
  border-color: #bdd0fb;
  background: #f4f7ff;
}

.component-chip.priority-高 small {
  color: #ffffff;
  background: var(--erp-color-primary);
}

.component-chip.priority-中 {
  color: #525f76;
}

.component-chip.priority-低 {
  color: #7d8798;
  background: #fafbfc;
}