/* ==========================================================================
   专家端 · 专家库管理公共外壳样式（顶栏 + 左侧菜单 + 面包屑 + 列表骨架）
   由 assets/expert-shell.js 的全局组件（expert-nav / expert-side / expert-crumb）使用，
   各叶子页（expert-info-edit / expert-info-record / expert-leave / expert-leaf）共用，
   配色 / 间距 / 圆角 / 字体沿用 assets/auth.css 的 design tokens。
   ========================================================================== */

/* ==========================================================================
   专家工作台（登录后系统页）：顶部蓝色导航栏 + 三栏工作台
   配色 / 间距 / 圆角 / 字体全部沿用 assets/auth.css 的 design tokens
   ========================================================================== */

/* 本页为整屏工作台，高度交给内容撑开（auth.css 里 #app 是 100% 高） */
#app { height: auto; min-height: 100vh; }

.wb-shell {
  /* 页面级尺寸 token —— 改这一组即可整体调整工作台骨架 */
  --wb-header-h: 56px;
  --wb-side-w: 208px;
  --wb-gap: 12px;
  --wb-card-hd-h: 46px;
  --wb-bar: linear-gradient(90deg, #1a5ed6 0%, #2a6ae0 100%);

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--text-base);
  background: var(--surface-page);
}

/* --------------------------------------------------------------------------
   1. 顶部导航栏
   -------------------------------------------------------------------------- */
.wb-header {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
  height: var(--wb-header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  color: #fff;
  background: var(--wb-bar);
  box-shadow: 0 1px 4px rgba(16, 44, 110, .18);
}

.wb-brand { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.wb-logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: #fff;
}
.wb-logo img { width: 27px; height: auto; display: block; }
.wb-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.wb-app {
  font-size: var(--text-md);
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}

.wb-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-8); }
.wb-nav-item {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, .84);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.wb-nav-item:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.wb-nav-item.is-active { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .18); }

.wb-user { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); }

/* 原型导航：返回页面清单（刻意低调，hover 才显形） */
.wb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .58);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.wb-back i { font-size: 12px; }
.wb-back:hover { color: #fff; background: rgba(255, 255, 255, .14); }

.wb-username {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.wb-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
.wb-ico {
  position: relative;
  font-size: 17px;
  line-height: 1;
  color: #fff;
  opacity: .9;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.wb-ico:hover { opacity: 1; }
.wb-badge {
  position: absolute;
  top: -7px;
  right: -11px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--warning);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
}
.wb-avatar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: #f0a03c;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  outline: none;
}

/* --------------------------------------------------------------------------
   2. 三栏骨架
   -------------------------------------------------------------------------- */
.wb-main { flex: 1; display: flex; padding: var(--wb-gap); }

.wb-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}
.wb-card--fill { flex: 1; min-height: 120px; }

.wb-card-hd {
  flex-shrink: 0;
  min-height: var(--wb-card-hd-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.wb-card-title { font-size: var(--text-md); font-weight: 700; color: var(--gray-900); }
.wb-card-tools { display: flex; align-items: center; gap: var(--space-3); color: var(--gray-400); }
.wb-card-tools i { font-size: 13px; cursor: pointer; transition: color var(--t-fast); }
.wb-card-tools i:hover { color: var(--primary-500); }
.wb-card-tools i.is-active { color: var(--primary-500); }
.wb-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.wb-link:hover { color: var(--primary-700); }

.wb-empty-note {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-xs);
  color: var(--gray-300);
}

/* --------------------------------------------------------------------------
   6. 占位视图（采购执行 / 专家库管理内容区）
   -------------------------------------------------------------------------- */
.wb-placeholder {
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.wb-placeholder > .wb-ph-ico { width: 58px; height: 58px; color: var(--primary-300); }
.wb-placeholder > .wb-ph-ico svg { display: block; width: 100%; height: 100%; }
.wb-placeholder h3 { font-size: var(--text-lg); font-weight: 700; color: var(--gray-900); }
.wb-placeholder p {
  max-width: 560px;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--gray-500);
}
.wb-placeholder ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; }
.wb-placeholder li {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--primary-50);
  font-size: var(--text-xs);
  color: var(--primary-500);
}
.wb-placeholder .wb-ph-note {
  max-width: 560px;
  font-size: var(--text-xs);
  line-height: 1.9;
  color: var(--gray-300);
}

/* --------------------------------------------------------------------------
   7. 专家库管理 · 左侧二级菜单 + 右侧内容区
   -------------------------------------------------------------------------- */
.wb-module { flex: 1; width: 100%; display: flex; gap: var(--wb-gap); min-width: 0; }

.wb-side {
  flex-shrink: 0;
  width: var(--wb-side-w);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.wb-side-hd {
  flex-shrink: 0;
  height: var(--wb-card-hd-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--gray-900);
}
.wb-side-nav { flex: 1; padding: var(--space-2) 0; overflow-y: auto; }

.wb-side-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.wb-side-item:hover { background: var(--gray-25); color: var(--primary-500); }
.wb-side-item.is-active { color: var(--primary-500); font-weight: 700; background: var(--primary-50); }
.wb-side-ico { flex-shrink: 0; width: 16px; height: 16px; }
.wb-side-ico svg { display: block; width: 100%; height: 100%; }
.wb-side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-side-arrow { flex-shrink: 0; font-size: 12px; transition: transform var(--t-fast); }
.wb-side-arrow.is-open { transform: rotate(180deg); }

.wb-side-sub { padding: 2px 0; }
.wb-side-subitem {
  display: block;
  height: 34px;
  padding: 0 var(--space-4) 0 var(--space-10);
  font-size: var(--text-sm);
  line-height: 34px;
  color: var(--gray-500);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.wb-side-subitem:hover { background: var(--gray-25); color: var(--primary-500); }
.wb-side-subitem.is-active { background: var(--primary-50); font-weight: 700; color: var(--primary-500); }

.wb-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--wb-gap); }
.wb-crumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--wb-card-hd-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  color: var(--gray-500);
}
.wb-crumb em { font-style: normal; color: var(--gray-300); }
.wb-crumb b { font-weight: 700; color: var(--gray-900); }

/* --------------------------------------------------------------------------
   7.1 专家信息维护 · 信息完善（复刻线上系统「添加/编辑专家信息」表单页）
   线上规格取自其样式表：
     · 表单两列 —— .el-form .el-form-item { width:50%; display:inline-block }
     · 控件高 32px，下拉/级联宽 100%
     · 分段 = 白卡 .ebs-collapse-shadow（r4 / shadow / padding 8 / margin-bottom 16）
       + 浅灰标题条（#f4f5f8 / h40 / r4 / 15px / 左内边距 13）
   -------------------------------------------------------------------------- */
.ex-page {
  /* 页面级降档：系统表单比工作台更紧凑（只覆盖 --control-*，不散写尺寸） */
  --control-h: 32px;
  --control-pad-x: 10px;
  --control-pl: 10px;
  --control-font: 13px;
  --control-icon: 14px;
  --control-gap: 14px;

  flex: 1;
  min-width: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

/* --------------------------------------------------------------------------
   7c. 评标记录：累计参与采购评审情况（自入库以来）—— 菜单列表页
   列字段取自业务表单截图（序号 / 项目名称 / 标段·包编号 / 标段·包名称 /
   采购方式 / 采购人 / 评审日期 / 担任角色），但呈现为「查询条件 + 表格 + 分页」
   的列表页，不照搬表单的填写式表格。骨架与 admin-home 的列表页同源。
   -------------------------------------------------------------------------- */
.ex-rec,
.ex-lv,
.ex-fee,
.ex-appeal {
  --ex-ctrl-h: 32px;      /* 查询条件里的输入框 / 下拉框 / 按钮 */
  --ex-row-h: 40px;       /* 表格表头与行高 */
  --ex-page-h: 28px;      /* 分页控件 */
  --ex-line: #eef1f6;
  --ex-head-bg: #fafafa;
  --ex-head-text: #606266;
  --ex-text: #333a47;
  --ex-text-2: #5a6478;
  --ex-text-3: #8a94a6;

  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) 0;
}

/* --- 查询条件 --- */
.ex-filter {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.ex-field { display: flex; align-items: center; gap: var(--space-2); }
.ex-field > span { flex-shrink: 0; font-size: var(--text-sm); color: var(--ex-text-2); }
.ex-hint { margin-left: auto; font-size: var(--text-xs); color: var(--ex-text-3); }

.ex-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ex-ctrl-h);
  padding: 0 15px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--ex-text-2);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.ex-btn:hover { border-color: #a9c2f2; background: #f5f8ff; color: var(--primary-500); }
.ex-btn--primary { border-color: var(--primary-500); background: var(--primary-500); color: #fff; }
.ex-btn--primary:hover { border-color: var(--primary-600); background: var(--primary-600); color: #fff; }

.ex-input,
.ex-pick select {
  height: var(--ex-ctrl-h);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--ex-text);
  outline: none;
  transition: border-color var(--t-fast);
}
.ex-input { width: 186px; padding: 0 var(--space-3); }
.ex-input::placeholder { color: var(--ex-text-3); }
.ex-input:focus,
.ex-pick select:focus { border-color: var(--primary-500); }

.ex-pick { position: relative; display: inline-flex; }
.ex-pick select {
  width: 150px;
  padding: 0 28px 0 var(--space-3);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.ex-pick > i {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--ex-text-3);
  pointer-events: none;
}

/* --- 数据表格：无竖线、表头浅灰、行线极淡 --- */
.ex-tbl-wrap {
  flex: 1;
  min-height: 180px;
  margin-top: var(--space-4);
  overflow: auto;
  border-top: 1px solid var(--ex-line);
  border-bottom: 1px solid var(--ex-line);
}
.ex-tbl {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.ex-tbl th {
  height: var(--ex-row-h);
  padding: 0 var(--space-3);
  background: var(--ex-head-bg);
  border-bottom: 1px solid var(--ex-line);
  font-weight: 400;
  color: var(--ex-head-text);
  text-align: left;
  white-space: nowrap;
}
.ex-tbl td {
  height: var(--ex-row-h);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--ex-line);
  color: var(--ex-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-tbl tbody tr:hover td { background: #f7f9fc; }
.ex-tbl .col-idx { width: 60px; }
.ex-tbl .col-code { width: 144px; }
.ex-tbl .col-method { width: 126px; }
.ex-tbl .col-buyer { width: 168px; }
.ex-tbl .col-date { width: 110px; }
.ex-tbl .col-role { width: 92px; }
.ex-tbl .col-op { width: 74px; }
.ex-tbl-empty { color: var(--ex-text-3); text-align: center; }

/* 状态 / 分类标签（与 admin-home 同一套色板） */
.ex-tagx {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 3px;
  font-size: var(--text-xs);
  line-height: 20px;
}
.ex-tagx--info  { background: #e8f2fd; color: #2b7cd3; }
.ex-tagx--warn  { background: #fdf1e3; color: #b45309; }
.ex-tagx--muted { background: #f1f4f9; color: #64748b; }

.ex-link { color: var(--primary-500); cursor: pointer; transition: color var(--t-fast); }
.ex-link:hover { color: var(--primary-600); text-decoration: underline; }

/* --- 分页 --- */
.ex-pager {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ex-text-2);
}
.ex-page-jump {
  width: 46px;
  height: var(--ex-page-h);
  padding: 0 4px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--ex-text);
  text-align: center;
  outline: none;
}
.ex-page-jump:focus { border-color: var(--primary-500); }
.ex-pager .ex-pick select { height: var(--ex-page-h); width: 104px; }
.ex-page-num,
.ex-page-arrow {
  min-width: var(--ex-page-h);
  height: var(--ex-page-h);
  padding: 0 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--ex-text-2);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.ex-page-num:hover,
.ex-page-arrow:not(:disabled):hover { border-color: #a9c2f2; color: var(--primary-500); }
.ex-page-num.is-on { border-color: var(--primary-500); background: var(--primary-500); color: #fff; }
.ex-page-arrow:disabled { color: var(--ex-text-3); background: #fafbfc; cursor: not-allowed; }
.ex-pager-total { margin-left: var(--space-1); }


/* --- 页头右侧操作（保存 / 提交） --- */

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ex-form .el-form-item { width: 100%; padding-right: 0; }
}
@media (max-width: 1100px) {
  .wb-module { flex-direction: column; }
  .wb-side { width: 100%; }
  .wb-side-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .wb-side-sub { display: none; }
  .wb-user .wb-username { display: none; }
}