/* Prevent old DOM from flashing before the page-specific polish scripts finish. */
html.jusen-route-training .training-page:not(.training-polished),
html.jusen-route-permissions .permission-view:not(.permission-modernized) {
  opacity: 0 !important;
}

html.jusen-route-settings .settings-view,
html.jusen-route-settings [class*="settings"],
html.jusen-route-settings .el-main > div {
  animation: jusenSettingsSoftIn 140ms ease-out both;
}

@keyframes jusenSettingsSoftIn {
  from { opacity: 0.02; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Team page operation area: keep actions compact and scannable. */
.team-view .el-table .el-table__cell:last-child .cell,
.team-page .el-table .el-table__cell:last-child .cell,
[class*="team"] .el-table .el-table__cell:last-child .cell {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 7px !important;
  max-width: 150px !important;
  line-height: 1.2 !important;
}

.team-view .el-table .el-button,
.team-page .el-table .el-button,
[class*="team"] .el-table .el-button {
  min-width: 58px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.team-view .el-table .el-button + .el-button,
.team-page .el-table .el-button + .el-button,
[class*="team"] .el-table .el-button + .el-button {
  margin-left: 0 !important;
}

.team-view .el-table .el-button--primary,
.team-page .el-table .el-button--primary,
[class*="team"] .el-table .el-button--primary {
  background: rgba(42, 142, 255, 0.88) !important;
  border-color: rgba(98, 184, 255, 0.42) !important;
}

.team-view .el-table .el-button--warning,
.team-page .el-table .el-button--warning,
[class*="team"] .el-table .el-button--warning {
  background: rgba(184, 132, 32, 0.88) !important;
  border-color: rgba(255, 205, 102, 0.42) !important;
  color: #111827 !important;
}

.team-view .el-table .el-button--danger,
.team-page .el-table .el-button--danger,
[class*="team"] .el-table .el-button--danger {
  background: rgba(204, 62, 92, 0.86) !important;
  border-color: rgba(255, 118, 148, 0.36) !important;
}

.team-view .el-card__header,
.team-page .el-card__header,
[class*="team"] .el-card__header {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

.team-view .el-table,
.team-page .el-table,
[class*="team"] .el-table {
  --el-table-row-hover-bg-color: rgba(38, 131, 255, 0.08) !important;
}