/* fix-ui.css — 修复 Tailwind preflight 覆盖 Element Plus 按钮背景导致的「白字透明底」问题
 *
 * 背景：apps/web/src/style.css 使用 `@tailwind base`，其 preflight 规则
 *   button,[type=button],[type=reset],[type=submit]{background-color:transparent}
 *  被 Vite 打包到 index-pYJ550gf.css 的最末尾（offset ≈ 308600），
 *  位置远晚于 Element Plus 的 .el-button 规则（offset ≈ 17123~26537）。
 *  两者选择器特异性相同（0,0,1），后出现者胜出，
 *  于是 `.el-button--primary` 的 `background-color: var(--el-color-primary)` 被覆盖为透明，
 *  而 `color:#fff` 不受影响 → 白字画在白底上，按钮文字不可见。
 *
 * 修复：在更高优先级下显式恢复 Element Plus 按钮的背景色变量。
 * 本文件由 index.html 在主 CSS 之后引入，确保层叠顺序正确。
 */

/* 恢复 el-button 各状态的背景色绑定（提高特异性，压过 preflight 的元素选择器） */
.el-button:not(.is-text):not(.is-link):not(.is-plain) {
  background-color: var(--el-button-bg-color);
  background-image: none;
  color: var(--el-button-text-color);
}

.el-button:not(.is-text):not(.is-link):not(.is-plain):hover,
.el-button:not(.is-text):not(.is-link):not(.is-plain):focus {
  background-color: var(--el-button-hover-bg-color);
  border-color: var(--el-button-hover-border-color);
  color: var(--el-button-hover-text-color);
}

.el-button:not(.is-text):not(.is-link):not(.is-plain):active {
  background-color: var(--el-button-active-bg-color);
  border-color: var(--el-button-active-border-color);
  color: var(--el-button-active-text-color);
}

.el-button:not(.is-text):not(.is-link):not(.is-plain).is-disabled,
.el-button:not(.is-text):not(.is-link):not(.is-plain):disabled {
  background-color: var(--el-button-disabled-bg-color);
  border-color: var(--el-button-disabled-border-color);
  color: var(--el-button-disabled-text-color);
}

/* 保留 plain / text / link 的原生行为 */
.el-button.is-plain {
  background-color: var(--el-button-bg-color);
}

/* 首页「进入上传页面」按钮：保证主色实心可见 */
.el-button--primary.enter-button {
  background-color: var(--el-color-primary);
  background-image: none;
  color: #ffffff;
  border-color: var(--el-color-primary);
}

.el-button--primary.enter-button:hover,
.el-button--primary.enter-button:focus {
  background-color: var(--el-color-primary-light-3);
  border-color: var(--el-color-primary-light-3);
  color: #ffffff;
}

.el-button--primary.enter-button:active {
  background-color: var(--el-color-primary-dark-2);
  border-color: var(--el-color-primary-dark-2);
  color: #ffffff;
}

.el-button--primary.enter-button.is-disabled,
.el-button--primary.enter-button:disabled {
  background-color: var(--el-color-primary-light-5);
  border-color: var(--el-color-primary-light-5);
  color: #ffffff;
}