/* 智聘人才发展一体化平台 · v4.2 视觉与紧凑布局增强层
 * 叠加在 style.css / beautify.css 之上。分两部分：
 *   ① 紧凑布局：报表与列表同屏信息密度提升（小字号、粘性表头、密排指标卡）
 *   ② 视觉升级：导航、卡片、表格、按钮、标签的整体观感
 * 全部为增量规则，删除任一区块可单独回滚。
 */

/* ============ ① 紧凑布局：指标卡 ============ */
.kpi-row {
  display: grid; gap: 10px; margin-bottom: 4px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.kpi {
  position: relative; padding: 10px 12px 11px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 95, 165, .12);
  border-color: #CBD9E8; }
.kpi::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); opacity: .75;
}
.kpi-v { font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -.4px;
  color: var(--text); }
.kpi-l { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.kpi-s { font-size: 11px; color: var(--text-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-ok::before { background: var(--ok); }
.kpi-ok .kpi-v { color: var(--ok); }
.kpi-warn::before { background: #BA7517; }
.kpi-warn .kpi-v { color: #854F0B; }

/* ============ ① 紧凑布局：表格 ============ */
.tb-compact { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tb-compact th, .tb-compact td {
  padding: 6px 10px; border-bottom: 1px solid #EEF2F7; text-align: left;
  vertical-align: middle; line-height: 1.45;
}
.tb-compact thead th {
  position: sticky; top: 0; z-index: 2;
  background: #F7F9FC; color: var(--text-2); font-weight: 600; font-size: 12px;
  border-bottom: 1px solid #E3E8EF; white-space: nowrap;
}
.tb-compact tbody tr:hover { background: #F8FBFF; }
.tb-compact td.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.tb-compact th.td-num { text-align: right; }
.td-sub { color: var(--text-3); font-size: 11.5px; }
td code {
  background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 5px;
  padding: 0 5px; font-size: 11.5px; color: var(--brand-dark);
}

/* ============ ① 数据报表高密度版式（v4.4） ============
 * 目标：同屏信息量最大化 —— 指标卡更窄更矮、表格行高压到 26px、
 * 多块内容在同一行并排，滚动区固定高度避免页面被单表撑长。 */
.kpi-row.is-dense {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 7px; margin-bottom: 10px;
}
.kpi.is-dense { padding: 7px 9px 8px; border-radius: 8px; }
.kpi.is-dense::before { top: 8px; bottom: 8px; width: 2.5px; }
.kpi.is-dense .kpi-v { font-size: 18px; }
.kpi.is-dense .kpi-l { font-size: 11.5px; margin-top: 1px; }
.kpi.is-dense .kpi-s { font-size: 10.5px; }

.tb-dense { width: 100%; border-collapse: collapse; font-size: 12px; }
.tb-dense th, .tb-dense td {
  padding: 4px 8px; border-bottom: 1px solid #F1F5F9; text-align: left;
  line-height: 1.35; white-space: nowrap;
}
.tb-dense thead th {
  position: sticky; top: 0; z-index: 2; background: #F7F9FC; color: var(--text-2);
  font-weight: 600; font-size: 11.5px; border-bottom: 1px solid #E3E8EF;
}
.tb-dense tbody tr:hover { background: #F8FBFF; }
.tb-dense td.td-num, .tb-dense th.td-num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.tb-dense td.wrap { white-space: normal; }

/* 报表分区标题：比卡片标题更轻，用于把同屏多块内容分段 */
.rp-sec {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  margin: 12px 0 6px; padding-left: 7px; border-left: 3px solid var(--brand);
}
/* 等高并排：多张卡片在同一行，各自内部滚动，页面不会被单表撑长 */
.rp-row { display: grid; gap: 10px; margin-bottom: 10px; align-items: start; }
.rp-row.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-row.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-row.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .rp-row.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-row.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .rp-row.c2, .rp-row.c3, .rp-row.c4 { grid-template-columns: 1fr; }
}
/* 卡片内紧凑正文与固定高度滚动区 */
.rp-body { padding: 8px 10px; }
.rp-scroll { max-height: 236px; overflow: auto; }
.rp-scroll-sm { max-height: 168px; overflow: auto; }
/* 迷你指标条：一行放多个「标签: 值」 */
.rp-mini { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px;
  color: var(--text-2); }
.rp-mini b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* 紧凑条形行（比 .barrow 更矮） */
.barrow.is-dense { margin-bottom: 5px; gap: 8px; }
.barrow.is-dense .bl { width: 68px; font-size: 11.5px; }
.barrow.is-dense .bbar { height: 8px; }
.barrow.is-dense .bv { width: 48px; font-size: 11.5px; }
/* 单元格内迷你进度条 */
.cell-bar { height: 5px; border-radius: 3px; background: #EEF2F7; overflow: hidden;
  min-width: 52px; margin-top: 3px; }
.cell-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5DCAA5, var(--ok)); }

/* 用人部门两级选择器：一级 + 二级并排，二级随一级联动 */
.dept-pick { display: flex; gap: 6px; }
.dept-pick .select { flex: 1 1 0; min-width: 0; }
.dept-pick .select:first-child { flex: 1.15 1 0; }
.tb-compact tbody tr.tr-warn { background: #FFFAF0; }
.tb-compact tbody tr.tr-warn:hover { background: #FFF5E6; }

/* ============ ① 紧凑布局：转化链路 ============ */
.fn-chain { display: flex; gap: 8px; flex-wrap: wrap; }
.fn-step { flex: 1 1 120px; min-width: 118px; }
.fn-step-h { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--text-2); }
.fn-step-h b { font-size: 17px; color: var(--text); font-weight: 700; }
.fn-step-b { height: 6px; border-radius: 4px; background: #EEF2F7; margin: 5px 0 3px;
  overflow: hidden; }
.fn-step-b i { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #378ADD, var(--brand)); }
.fn-step-r { font-size: 11px; color: var(--text-3); }
.fn-drop { color: var(--brand); font-weight: 600; }

/* 岗位质量迷你条 */
.mini-bar { height: 6px; border-radius: 4px; background: #EEF2F7; overflow: hidden; }
.mini-bar i { display: block; height: 100%;
  background: linear-gradient(90deg, #5DCAA5, var(--ok)); }

/* 决策建议条目 */
.advice { padding: 7px 0; border-bottom: 1px dashed #EEF2F7; }
.advice:last-child { border-bottom: 0; }
.advice p { font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.7; }

/* 分段切换条 */
.seg-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sec-title { font-size: 13px; font-weight: 600; color: var(--text-2);
  margin: 14px 0 8px; padding-left: 8px; border-left: 3px solid var(--brand); }

/* ============ ① 权限矩阵表 ============ */
.perm-table th.perm-role { text-align: center; background: #EEF4FB; color: var(--brand-dark); }
.perm-table tr.perm-group td {
  background: #F7F9FC; font-size: 12px; font-weight: 600; color: var(--text-2);
  padding: 5px 10px;
}
.perm-table .perm-cell { text-align: center; }
.perm-table .perm-cell label {
  display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
  color: var(--text-2); cursor: pointer; user-select: none;
}
.perm-table .perm-cell input { margin: 0; cursor: pointer; }

/* ============ ② 视觉升级：侧边栏 ============ */
.sidebar {
  background: linear-gradient(180deg, #0C447C 0%, #134E86 42%, #185FA5 100%);
  color: #E8F1FB;
}
.sidebar .logo { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.sidebar .logo small { color: rgba(232, 241, 251, .62) !important; }
.sidebar .nav-group {
  color: rgba(232, 241, 251, .55); font-size: 11px; letter-spacing: 1.2px;
  font-weight: 600; margin: 14px 0 4px; padding: 0 12px;
}
#nav a {
  color: rgba(232, 241, 251, .88); border-radius: 8px; margin: 1px 8px;
  padding: 7px 12px; font-size: 13px; position: relative;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
#nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
#nav a.active {
  background: rgba(255, 255, 255, .96); color: var(--brand-dark); font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}
#nav a.active::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: #fff;
}
.sidebar .user-box { border-top: 1px solid rgba(255, 255, 255, .14); }
.sidebar .user-box b { color: #fff; }
.sidebar .user-box span { color: rgba(232, 241, 251, .66); }
.sidebar .user-box button {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  color: #EAF3FC; border-radius: 7px;
}
.sidebar .user-box button:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* 当前企业徽标 */
.ent-chip {
  display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 20px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  color: #EAF3FC; font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============ ② 视觉升级：顶栏与卡片 ============ */
.topbar {
  background: linear-gradient(90deg, #fff 0%, #F8FBFF 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.topbar h2 {
  font-size: 17px; font-weight: 600; letter-spacing: .3px;
  padding-left: 10px; border-left: 3px solid var(--brand);
}
.card {
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .03);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 10px 24px rgba(24, 95, 165, .08); }
.card-head {
  border-bottom: 1px solid #EFF3F8; padding: 11px 14px;
  background: linear-gradient(180deg, #FCFDFF, #fff);
  border-radius: 12px 12px 0 0;
}
.card-head h3 { font-size: 14px; font-weight: 600; padding-left: 9px;
  border-left: 3px solid var(--brand); line-height: 1.3; }
.card-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ============ ② 视觉升级：常规表格 ============ */
.content table { border-collapse: collapse; }
.content thead th {
  position: sticky; top: 0; z-index: 1; background: #F7F9FC;
  color: var(--text-2); font-size: 12.5px;
}
.content tbody tr:hover { background: #F8FBFF; }
.content tbody tr:nth-child(even) { background: #FCFDFE; }
.content tbody tr:nth-child(even):hover { background: #F8FBFF; }

/* ============ ② 视觉升级：按钮与标签 ============ */
.btn { border-radius: 8px; transition: transform .15s ease, box-shadow .15s ease,
  background .15s ease, color .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 24, 40, .10); }
.btn:active { transform: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, #2A73C4 100%);
  border-color: transparent; box-shadow: 0 2px 6px rgba(24, 95, 165, .22);
}
.btn-primary:hover { box-shadow: 0 6px 14px rgba(24, 95, 165, .28); }
.btn-sm { font-size: 12px; padding: 4px 10px; }
.tag { border-radius: 20px; font-size: 12px; padding: 1px 9px; font-weight: 500; }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }
.tag-gray { background: #F1F5F9; color: var(--text-2); }

/* 输入框聚焦态更明确 */
.input:focus, .select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(24, 95, 165, .13);
}

/* ============ ② 视觉升级：滚动条与空态 ============ */
.content ::-webkit-scrollbar { width: 9px; height: 9px; }
.content ::-webkit-scrollbar-thumb { background: #D5DEE9; border-radius: 6px; }
.content ::-webkit-scrollbar-thumb:hover { background: #BCCADC; }
.content ::-webkit-scrollbar-track { background: transparent; }
.empty { color: var(--text-3); font-size: 13px; padding: 26px 12px; }

/* ============ ② 视觉升级：统计卡 ============ */
.stat-card, .stat {
  border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(180deg, #fff, #FCFDFF);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.sc-val { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.sc-title { font-size: 12.5px; color: var(--text-2); }
.sc-sub { font-size: 11.5px; color: var(--text-3); }

/* 打印时去掉动效与阴影，避免浪费墨水 */
@media print {
  .sidebar, .topbar, .card-tools, .btn { box-shadow: none !important; }
  * { animation: none !important; transition: none !important; }
}