/* =====================================================================
   企业蓝灰后台 · 全局统一视觉体系（theme.css）
   —— 全角色统一：管理员 / 评价人 / 被评价人 共用同一套导航、表格、按钮、卡片与配色
   —— 只统一样式，不改动任何权限、显隐逻辑与数据处理
   —— 本文件在各页面最后引入，保障外观规则优先于页面自有样式
   ===================================================================== */
:root{
  /* 顶部导航：中深蓝实色 */
  --e-navy:#1e3a8a;
  --e-navy-line:rgba(255,255,255,.10);
  /* 左侧菜单：深灰蓝 */
  --e-side:#2a3346;
  --e-side-hover:#33415a;
  --e-side-active:#33415a;
  --e-side-text:#c9d3e0;
  --e-side-sub:#8b98ac;
  --e-side-line:rgba(255,255,255,.08);
  /* 选中指示器：亮蓝 */
  --e-ind:#3b82f6;
  /* 主内容区：浅灰白 + 白色卡片 */
  --e-bg:#f4f6f9;
  --e-surface:#ffffff;
  --e-line:#e5e9ef;
  --e-text:#1f2937;
  --e-text-2:#475569;
  --e-muted:#6b7280;
  /* 表格：蓝灰表头 + 深灰正文 */
  --e-th-bg:#eef2f7;
  --e-th-text:#334155;
  --e-tr-hover:#f8fafc;
  --e-row-h:44px;
  /* 按钮：企业蓝主按钮 + 浅灰描边次按钮 */
  --e-primary:#2563eb;
  --e-primary-hover:#1d4ed8;
  --e-primary-weak:#eff6ff;
  --e-primary-weak-2:#dbeafe;
  --e-primary-text:#1e40af;
  --e-btn-ghost-bg:#ffffff;
  --e-btn-ghost-line:#d7dde5;
  --e-btn-ghost-text:#475569;
  --e-btn-ghost-hover:#f1f5f9;
  /* 形态 */
  --e-radius:12px;
  --e-radius-sm:8px;
  --e-shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);

  /* 统一覆盖两侧页面的原有主色变量（含派生色），避免新旧主色混用 */
  --primary:var(--e-primary);
  --primary-600:var(--e-primary-hover);
  --primary-700:var(--e-primary-text);
  --primary-weak:var(--e-primary-weak);
  --primary-weak-2:var(--e-primary-weak-2);
  --primary-soft:var(--e-primary-weak);
  --primary-l:var(--e-primary-weak);
  --primary-d:var(--e-primary-hover);
  /* 派生渐变：登录页 hero 等处沿用同一套企业蓝，避免靛蓝残留 */
  --grad:linear-gradient(135deg,#3b82f6,#1e40af);
  --grad-dark:linear-gradient(135deg,#172554,#1e3a8a);
}

/* ---------- 1. 主内容区：浅灰白底（去掉旧渐变光晕） ---------- */
html body{background:var(--e-bg) !important;color:var(--e-text)}
.main,.content,.wrap{background:transparent}

/* ---------- 2. 顶部导航：中深蓝实色栏（仅 admin 主区顶栏；不碰 evaluator 页内 .topbar 标题容器） ---------- */
.main .topbar,.appbar{
  background:var(--e-navy) !important;
  border-bottom:1px solid var(--e-navy-line) !important;
  box-shadow:0 6px 18px rgba(15,23,42,.18) !important;
}
.main .topbar h1,.main .topbar .sub,.appbar .bn,.main .topbar .titles,.main .topbar .userbox,.main .topbar .hamburger{transition:none}
.main .topbar h1,.appbar .bn{color:#fff !important;font-weight:700}
.main .topbar .sub{color:#c7d2fe !important}
.appbar .bs{color:#c7d2fe !important}
.main .topbar .userbox{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.main .topbar .userbox .avatar{background:linear-gradient(135deg,#3b82f6,#2563eb) !important}
.main .topbar .hamburger{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.22) !important;color:#fff !important}
.main .topbar .hamburger:hover{background:rgba(255,255,255,.26) !important}
.appbar .logo{background:linear-gradient(135deg,#3b82f6,#1d4ed8) !important}
.appbar .usr .muted{color:#cbd5e1 !important}
.appbar .usr button{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.22) !important;color:#fff !important}
.appbar .usr button:hover{background:rgba(255,255,255,.26) !important}

/* ---------- 3. 左侧菜单：深灰蓝底 + 亮蓝左侧指示器 ---------- */
.sidebar,#sidebar,aside.sidebar{background:var(--e-side) !important;border-right:none !important}
.sidebar .brand{border-bottom:1px solid var(--e-side-line) !important}
.sidebar .nav a,.parent-toggle,.nav-item{color:var(--e-side-text) !important}
.sidebar .nav a .nav-desc{color:var(--e-side-sub) !important}
.sidebar .nav a:hover,.parent-toggle:hover,.nav-item:hover,
.sidebar .nav a.active,.nav-item.active,.nav .sub-link.active{
  background:var(--e-side-active) !important;color:#fff !important;box-shadow:none !important;
}
.sidebar .nav a:hover .nav-desc,.sidebar .nav a.active .nav-desc{color:#e2e8f0 !important}
.sidebar .nav a.active .ic,.parent-toggle .ic{opacity:.9}
.sidebar .nav-parent.has-active>.parent-toggle{color:#fff !important}
.sidebar .nav-parent.has-active>.parent-toggle .ic,.sidebar .nav a.active .ic{color:#93c5fd !important;opacity:1}
/* 选中指示器：管理员侧虚拟竖条 / 评价人侧左边框，均为亮蓝 */
.sidebar .nav a.active::before,.sub-link.active::before{background:var(--e-ind) !important}
.nav-item.active{border-left-color:var(--e-ind) !important}
.sidebar .nav-group{color:#7c8aa0 !important}
.sidebar .nav-sub::before{background:linear-gradient(180deg,var(--e-side-hover),var(--e-side)) !important}
.sidebar .sub-link{color:var(--e-side-sub) !important}
.sidebar .sub-link:hover{background:var(--e-side-hover) !important;color:#fff !important}
.sidebar .sub-link::after{background:#4b5769 !important}
.sidebar .sub-link.active::after{background:var(--e-ind) !important;box-shadow:0 0 0 3px rgba(59,130,246,.22) !important}
.sidebar .side-foot{background:transparent !important;border-top:1px solid var(--e-side-line) !important}
.sidebar .side-foot button{background:transparent !important;border-color:var(--e-side-hover) !important;color:var(--e-side-text) !important}
.sidebar .side-foot button:hover{color:#f87171 !important;border-color:#7f1d1d !important;background:rgba(239,68,68,.12) !important}

/* ---------- 3.1 侧边栏图标统一左对齐（同一垂直线） ----------
   顶层项（评分列表 / 评分模板 为 .nav a）与父级项（系统管理 / 我的评价 为 .parent-toggle）
   共用同一固定宽度图标列，图标贴左、文字统一从同一 x 起排，视觉上成一条竖直列。
   用 .sidebar 前缀提升特异性并 !important，确保覆盖各页面内联样式，成为唯一权威源。 */
.sidebar .nav a .ic,
.sidebar .parent-toggle .ic{
  flex:0 0 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.sidebar .nav a .ic svg,
.sidebar .parent-toggle .ic svg{
  width:19px !important;height:19px !important;display:block !important;stroke-width:1.9 !important;
}
/* 菜单项水平内边距全宽度统一（桌面+窄屏）：顶层项(.nav a)与父级项(.parent-toggle)
   同 padding，图标列起点落在同一 x（admin.html 内 .parent-toggle 为 15px、.nav a 为 12px，
   不统一会导致「系统管理 / 我的评价」图标比「评分列表 / 评分模板」右移 3px） */
.sidebar .nav a,
.sidebar .parent-toggle{padding-left:12px !important;padding-right:12px !important}

/* ---------- 4. 白色卡片容器 ---------- */
.card,.panel,.stat,.kpi,.box-white{
  background:var(--e-surface) !important;border:1px solid var(--e-line) !important;
  border-radius:var(--e-radius) !important;box-shadow:var(--e-shadow) !important;
}
.card h3{color:var(--e-text) !important}
.card h3::before{background:linear-gradient(180deg,#3b82f6,#1e40af) !important}

/* ---------- 5. 表格：蓝灰表头 / 深灰正文 / 整齐行高 ---------- */
table th,thead th,.table-wrap th{
  background:var(--e-th-bg) !important;color:var(--e-th-text) !important;
  font-weight:600;font-size:13px;line-height:1.5;letter-spacing:.01em;
  border-bottom:1px solid var(--e-line) !important;
}
table td,tbody td,.table-wrap td{
  background:#fff;color:var(--e-text);
  border-bottom:1px solid var(--e-line);
  line-height:1.5;font-size:13.5px;
}
table th,table td,.table-wrap th,.table-wrap td{padding:11px 12px;height:var(--e-row-h);box-sizing:border-box}
tbody tr:hover td,tbody tr:hover>td{background:var(--e-tr-hover) !important}
.table-wrap{border:1px solid var(--e-line) !important;border-radius:var(--e-radius) !important;overflow:auto}
th .col-filter,th input.search{border:1px solid var(--e-line) !important;border-radius:6px !important;background:#fff !important;color:var(--e-text) !important}
th .col-filter:focus,input:focus,select:focus,textarea:focus{border-color:var(--e-primary) !important;box-shadow:0 0 0 3px var(--e-primary-weak) !important}

/* ---------- 6. 按钮：企业蓝主按钮 / 浅灰描边次按钮 ---------- */
.btn,.btn.primary,button.primary,.btn-primary{
  background:var(--e-primary) !important;border:1px solid var(--e-primary) !important;color:#fff !important;
  border-radius:var(--e-radius-sm) !important;box-shadow:none !important;
}
.btn:hover,.btn.primary:hover,button.primary:hover,.btn-primary:hover{
  background:var(--e-primary-hover) !important;border-color:var(--e-primary-hover) !important;color:#fff !important;
}
.btn.ghost,.btn.secondary,.btn.default,button.ghost{
  background:var(--e-btn-ghost-bg) !important;border:1px solid var(--e-btn-ghost-line) !important;
  color:var(--e-btn-ghost-text) !important;border-radius:var(--e-radius-sm) !important;box-shadow:none !important;
}
.btn.ghost:hover,.btn.secondary:hover,button.ghost:hover{
  background:var(--e-btn-ghost-hover) !important;border-color:#c3ccd8 !important;color:var(--e-text-2) !important;
}
/* 保留警示语义色：删除类红色按钮不被主色覆盖 */
.btn.danger,.btn.del-weak,button.danger{
  background:#fff !important;border-color:#fecaca !important;color:#dc2626 !important;
}
.btn.danger:hover,.btn.del-weak:hover,button.danger:hover{
  background:#fef2f2 !important;border-color:#fca5a5 !important;color:#b91c1c !important;
}

/* ---------- 7. 表单控件统一圈层 ---------- */
input,select,textarea{
  border:1px solid var(--e-line) !important;border-radius:var(--e-radius-sm) !important;
  background:#fff !important;color:var(--e-text) !important;
}
::placeholder{color:#94a3b8}

/* ---------- 8. 移动端同体系（不做角色/主题切换） ---------- */
@media (max-width:640px){
  .sidebar,#sidebar{background:var(--e-side) !important}
  .card,.panel{padding:14px !important}
  table th,table td{padding:9px 10px}
  /* 菜单项水平内边距统一规则已提升至 §3.1（全宽度生效），窄屏自动继承，不再重复定义 */
}

/* ---------- 9. 对齐目标稿精修：深蓝侧栏 / 渐变药丸选中 / 评分列表细节 ---------- */
:root{
  --e-navy:#1e3c72;      /* 顶栏：目标稿的中深蓝 */
  --e-side:#1b2a4a;      /* 侧栏：目标稿的深蓝 */
  --e-side-hover:#25375f;
  --e-th-bg:#e9eff9;     /* 表头：更蓝一档的蓝灰 */
}
/* 选中项 = 蓝色渐变药丸 + 柔光（保留亮蓝左侧指示条，双层强调） */
.sidebar .nav a.active,.sidebar .nav .sub-link.active,.nav-item.active{
  background:linear-gradient(135deg,#2563eb,#3b82f6) !important;
  color:#fff !important;border-radius:10px !important;
  box-shadow:0 4px 14px rgba(37,99,235,.38) !important;
}
.sidebar .nav a.active .ic,.sidebar .nav .sub-link.active .ic,.nav-item.active .ni{color:#fff !important;opacity:1}
.sidebar .nav a.active .nav-desc,.sidebar .nav .sub-link.active{color:#eaf1ff !important}
.sidebar .nav a.active::before{background:#60a5fa !important}
.sidebar .nav .sub-link.active::after{background:#fff !important;box-shadow:0 0 0 3px rgba(255,255,255,.25) !important}

/* ===== 评分列表（#sec-scores）细节 ===== */
/* 页签：药丸式——激活实心蓝渐变，未激活白底灰描边 */
.sc-tabs{background:transparent !important;border:none !important;padding:0 !important;gap:10px !important;border-radius:0 !important}
.sc-tab{background:var(--e-btn-ghost-bg) !important;border:1px solid var(--e-btn-ghost-line) !important;
  color:var(--e-btn-ghost-text) !important;border-radius:999px !important;padding:9px 20px !important;font-weight:600}
.sc-tab:hover{border-color:var(--e-primary) !important;color:var(--e-primary) !important;background:#fff !important}
.sc-tab.active{background:linear-gradient(135deg,#2563eb,#3b82f6) !important;border-color:transparent !important;
  color:#fff !important;box-shadow:0 4px 12px rgba(37,99,235,.32) !important}
/* 卡片标题：字号微升，蓝竖条加粗 */
#sec-scores .card h3{font-size:17px}
#sec-scores .card h3::before{width:5px;height:20px}
/* 工具行：搜索框加宽圆角，周期文字弱化 */
.sc-toolbar input.search{min-width:240px;border-radius:10px !important}
.sc-period{color:var(--e-muted) !important}
.sc-period b{color:var(--e-text) !important}
/* 表头：目标稿的浅蓝调 */
#sec-scores table th{background:#e8f0fc !important;color:#2f4d7a !important;font-size:13px;letter-spacing:.02em}
#sec-scores table td{height:46px}
#sec-scores tbody tr:hover td{background:#f6f9fe !important}
/* 评价人徽章：蓝调药丸 chips */
.ov-pending{gap:6px !important}
.ov-name-tag{background:#eaf1fd !important;color:#2563eb !important;border:1px solid #d3e3fc !important;
  border-radius:999px !important;padding:3px 12px !important;font-size:12.5px !important;font-weight:600 !important}
.ov-name-tag:hover{background:#dbe9fd !important;border-color:#b7d3fb !important}

/* ===== 评价人页（含内嵌视图）细节修正 ===== */
/* 页内 .topbar 是标题容器（非 admin 顶栏），保持浅色：标题深字、页签沿用 app.css */
#sec-scores .filter-bar{display:flex;align-items:center;gap:10px}
#sec-scores .filter-bar select{max-width:260px}

/* ===== 10. 人员列表双层表头滚动修复 =====
   全局规则 thead th{position:sticky;top:0} 会把筛选行也钉在 top:0，
   与标签行重叠后盖住列名（只剩首列「姓名」，因其 z-index:6）。
   现将筛选行钉在标签行下方，两行常驻可见；首列同步横向冻结。 */
#sec-peoplemgmt .table-wrap thead .pm-filter-row th{top:44px;z-index:3}
#sec-peoplemgmt .table-wrap thead .pm-filter-row th:first-child{left:0;z-index:4;
  background:var(--e-th-bg);box-shadow:inset -1px 0 0 var(--e-line),inset 0 -1px 0 var(--e-line)}

/* ===== 11. 版本号（纯展示，不参与布局） ===== */
/* 侧边栏/品牌区版本号：固定在 Logo 附近，随品牌区文字颜色自适应（opacity 继承 currentColor），不随菜单折叠隐藏 */
.side-ver{margin-top:7px;font-size:11.5px;font-weight:500;letter-spacing:.3px;opacity:.72;user-select:none}