/* ==========================================================================
   花园道招聘管理系统 · 全站 UI 增强层
   --------------------------------------------------------------------------
   用法：在每页自己的 <style> 之后引入本文件
        <link rel="stylesheet" href="ui.css">
   由于位置在各页内联样式之后，同优先级时本文件胜出，因此可以统一
   各页不一致的按钮尺寸/圆角；只管视觉，不改布局结构和业务逻辑。

   内容：
   1. 设计变量（阴影层次、缓动曲线、图标）
   2. 按钮系统（三档尺寸 + 主按钮渐变/光带/按压 + 图标）
   3. 卡片与统计卡层次、悬停
   4. 条形从 0 生长
   5. 卡片进入序列
   6. 顶栏毛玻璃
   7. 细节修饰
   8. 无障碍与动效降级
   ========================================================================== */

:root {
  /* 三层阴影：贴地 / 悬浮 / 浮层。比原来的单层 --sh 更能拉开层次 */
  --ui-sh1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --ui-sh2: 0 2px 4px -1px rgba(16, 24, 40, .06), 0 6px 16px -4px rgba(16, 24, 40, .08);
  --ui-sh3: 0 8px 28px -6px rgba(16, 24, 40, .14), 0 2px 8px -2px rgba(16, 24, 40, .06);

  /* 缓动：--ui-ease 用于状态切换，--ui-out 用于入场（前快后稳，显得利落） */
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
  --ui-out: cubic-bezier(.16, 1, .3, 1);

  --ui-pri: #d6336c;
  --ui-pri-d: #b91c55;
  --ui-grad: linear-gradient(135deg, #e3557f 0%, #d6336c 48%, #b91c55 100%);
  --ui-grad-h: linear-gradient(135deg, #e96b92 0%, #dc3a73 48%, #c01f5b 100%);

  /* 按钮图标（mask 方式，颜色跟随 currentColor） */
  --ui-ico-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E");
  --ui-ico-dl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  --ui-ico-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
  --ui-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --ui-ico-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. 按钮系统
   统一到 34px / 29px 两档、9px / 8px 圆角。原来 home 是 32+8px、
   analytics 是 38+10px，同一排按钮在两页高度都不一样。
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid #e4e7ec;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  color: #344054;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ui-ease), box-shadow .18s var(--ui-ease),
              border-color .16s var(--ui-ease), background .16s var(--ui-ease),
              color .16s var(--ui-ease);
}
.btn:hover {
  border-color: #d3d8e0;
  color: #101828;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  box-shadow: 0 2px 6px -1px rgba(16, 24, 40, .09);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: none;
  transition-duration: .06s;
}
.btn:focus-visible {
  outline: none;
  border-color: var(--ui-pri);
  box-shadow: 0 0 0 3px rgba(214, 51, 108, .16);
}

.btn.sm {
  min-height: 29px;
  padding: 0 11px;
  font-size: 12.5px;
  border-radius: 8px;
  gap: 5px;
}

/* ---- 主按钮：渐变底 + 内高光 + 悬停光带扫过 ---- */
.btn.pri,
.btn.primary {
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
  background: var(--ui-grad);
  box-shadow: 0 1px 2px rgba(166, 30, 77, .22),
              0 5px 16px -6px rgba(214, 51, 108, .50),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn.pri:hover,
.btn.primary:hover {
  color: #fff;
  border-color: transparent;
  background: var(--ui-grad-h);
  box-shadow: 0 2px 4px rgba(166, 30, 77, .24),
              0 10px 24px -8px rgba(214, 51, 108, .60),
              inset 0 1px 0 rgba(255, 255, 255, .30);
  transform: translateY(-1px);
}
.btn.pri::after,
.btn.primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .58), transparent);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}
.btn.pri:hover::after,
.btn.primary:hover::after {
  animation: uiShine .72s var(--ui-out) forwards;
}
@keyframes uiShine {
  0%   { left: -60%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

.btn.link {
  min-height: auto;
  padding: 0 3px;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--ui-pri);
}
.btn.link:hover {
  background: none;
  transform: none;
  box-shadow: none;
  color: var(--ui-pri-d);
  text-decoration: underline;
}

.btn:disabled,
.btn[disabled] {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: saturate(.65);
}
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
  border-color: #e4e7ec;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  color: #344054;
}
.btn.pri:disabled:hover,
.btn.pri[disabled]:hover {
  border-color: transparent;
  background: var(--ui-grad);
  color: #fff;
}

/* ---- 按钮内置图标：不改 HTML，按 id 挂 SVG（mask 跟随文字色） ----
   默认全部用「下载」图标，个别 id 覆盖成刷新 / 打印 / 复制 / 对勾。 */
#btnRefresh::before,
#btnCsvFunnel::before,
#btnCsvMatrix::before,
#btnCsvDetail::before,
#btnCsvChannel::before,
#btnDwCsv::before,
#btnPrint::before,
#btnCopy::before,
#planSave::before {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--ui-ico-dl) center / contain no-repeat;
  mask: var(--ui-ico-dl) center / contain no-repeat;
  opacity: .7;
}
#btnRefresh::before {
  -webkit-mask-image: var(--ui-ico-refresh);
  mask-image: var(--ui-ico-refresh);
}
#btnPrint::before {
  -webkit-mask-image: var(--ui-ico-print);
  mask-image: var(--ui-ico-print);
}
#btnCopy::before {
  width: 13px;
  height: 13px;
  opacity: .62;
  -webkit-mask-image: var(--ui-ico-copy);
  mask-image: var(--ui-ico-copy);
}
#planSave::before {
  opacity: .92;
  -webkit-mask-image: var(--ui-ico-check);
  mask-image: var(--ui-ico-check);
}

/* ==========================================================================
   3. 卡片与统计卡层次
   ========================================================================== */
.card {
  box-shadow: var(--ui-sh1);
  transition: box-shadow .22s var(--ui-ease), border-color .22s var(--ui-ease);
}

/* 卡片标题里的序号徽标：给一点材质，避免纯灰块 */
.card > h2 .n {
  background: linear-gradient(135deg, #f5f6f9 0%, #e8eaf0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 24, 40, .05);
  color: #475467;
}

.stat,
.kpi {
  box-shadow: var(--ui-sh1);
  transition: box-shadow .2s var(--ui-ease), transform .2s var(--ui-ease),
              border-color .2s var(--ui-ease);
}
.stat:hover,
.kpi:hover {
  box-shadow: var(--ui-sh2);
  border-color: #e4e7ec;
  transform: translateY(-1px);
}

/* 强调卡顶部色条加一点渐变和光晕，比纯色条有质感 */
.stat.hot::before,
.kpi.pri::before {
  background: linear-gradient(90deg, #e3557f, #d6336c 55%, #a61e4d);
}
.stat.hot {
  background: linear-gradient(180deg, #fffafc 0%, #ffffff 62%);
}

/* 品牌 logo 加内高光 */
.brand .lg {
  box-shadow: 0 2px 8px -2px rgba(214, 51, 108, .35),
              inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* 状态胶囊加一点点立体感 */
.pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(16, 24, 40, .04);
}

/* ==========================================================================
   3b. 表单控件：与按钮统一描边/圆角/聚焦环
   只改外观与状态，不动尺寸，避免把各页既有排版挤乱。
   ========================================================================== */
select,
input[type="date"],
input[type="text"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea {
  border-color: #e4e7ec;
  transition: border-color .16s var(--ui-ease), box-shadow .16s var(--ui-ease),
              background-color .16s var(--ui-ease);
}
select:hover,
input[type="date"]:hover,
input[type="text"]:hover,
input[type="search"]:hover,
textarea:hover {
  border-color: #d3d8e0;
}
select:focus,
input[type="date"]:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--ui-pri);
  box-shadow: 0 0 0 3px rgba(214, 51, 108, .13);
}

/* 下拉箭头改成自绘 chevron：系统原生那个三角又粗又旧，跟新按钮不搭。
   选择器带上类名前缀，才能压过后引入前各页的 `.tools select{background:#fff}` */
select,
.tools select,
.planbar select,
.filters select,
.bar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px 13px;
  cursor: pointer;
}
select:hover,
.tools select:hover,
.planbar select:hover,
.filters select:hover,
.bar select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
select:disabled,
select[disabled] {
  background-color: #f9fafb;
  color: #98a2b3;
  cursor: not-allowed;
}

/* 日期框的日历图标是系统原生的深色实心块，跟细线风格不搭，淡化处理 */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .42;
  width: 15px;
  height: 15px;
  cursor: pointer;
  transition: opacity .16s var(--ui-ease);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: .78;
}

/* ==========================================================================
   4. 条形从 0 生长（纯 CSS，不依赖具体宽度）
   ========================================================================== */
@keyframes uiBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.fn-row .fn-tr > span,
.kpi .k-meter u,
.st-bar i,
.ds-bar u,
.ch-tr .ch-vol,
.hbar i,
.bar i {
  transform-origin: left center;
  animation: uiBarGrow .58s var(--ui-out) both;
}

/* ==========================================================================
   5. 卡片进入：轻微上浮序列
   注意用 backwards —— 动画结束后不保留 transform，
   否则会压住 .stat/.dk 自己的 :hover 位移。
   ========================================================================== */
@keyframes uiRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.stats > .stat,
.dock > .dk,
.kpis > .kpi {
  animation: uiRise .42s var(--ui-out) backwards;
}
.stats > .stat:nth-child(1), .dock > .dk:nth-child(1), .kpis > .kpi:nth-child(1) { animation-delay: .02s; }
.stats > .stat:nth-child(2), .dock > .dk:nth-child(2), .kpis > .kpi:nth-child(2) { animation-delay: .06s; }
.stats > .stat:nth-child(3), .dock > .dk:nth-child(3), .kpis > .kpi:nth-child(3) { animation-delay: .10s; }
.stats > .stat:nth-child(4), .dock > .dk:nth-child(4), .kpis > .kpi:nth-child(4) { animation-delay: .14s; }
.dock > .dk:nth-child(5), .kpis > .kpi:nth-child(5) { animation-delay: .18s; }
.dock > .dk:nth-child(6) { animation-delay: .22s; }
.dock > .dk:nth-child(7) { animation-delay: .26s; }

/* ==========================================================================
   6. 顶栏：毛玻璃 + 滚动投影
   ========================================================================== */
.topbar {
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow .22s var(--ui-ease), border-color .22s var(--ui-ease);
}
.topbar.scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -14px rgba(16, 24, 40, .22);
}

/* ==========================================================================
   7. 细节修饰
   ========================================================================== */
::selection {
  background: rgba(214, 51, 108, .16);
  color: #101828;
}

/* 内部滚动容器（抽屉、下拉面板）的细滚动条 */
.drawer::-webkit-scrollbar,
.hrnav-panel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.drawer::-webkit-scrollbar-thumb,
.hrnav-panel::-webkit-scrollbar-thumb {
  background: #d8dce3;
  border-radius: 99px;
}
.drawer::-webkit-scrollbar-thumb:hover,
.hrnav-panel::-webkit-scrollbar-thumb:hover {
  background: #bcc3cd;
}
.drawer::-webkit-scrollbar-track,
.hrnav-panel::-webkit-scrollbar-track {
  background: transparent;
}

/* 表头不要纯白，压一点底色更清楚 */
.mx th {
  background: linear-gradient(180deg, #fafbfc 0%, #f5f6f9 100%);
}

/* 空态文案不要飘在正中，给一点留白节奏 */
.empty {
  letter-spacing: .2px;
}

/* ==========================================================================
   7.5 登录页：背景压暗，让白卡与主按钮浮起来

   原来 .authwrap 的渐变中间色是 #d6336c，而登录按钮 .btnblock 的底色
   也是 #d6336c —— 两者完全同色，按钮只靠位置区分。整屏铺满玫红也违背
   「品牌色只作点缀」的既定方向。这里保留玫红家族，只降明度，
   层级关系立刻拉开，白卡才显得"浮"在背景之上。
   ========================================================================== */
.authwrap {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(224, 85, 155, .28) 0%, transparent 58%),
    linear-gradient(160deg, #2b0714 0%, #520f2c 45%, #7d173f 100%);
  overflow: hidden;
}

/* 极细网格给纯暗背景一点材质，避免糊成一片；用径向遮罩让它朝边缘淡出 */
.authwrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(78% 68% at 50% 42%, #000 18%, transparent 76%);
  mask-image: radial-gradient(78% 68% at 50% 42%, #000 18%, transparent 76%);
  pointer-events: none;
}

/* 暗背景上要敢于投影，白色才有悬浮感。
   注意这里刻意不加 uiRise 入场动画：登录页是第一屏，动画一旦被冻结在
   起始帧（opacity:0），整张卡会变成半透明，网格背景透上来，白卡直接废掉。 */
.authcard {
  position: relative;
  z-index: 2;
  box-shadow: 0 28px 70px -12px rgba(0, 0, 0, .52), 0 2px 8px rgba(0, 0, 0, .2);
}

/* 登录按钮补齐与全站 .btn.pri 一致的质感。
   用 :not(.gho) 排除「游客查看」那个白底次要按钮。 */
.btnblock:not(.gho) {
  position: relative;
  overflow: hidden;
  background: var(--ui-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 6px 18px -6px rgba(120, 14, 52, .58);
  transition: transform .16s var(--ui-ease), box-shadow .2s var(--ui-ease);
  cursor: pointer;
}
.btnblock:not(.gho):hover {
  background: var(--ui-grad-h);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -8px rgba(120, 14, 52, .66);
}
.btnblock:not(.gho):active {
  transform: translateY(0) scale(.988);
}
.btnblock:not(.gho)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}
.btnblock:not(.gho):hover::after {
  animation: uiShine .72s var(--ui-out) forwards;
}

/* ==========================================================================
   8. 无障碍与动效降级
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btnblock,
  .card,
  .stat,
  .kpi,
  .topbar {
    transition: none !important;
  }
  .btn:hover,
  .btnblock:not(.gho):hover,
  .stat:hover,
  .kpi:hover {
    transform: none;
  }
  .btn.pri:hover::after,
  .btn.primary:hover::after,
  .btnblock:not(.gho):hover::after {
    animation: none;
  }
  .fn-row .fn-tr > span,
  .kpi .k-meter u,
  .st-bar i,
  .ds-bar u,
  .ch-tr .ch-vol,
  .hbar i,
  .bar i,
  .stats > .stat,
  .dock > .dk,
  .kpis > .kpi {
    animation: none !important;
  }
}