/* ============================================================
   灰鲸建设 · 工作页统一主题 theme.css（对标 Jxstar 蓝色后台）
   布局骨架（亮蓝顶栏 / 深蓝灰侧边栏）由 MainLayout.vue scoped 管理；
   本文件只负责跨页面通用的 Element 组件主题（主色 / 卡片 / 表格 / 按钮 / 滚动条）。
   独立外链，在主 CSS 之后加载，可随时回滚。
   【色值单一来源】所有颜色引用 src/style.css 的 :root tokens（var(--hj-*)），
   本文件不定义也不硬编码任何色值；改动品牌色只改 style.css。
   ============================================================ */

:root{
  /* —— 覆盖 Element Plus 主题变量，全站组件统一为亮蓝 —— */
  --el-color-primary: var(--hj-primary);
  --el-color-primary-light-3: var(--hj-primary-light-3);
  --el-color-primary-light-5: var(--hj-primary-light-5);
  --el-color-primary-light-7: var(--hj-primary-light-7);
  --el-color-primary-light-8: var(--hj-primary-light-8);
  --el-color-primary-light-9: var(--hj-primary-light-9);
  --el-color-primary-dark-2: var(--hj-primary-dark);
  --el-border-radius-base: 7px;
  --el-border-radius-small: 6px;
  --el-box-shadow-light: 0 2px 12px rgba(31, 35, 41, .06);
}

/* ================= 内容区底色 ================= */
.el-main.main{ background: var(--hj-bg-page) !important; }

/* ================= KPI 指标卡 ================= */
.el-main .kpi{
  background: var(--hj-bg-card) !important;
  border: 1px solid var(--hj-line) !important;
  border-radius: var(--hj-radius-md) !important;
  box-shadow: var(--hj-shadow-kpi) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.el-main .kpi:hover{
  transform: translateY(-2px);
  box-shadow: var(--hj-shadow-kpi-hover) !important;
  border-color: var(--hj-primary-border) !important;
}
.el-main .kpi .kpi-value{ color: var(--hj-primary) !important; }

/* ================= 通用卡片 / 面板 ================= */
.el-card{
  border-radius: var(--hj-radius-md) !important;
  border: 1px solid var(--hj-line) !important;
  box-shadow: var(--hj-shadow-card) !important;
}
.el-card.is-hover-shadow:hover,
.el-card.is-always-shadow{ box-shadow: var(--hj-shadow-card-hover) !important; }

/* ================= 表格：浅灰表头 + 斑马纹 + 清晰分隔（对标参考图） ================= */
.el-table th.el-table__cell{
  background: var(--hj-bg-table-head) !important;
  color: var(--hj-text-table-head) !important;
  font-weight: 600;
}
.el-table__body tr.el-table__row--striped td.el-table__cell{
  background: var(--hj-bg-sub) !important;
}
.el-table--border .el-table__cell{ border-color: var(--hj-border-weak) !important; }
.el-table::before,
.el-table--border::after{ background-color: var(--hj-border-weak) !important; }

/* ================= 主按钮：实心亮蓝渐变（查询/提交/生成等） ================= */
.el-button--primary:not(.is-link):not(.is-text):not(.is-plain){
  background: linear-gradient(90deg, var(--hj-top), var(--hj-primary-dark)) !important;
  border: none !important;
  border-radius: 7px !important;
  box-shadow: var(--hj-shadow-brand);
}
.el-button--primary:not(.is-link):not(.is-text):not(.is-plain):hover{
  background: linear-gradient(90deg, var(--hj-primary-hover), var(--hj-primary-hover-2)) !important;
  box-shadow: 0 6px 16px rgba(0, 150, 210, .32);
}
/* 表格内/行内链接式主按钮：透明背景、仅主色文字 */
.el-button--primary.is-link,
.el-button--primary.is-text{
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--hj-primary) !important;
}
/* 朴素描边主按钮（is-plain）：白底亮蓝字 */
.el-button--primary.is-plain{
  background: var(--hj-bg-card) !important;
  color: var(--hj-primary) !important;
  border: 1px solid var(--hj-primary) !important;
  box-shadow: none !important;
}
.el-button--primary.is-plain:hover{
  background: var(--hj-bg-primary) !important;
  border-color: var(--hj-primary) !important;
  color: var(--hj-primary) !important;
}

/* 输入框 focus 主色 */
.el-input__wrapper.is-focus{
  box-shadow: 0 0 0 1px var(--hj-primary) inset !important;
}

/* 标签页激活下划线 / 步骤条等主色 */
.el-tabs__active-bar{ background-color: var(--hj-primary) !important; }
.el-tabs__item.is-active{ color: var(--hj-primary) !important; }

/* 分页选中态主色由变量继承 */
.el-pagination.is-background .el-pager li.is-active{ background-color: var(--hj-primary) !important; }

/* ================= 右下角悬浮按钮 ================= */
#sc-fab, #bm-fab{
  border-radius: 22px !important;
  box-shadow: 0 6px 18px rgba(0, 140, 200, .38) !important;
}
#sc-fab:hover, #bm-fab:hover{
  box-shadow: 0 9px 26px rgba(0, 140, 200, .5) !important;
}

/* ================= 滚动条美化 ================= */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: var(--hj-scrollbar); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--hj-scrollbar-hover); }
::-webkit-scrollbar-track{ background: transparent; }