/* ============================================================
   人事管理系统 - 设计令牌
   单一蓝色企业色系，中性描边，统一圆角与阴影梯度
   ============================================================ */
:root {
  /* 表面与描边 —— 中性冷灰，不再与蓝灰背景冲突 */
  --bg: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #f1f5fb;
  --line: #e2e8f2;
  --line-strong: #cfd9e8;

  /* 文字 */
  --text: #1f2937;
  --text-2: #4b5768;
  --muted: #7c879b;

  /* 品牌蓝 —— KPI 数字、主按钮、选中态共用同一个色相 */
  --brand: #3f6fe6;
  --brand-ink: #2f58c4;
  --brand-hover: #345fd1;
  --brand-soft: #e8efff;
  --brand-faint: #f4f7ff;

  /* 深色导航 */
  --nav-bg: #35455d;
  --nav-bg-2: #2f3d53;

  /* 语义色 —— 增员 / 减员 / 提醒 */
  --pos: #1c9b6a;
  --pos-soft: #e3f5ed;
  --neg: #d9534f;
  --neg-soft: #fdecec;
  --warn: #c77a12;
  --warn-soft: #fdf3e3;

  /* 圆角梯度 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* 阴影梯度 */
  --sh-1: 0 1px 2px rgba(26, 42, 70, 0.06);
  --sh-2: 0 4px 12px rgba(26, 42, 70, 0.08);
  --sh-3: 0 12px 28px rgba(26, 42, 70, 0.12);

  /* 兼容旧类名引用的别名 */
  --paper: var(--surface);
  --panel: var(--surface);
  --panel-strong: var(--surface);
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --accent-warm: var(--warn);
  --ink-dark: var(--nav-bg);
  --blue: var(--brand);
  --blue-soft: var(--brand-faint);
  --shadow: var(--sh-2);
}

/* ============================================================
   基础
   ============================================================ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 15px;
}

h4 {
  font-size: 14px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--brand);
}

.status-note,
.eyebrow,
.panel-head span,
.hero-copy,
.summary-item span,
.detail-item span,
.hero-metric span,
.brand p {
  color: var(--muted);
}

/* 可访问性：统一的键盘焦点环（原样式表完全没有焦点样式） */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.app-header :focus-visible,
.app-sidebar :focus-visible {
  outline-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   应用外壳
   ============================================================ */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  color: #ffffff;
  background: linear-gradient(90deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
  box-shadow: var(--sh-2);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-brand-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.app-brand strong,
.app-brand span {
  display: block;
}

.app-brand strong {
  font-size: 16px;
  line-height: 1.3;
}

.app-brand span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.app-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-search {
  position: relative;
  display: block;
}

.header-search input {
  width: 240px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  color: var(--text);
  background: rgba(255, 255, 255, 0.95);
  transition: width 0.18s ease, background 0.18s ease;
}

.header-search input:focus {
  width: 300px;
  background: #ffffff;
}

.header-locale {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

.header-avatar,
.profile-avatar,
.avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #6f96f2, var(--brand-ink));
}

.header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
}

.header-profile-text strong,
.header-profile-text span {
  display: block;
  text-align: left;
  line-height: 1.35;
}

.header-profile-text strong {
  font-size: 13px;
}

.header-profile-text span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
}

/* 顶栏用户菜单（新增：原来没有任何退出登录入口） */
.header-profile {
  position: relative;
}

.header-profile-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 5px;
  border: 0;
  border-radius: var(--r-pill);
  color: #ffffff;
  background: transparent;
  cursor: pointer;
  transition: background 0.16s ease;
}

.header-profile-trigger:hover {
  background: rgba(255, 255, 255, 0.12);
}

.header-profile-caret {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.18s ease;
}

.header-profile-trigger[aria-expanded="true"] .header-profile-caret {
  transform: rotate(180deg);
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 212px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-3);
}

.user-menu-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.user-menu-head strong {
  display: block;
  font-size: 14px;
}

.user-menu-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.user-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.user-menu button:hover {
  background: var(--surface-3);
}

.user-menu button.danger {
  color: var(--neg);
}

.user-menu button.danger:hover {
  background: var(--neg-soft);
}

/* ============================================================
   工作区布局
   ============================================================ */
.workspace-shell {
  flex: 1;
  display: grid;
  /* 默认两列；只有真的存在右侧栏时才让出第三列，
     否则没有 workspace-right 的页面右边会空出一条 260px 的幽灵列 */
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
}

.workspace-shell:has(> .workspace-right) {
  grid-template-columns: 76px minmax(0, 1fr) 260px;
}

.app-sidebar {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
}

.nav-rail {
  padding: 12px 0;
  display: grid;
  gap: 6px;
  align-content: start;
}

.nav-rail a {
  margin: 0 8px;
  padding: 10px 4px;
  display: grid;
  justify-items: center;
  gap: 6px;
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.16s ease, background 0.16s ease;
}

.nav-rail a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-rail a.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.nav-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 700;
  color: #dbe7ff;
  background: rgba(255, 255, 255, 0.1);
  transition: color 0.16s ease, background 0.16s ease;
}

.nav-rail a.active .nav-icon {
  color: var(--brand-ink);
  background: #ffffff;
}

.workspace-main {
  min-width: 0;
  padding: 14px 16px 24px;
}

.workspace-right {
  padding: 14px 16px 24px 0;
}

/* ============================================================
   页签与页头
   ============================================================ */
.workspace-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.workspace-tab {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.16s ease, background 0.16s ease;
}

/* 原样式表缺失：明细页的页签链接完全没有样式 */
.workspace-tab-link:hover {
  color: var(--brand);
  background: var(--brand-faint);
}

.workspace-tab.active {
  color: var(--brand);
  font-weight: 600;
  background: var(--surface);
  border-color: var(--line);
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.page-head {
  margin-bottom: 14px;
}

.page-head h2 {
  margin-bottom: 2px;
}

/* ============================================================
   面板
   ============================================================ */
.panel,
.stat-card,
.login-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.panel,
.login-card {
  padding: 18px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.panel-head span {
  font-size: 12px;
}

.stack-grid {
  display: grid;
  gap: 16px;
}

.home-card,
.side-card {
  margin-bottom: 16px;
}

.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 156px;
  margin-bottom: 18px;
  padding: 26px 30px;
  border-radius: var(--r-lg);
  color: #ffffff;
  background:
    radial-gradient(circle at 76% 18%, rgba(114, 193, 255, 0.28), transparent 25%),
    linear-gradient(120deg, #193a73 0%, #225ea5 54%, #178596 100%);
  box-shadow: 0 14px 34px rgba(24, 67, 128, 0.2);
}

.home-hero::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -110px;
  width: 310px;
  height: 220px;
  border: 32px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.home-hero-copy,
.home-hero-actions {
  position: relative;
  z-index: 1;
}

.home-hero-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.home-hero h3 {
  margin-bottom: 8px;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.home-hero p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

.home-hero-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.home-hero-actions a {
  padding: 10px 16px;
  border-radius: var(--r-sm);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.home-hero-primary {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.home-hero-secondary {
  background: rgba(10, 32, 72, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.home-hero-actions a:hover {
  background: rgba(255, 255, 255, 0.27);
}

.home-section {
  margin-bottom: 18px;
}

.home-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 11px;
}

.home-section-head span {
  color: var(--brand);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.home-section-head h3 {
  margin-top: 2px;
  font-size: 17px;
}

.home-section-head small,
.home-loading {
  color: var(--muted);
  font-size: 12px;
}

.home-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.home-nav-card {
  --nav-tone: var(--brand);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.home-nav-card:hover {
  transform: translateY(-2px);
  border-color: var(--nav-tone);
  box-shadow: var(--sh-2);
}

.home-nav-card.tone-cyan { --nav-tone: #1b9aaa; }
.home-nav-card.tone-orange { --nav-tone: #d98132; }
.home-nav-card.tone-green { --nav-tone: #3b9a6d; }

.home-nav-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--nav-tone);
  background: color-mix(in srgb, var(--nav-tone) 12%, white);
  font-size: 16px;
  font-weight: 700;
}

.home-nav-card strong,
.home-nav-card small {
  display: block;
}

.home-nav-card strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.home-nav-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.home-nav-card i {
  color: var(--nav-tone);
  font-style: normal;
  font-size: 17px;
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 16px;
  margin-bottom: 16px;
}

.home-focus-card {
  min-height: 300px;
}

.home-focus-card .panel-head > div,
.home-recent-card .panel-head > div {
  display: grid;
  gap: 3px;
}

.home-focus-card .panel-head a,
.home-recent-card .panel-head a {
  color: var(--brand);
  font-size: 12px;
  text-decoration: none;
}

.home-department-list,
.home-reminder-list {
  display: grid;
  gap: 12px;
}

.home-department-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(100px, 1fr) 42px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.home-department-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-3);
}

.home-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #36a8b5);
}

.home-department-row strong {
  color: var(--brand);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.home-reminder-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
}

.home-reminder-item:hover { background: var(--brand-faint); }

.home-reminder-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #b76a21;
  background: #fff1df;
  font-size: 12px;
  font-weight: 700;
}

.home-reminder-item strong,
.home-reminder-item small {
  display: block;
}

.home-reminder-item strong { font-size: 13px; }
.home-reminder-item small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.home-reminder-item time { color: #b65e24; font-size: 11px; white-space: nowrap; }

.home-reminder-clear {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--muted);
  font-size: 13px;
}

.home-recent-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.home-person-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
}

.home-person-card:hover { border-color: var(--brand); }

.home-person-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-faint);
  font-weight: 700;
}

.home-person-card strong,
.home-person-card span,
.home-person-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-person-card strong { font-size: 13px; }
.home-person-card span { margin-top: 2px; color: var(--text-2); font-size: 11px; }
.home-person-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }

@media (max-width: 1180px) {
  .home-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-recent-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .home-hero { align-items: flex-start; flex-direction: column; }
  .home-dashboard-grid { grid-template-columns: 1fr; }
  .home-recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .home-hero { padding: 22px 20px; }
  .home-hero-actions { width: 100%; flex-direction: column; }
  .home-hero-actions a { text-align: center; }
  .home-nav-grid,
  .home-recent-list { grid-template-columns: 1fr; }
  .home-department-row { grid-template-columns: minmax(80px, 120px) minmax(80px, 1fr) 40px; }
}

.eyebrow {
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
}

/* 空状态（原来空数据时是一片白板） */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 32px 18px;
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
}

.empty-state span {
  font-size: 12px;
}

/* ============================================================
   页头条
   面包屑 + 标题 + 操作合为一条，取代原先 page-head 与
   overview-toolbar 两个区块（两者标题重复）
   ============================================================ */
.page-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.page-bar-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.page-bar-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.page-bar-title h2 {
  padding-left: 10px;
  border-left: 3px solid var(--brand);
  line-height: 1.25;
}

.page-bar-title .status-note {
  font-size: 12px;
}

.page-bar-actions {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   可折叠面板
   录入/导入属低频操作，默认收起，让统计与数据表相邻
   ============================================================ */
.collapsible-panel {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.collapsible-panel > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.collapsible-panel > summary::-webkit-details-marker {
  display: none;
}

.collapsible-panel > summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 12px;
  transition: transform 0.18s ease;
}

.collapsible-panel[open] > summary::before {
  transform: rotate(90deg);
}

.collapsible-panel[open] > summary {
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.collapsible-panel > summary h3 {
  font-size: 15px;
}

.collapsible-panel > summary .summary-hint {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.collapsible-panel > summary:hover {
  background: var(--surface-2);
}

.collapsible-body {
  padding: 18px;
}

/* 详情页的上一位/下一位 */
.neighbour-nav {
  display: inline-flex;
  gap: 6px;
}

.neighbour-nav .link-button {
  padding: 8px 12px;
}

/* 到头时禁用而不是隐藏，避免按钮位置来回跳动 */
.link-button.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* ============================================================
   图表容器
   Chart.js 需要一个高度确定的父容器，否则 responsive 模式下
   canvas 会在每次重绘时不断增高
   ============================================================ */
.chart-box {
  position: relative;
  width: 100%;
  height: 260px;
}

.chart-box.tall {
  height: 340px;
}

.chart-box canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* 概览指标可点击查看对应人员 */
#kpiGrid .overview-kpi-card {
  cursor: pointer;
}

#kpiGrid .overview-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--sh-3);
}

/* ============================================================
   分页
   ============================================================ */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pagination-info {
  color: var(--muted);
  font-size: 13px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-button {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.page-button:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-faint);
}

.page-button.active {
  border-color: transparent;
  background: var(--brand);
  color: #ffffff;
  font-weight: 600;
}

.page-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-ellipsis {
  padding: 0 2px;
  color: var(--muted);
}

/* ============================================================
   状态徽章
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-在职 {
  color: var(--pos);
  background: var(--pos-soft);
}

.badge-试用 {
  color: var(--warn);
  background: var(--warn-soft);
}

.badge-离职 {
  color: var(--muted);
  background: var(--surface-3);
}

.badge-调出 {
  color: #25637c;
  background: #e2f1f5;
}

/* 已归档行整体降权，避免和在职人员混淆 */
tr.row-left td:not(:has(.badge)) {
  color: var(--muted);
}

/* ============================================================
   异动轨迹时间线
   ============================================================ */
.timeline {
  display: grid;
  gap: 0;
}

.timeline-item {
  position: relative;
  padding: 0 0 18px 24px;
  border-left: 2px solid var(--line);
}

.timeline-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--brand);
}

.timeline-item[data-type="离职"]::before {
  background: var(--neg);
}

.timeline-item[data-type="调出"]::before {
  background: #3b91ad;
}

.timeline-item[data-type="入职"]::before {
  background: var(--pos);
}

.timeline-item[data-type="信息变更"]::before {
  background: var(--line-strong);
}

.timeline-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.timeline-head strong {
  font-size: 14px;
}

.timeline-head time {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.timeline-body {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 13px;
}

.timeline-move {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12px;
}

.timeline-move .arrow {
  color: var(--brand);
}

/* ============================================================
   确认对话框
   ============================================================ */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(24, 34, 52, 0.42);
  animation: fade-in 0.15s ease;
}

.dialog {
  width: 100%;
  max-width: 460px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-3);
  animation: dialog-in 0.18s ease;
}

.dialog-head {
  padding: 18px 20px 0;
}

.dialog-head h3 {
  font-size: 16px;
}

.dialog-body {
  display: grid;
  gap: 12px;
  padding: 14px 20px;
}

.dialog-body label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 18px;
}

.danger-button {
  padding: 9px 18px;
  border: 0;
  border-radius: var(--r-sm);
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  background: var(--neg);
  cursor: pointer;
}

.danger-button:hover {
  filter: brightness(0.94);
}

/* 导入向导：表格和错误清单需要更宽的对话框 */
.import-dialog {
  max-width: 720px;
}

.import-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.import-stats span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}

.import-stats strong {
  margin-left: 4px;
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.import-dialog .table-wrap {
  margin-top: 4px;
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(-8px); }
}

/* ============================================================
   加载与只读态
   ============================================================ */
.loading-row td {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
}

/* viewer 登录时，写操作入口整体隐藏 */
body[data-role="viewer"] [data-requires-admin] {
  display: none !important;
}

.field-error {
  color: var(--neg);
  font-size: 12px;
}

input.invalid,
select.invalid {
  border-color: var(--neg);
}

input.invalid:focus,
select.invalid:focus {
  box-shadow: 0 0 0 3px var(--neg-soft);
}

/* ============================================================
   概览工具条
   ============================================================ */
.overview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 16px;
}

.overview-toolbar-main {
  display: grid;
  gap: 8px;
}

.overview-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overview-breadcrumbs span {
  position: relative;
  padding-right: 13px;
  color: var(--muted);
  font-size: 12px;
}

.overview-breadcrumbs span::after {
  content: "›";
  position: absolute;
  right: 0;
  top: -1px;
  color: var(--line-strong);
}

.overview-breadcrumbs .active {
  color: var(--brand);
  font-weight: 600;
}

.overview-breadcrumbs .active::after {
  display: none;
}

.overview-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.overview-title-row h3 {
  padding-left: 9px;
  border-left: 3px solid var(--brand);
  font-size: 16px;
}

.overview-toolbar-actions {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.overview-select-shell {
  display: grid;
  gap: 6px;
  min-width: 168px;
  font-size: 12px;
  color: var(--muted);
}

/* ============================================================
   KPI 与统计卡
   ============================================================ */
.overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.overview-kpi-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.overview-kpi-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
  outline-offset: 2px;
}

.member-dialog {
  max-width: 920px;
}

.member-dialog-summary {
  color: var(--muted);
  font-size: 13px;
}

.member-table-wrap {
  max-height: min(60vh, 520px);
}

.member-table a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.overview-kpi-card::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -26px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 6px solid var(--brand-faint);
}

.overview-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--sh-3);
}

.overview-kpi-card span,
.overview-kpi-card strong,
.overview-kpi-card small {
  display: block;
  position: relative;
  z-index: 1;
}

.overview-kpi-card span {
  color: var(--text-2);
  font-size: 13px;
}

.overview-kpi-card strong {
  margin: 10px 0 4px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.overview-kpi-card small {
  color: var(--muted);
  font-size: 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
}

.stat-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--brand-faint);
}

.stat-card span,
.stat-card small {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 12px;
}

.stat-card h3 {
  position: relative;
  z-index: 1;
  margin: 8px 0 4px;
  font-size: 28px;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.card-grid.three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.mini-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.mini-card span,
.mini-card strong,
.mini-card small {
  display: block;
}

.mini-card span,
.mini-card small {
  color: var(--muted);
  font-size: 12px;
}

.mini-card strong {
  margin: 6px 0 3px;
  font-size: 24px;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Hero 面板
   ============================================================ */
.hero-panel {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 20px;
  margin-bottom: 16px;
}

.hero-panel h3 {
  font-size: 17px;
  line-height: 1.5;
}

.hero-copy {
  margin-top: 8px;
  max-width: 760px;
  font-size: 13px;
}

.hero-side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.hero-metric {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.hero-metric span {
  font-size: 12px;
}

.hero-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  color: var(--brand);
}

/* ============================================================
   图表：排名 / 进度 / 条形 / 环形
   ============================================================ */
.overview-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.8fr;
  gap: 16px;
  margin-bottom: 16px;
}

.overview-secondary-grid,
.insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.overview-secondary-grid > .panel:only-child {
  grid-column: 1 / -1;
}

.ranking-list,
.progress-list,
.bar-chart-list,
.summary-list {
  display: grid;
  gap: 12px;
}

.ranking-item,
.progress-item,
.bar-chart-item {
  display: grid;
  gap: 6px;
}

.ranking-head,
.progress-head,
.bar-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.ranking-head strong,
.progress-head strong,
.bar-chart-head strong {
  font-variant-numeric: tabular-nums;
}

.ranking-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ranking-index {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 12px;
  font-weight: 700;
}

.progress-track,
.ranking-track,
.bar-chart-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

.progress-fill,
.ranking-fill,
.bar-chart-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 0.3s ease;
}

.ranking-fill {
  background: linear-gradient(90deg, #7fa3f5, var(--brand));
}

.bar-chart-fill {
  background: linear-gradient(90deg, #8fc9f0, var(--brand));
}

.donut-panel {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 18px;
  align-items: center;
}

.donut-chart {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--chart, conic-gradient(var(--brand) 0 50%, #f0a12e 50% 100%));
}

.donut-chart::before {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: var(--surface);
}

.donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

.donut-center span {
  color: var(--muted);
  font-size: 12px;
}

.donut-center strong {
  display: block;
  margin-top: 2px;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.donut-legend {
  display: grid;
  gap: 10px;
  align-content: center;
}

.legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.legend-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.legend-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

/* ============================================================
   汇总条目
   ============================================================ */
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13px;
}

.summary-item span {
  flex: none;
}

.summary-item strong {
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.care-grid,
.forecast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.care-grid h4 {
  margin-bottom: 10px;
}

.forecast-grid {
  margin-bottom: 0;
}

/* ============================================================
   表格
   ============================================================ */
.table-wrap {
  overflow: auto;
  max-height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

/* 粘性表头：长名单滚动时不再丢列名 */
th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--text-2);
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line-strong);
}

td {
  color: var(--text-2);
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:nth-child(even) {
  background: var(--surface-2);
}

tbody tr:hover {
  background: var(--brand-faint);
}

.clickable-row {
  cursor: pointer;
  transition: background 0.14s ease;
}

/* 可排序表头 */
th.sortable {
  cursor: pointer;
  user-select: none;
  padding-right: 22px;
  position: sticky;
}

th.sortable::after {
  content: "↕";
  position: absolute;
  right: 8px;
  color: var(--line-strong);
  font-size: 11px;
}

th.sortable:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

th.sortable.sorted {
  color: var(--brand);
}

th.sortable.sorted[data-dir="asc"]::after {
  content: "↑";
  color: var(--brand);
}

th.sortable.sorted[data-dir="desc"]::after {
  content: "↓";
  color: var(--brand);
}

.clickable-row.active {
  background: var(--brand-soft);
}

.clickable-row.active td {
  color: var(--text);
}

/* 数字列右对齐更易比对 */
td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   明细三栏布局
   ============================================================ */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 16px;
  align-items: start;
}

.sticky-detail-panel,
.department-side-panel {
  position: sticky;
  top: 74px;
}

.department-side-list {
  display: grid;
  gap: 6px;
  max-height: 520px;
  overflow: auto;
}

.department-side-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.department-side-item:hover {
  border-color: var(--brand);
  background: var(--brand-faint);
}

.department-side-item.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  font-weight: 600;
}

.department-side-item strong {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.detail-summary-card {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.detail-summary-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-stack {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.detail-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 13px;
}

.detail-item span {
  font-size: 12px;
}

/* ============================================================
   标签
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-3);
}

.tag.active {
  color: var(--brand-ink);
  background: var(--brand-soft);
}

.tag.pos {
  color: var(--pos);
  background: var(--pos-soft);
}

.tag.neg {
  color: var(--neg);
  background: var(--neg-soft);
}

/* 增减数值语义色 */
.value-pos {
  color: var(--pos);
}

.value-neg {
  color: var(--neg);
}

/* ============================================================
   工具条与表单
   ============================================================ */
.toolbar-panel,
.toolbar-stack,
.movement-entry-panel {
  margin-bottom: 16px;
}

.toolbar-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.toolbar-stack {
  display: grid;
  gap: 14px;
}

.toolbar-row {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.employee-filter-grid {
  grid-template-columns: minmax(240px, 1.7fr) repeat(3, minmax(130px, 1fr));
}

.change-filter-grid {
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(145px, 1fr));
}

.change-table td {
  vertical-align: middle;
}

.change-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.employee-cell-link {
  display: grid;
  gap: 3px;
  color: var(--ink);
  text-decoration: none;
}

.employee-cell-link:hover strong {
  color: var(--brand);
}

.employee-cell-link small,
.change-page-current {
  color: var(--muted);
  font-size: 12px;
}

.badge-change {
  white-space: nowrap;
}

.badge-调岗 {
  color: #9a5b16;
  background: #fff1d6;
}

.badge-调入 {
  color: #237454;
  background: #e2f3e9;
}

.badge-信息变更 {
  color: #506176;
  background: #e9eef4;
}

.toolbar-row.compact {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.toolbar-row label,
.search-shell,
.login-form label,
.entry-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.login-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.entry-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.entry-form h4 {
  grid-column: 1 / -1;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.span-2 {
  grid-column: 1 / -1;
}

.entry-help {
  grid-column: 1 / -1;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  background: var(--brand-faint);
  font-size: 12px;
  line-height: 1.6;
}

input,
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--brand);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.header-search input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
}

textarea {
  resize: vertical;
  min-height: 110px;
  font-family: "Consolas", "Menlo", monospace;
  font-size: 12px;
}

input[type="file"] {
  padding: 7px 10px;
  background: var(--surface);
  cursor: pointer;
}

/* ============================================================
   按钮
   ============================================================ */
.section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.section-tab,
.ghost-button,
.primary-button,
.quick-login-button {
  cursor: pointer;
}

.section-tab,
.ghost-button {
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13px;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.section-tab {
  color: var(--text-2);
  font-weight: 600;
}

.section-tab:hover,
.ghost-button:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-faint);
}

.section-tab.active {
  color: #ffffff;
  border-color: transparent;
  background: var(--brand);
}

.ghost-button {
  color: var(--text-2);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--r-sm);
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  background: var(--brand);
  box-shadow: var(--sh-1);
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.primary-button:hover {
  background: var(--brand-hover);
  box-shadow: var(--sh-2);
}

.primary-button:active {
  transform: translateY(1px);
}

/* 原样式表缺失：<a> 用 primary-button 时是 inline，内边距塌陷 */
.link-button {
  text-decoration: none;
  white-space: nowrap;
}

/* ============================================================
   提示条（替代 window.alert）
   ============================================================ */
/* hidden 属性的兜底：任何组件一旦被赋予 display，浏览器默认的
   [hidden]{display:none} 就会失效，用户菜单这类元素会永久悬浮 */
[hidden] {
  display: none !important;
}

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: grid;
  gap: 8px;
  max-width: min(380px, calc(100vw - 36px));
  /* 容器本身横跨屏幕，不能吃掉底部区域的点击 */
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-3);
  font-size: 13px;
  animation: toast-in 0.2s ease;
  pointer-events: auto;
}

.toast.ok {
  border-left-color: var(--pos);
}

.toast.warn {
  border-left-color: var(--warn);
}

.toast.error {
  border-left-color: var(--neg);
}

.toast-close {
  margin-left: auto;
  padding: 0 2px;
  border: 0;
  color: var(--muted);
  background: none;
  cursor: pointer;
  line-height: 1;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ============================================================
   右侧信息栏
   ============================================================ */
.profile-card {
  padding: 16px;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  font-size: 18px;
}

.profile-head h3 {
  font-size: 14px;
  line-height: 1.4;
}

.profile-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.profile-meta span {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

/* 旧版认证条（保留给遗留页面） */
.auth-strip {
  margin-bottom: 18px;
}

.auth-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.auth-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-badge {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
}

.auth-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   色调（app.js 通过 tone-${item.tone} 动态拼接）
   ============================================================ */
.tone-blue {
  background: linear-gradient(135deg, #8eb7ff, #5484ee);
}

.tone-green {
  background: linear-gradient(135deg, #7fd39a, #34a86a);
}

.tone-violet {
  background: linear-gradient(135deg, #b3a1ff, #7c67ea);
}

.tone-amber {
  background: linear-gradient(135deg, #ffc86b, #f0a12e);
}

.tone-orange {
  background: linear-gradient(135deg, #ffb297, #ff7e58);
}

.tone-red {
  background: linear-gradient(135deg, #ff9b9b, #ea5c5c);
}

/* ============================================================
   登录页
   ============================================================ */
body[data-page="login"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(63, 111, 230, 0.14), transparent 42%),
    linear-gradient(135deg, #f3f6fc 0%, #eaf0fa 52%, #e6edf8 100%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
  padding: 36px;
}

.login-logo {
  width: 132px;
  display: block;
  margin-bottom: 16px;
}

.login-hero h1 {
  margin-bottom: 10px;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.2;
}

.login-copy {
  max-width: 540px;
  margin-bottom: 26px;
  font-size: 15px;
  color: var(--text-2);
}

.quick-card {
  max-width: 600px;
}

.quick-login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-login-button {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.quick-login-button:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--sh-2);
}

.quick-login-button strong,
.quick-login-button span,
.quick-login-button small {
  display: block;
}

.quick-login-button span {
  margin-top: 2px;
  color: var(--brand);
  font-size: 13px;
}

.quick-login-button small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.login-form-card {
  width: 100%;
  max-width: 440px;
  justify-self: end;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-submit {
  width: 100%;
  padding: 12px;
}

/* ============================================================
   遗留页面布局
   departments / department-form / employee-detail / employee-form / leave
   这 5 个页面未接入主导航，样式保留以免其完全失效
   ============================================================ */
.layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 20px;
  color: #f2f5fa;
  background: var(--nav-bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.brand-logo {
  width: 64px;
  display: block;
  object-fit: contain;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav a {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.16s ease, background 0.16s ease;
}

.nav a:hover,
.nav a.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.content {
  padding: 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1320px) {
  .overview-main-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1180px) {
  .workspace-shell,
  .workspace-shell:has(> .workspace-right) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .workspace-right {
    grid-column: 2 / 3;
    padding: 0 16px 24px;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }

  .hero-panel,
  .overview-main-grid,
  .overview-secondary-grid,
  .insight-grid,
  .detail-layout,
  .care-grid,
  .forecast-grid,
  .entry-grid {
    grid-template-columns: 1fr;
  }

  .sticky-detail-panel,
  .department-side-panel {
    position: static;
  }

  .department-side-list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    max-height: none;
  }

  .toolbar-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .donut-panel {
    grid-template-columns: 1fr;
  }

  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-form-card {
    justify-self: stretch;
    max-width: none;
  }
}

@media (max-width: 720px) {
  .app-header {
    position: static;
    height: auto;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .app-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .header-search {
    flex: 1;
    min-width: 180px;
  }

  .header-search input,
  .header-search input:focus {
    width: 100%;
  }

  .workspace-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: static;
    height: auto;
    order: 1;
  }

  .nav-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px;
  }

  .workspace-main {
    order: 2;
    padding: 12px;
  }

  .workspace-right {
    order: 3;
    grid-column: auto;
    padding: 0 12px 20px;
  }

  .content,
  .login-shell {
    padding: 16px;
  }

  .toolbar-panel,
  .overview-toolbar,
  .page-bar,
  .topbar,
  .auth-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-bar-actions {
    width: 100%;
  }

  .overview-kpi-grid,
  .stats-grid,
  .toolbar-row,
  .detail-meta-grid,
  .card-grid.three,
  .quick-login-grid,
  .entry-form {
    grid-template-columns: 1fr;
  }

  .collapsible-body {
    padding: 14px;
  }

  .entry-form h4,
  .span-2 {
    grid-column: auto;
  }

  .table-wrap {
    max-height: none;
  }

  .toast-stack {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* 手机端：导航固定到底部，内容与操作区改为拇指友好的单/双列布局。 */
@media (max-width: 720px) {
  body {
    padding-bottom: 0;
  }

  .app-header {
    gap: 9px;
    padding: 10px 12px;
  }

  .app-brand span,
  .header-locale,
  .header-profile-text,
  .header-profile-caret {
    display: none;
  }

  .app-brand strong {
    font-size: 15px;
  }

  .app-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .header-search {
    min-width: 0;
  }

  .header-profile-trigger {
    padding: 2px;
  }

  .app-sidebar {
    position: static;
    width: 100%;
    height: auto;
    background: linear-gradient(90deg, var(--nav-bg), var(--nav-bg-2));
    box-shadow: 0 5px 16px rgba(23, 34, 52, 0.12);
  }

  .nav-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    height: auto;
    padding: 5px 4px 4px;
  }

  .nav-rail a {
    min-width: 0;
    margin: 0;
    padding: 4px 2px;
    gap: 2px;
    font-size: 10px;
  }

  .nav-icon {
    width: 29px;
    height: 29px;
    font-size: 13px;
  }

  .workspace-main {
    width: 100%;
    padding: 10px;
  }

  .workspace-tabs {
    overflow-x: auto;
    align-items: stretch;
    gap: 2px;
    scrollbar-width: none;
  }

  .workspace-tabs::-webkit-scrollbar {
    display: none;
  }

  .workspace-tab {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 13px;
    white-space: nowrap;
  }

  .page-bar {
    gap: 12px;
    padding-bottom: 12px;
  }

  .page-bar-title h2 {
    font-size: 20px;
  }

  .page-bar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .page-bar-actions > *,
  .overview-select-shell,
  .page-bar-actions button,
  .page-bar-actions .link-button {
    width: 100%;
    min-width: 0;
  }

  .overview-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .overview-kpi-card {
    min-width: 0;
    padding: 13px 11px;
  }

  .overview-kpi-card strong {
    margin-top: 8px;
    font-size: 27px;
  }

  .panel,
  .home-card {
    padding: 14px;
  }

  .panel-head {
    align-items: flex-start;
    gap: 8px;
  }

  .panel-head .ghost-button {
    padding: 7px 9px;
    white-space: nowrap;
  }

  .chart-box,
  .chart-box.tall {
    height: 250px;
  }

  .table-wrap {
    width: 100%;
    max-height: 68vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 680px;
  }

  th,
  td {
    padding: 9px 10px;
  }

  .pagination {
    align-items: stretch;
  }

  .pagination-info,
  .pagination-controls {
    width: 100%;
    justify-content: center;
  }

  .dialog-backdrop {
    align-items: end;
    padding: 8px;
  }

  .dialog,
  .member-dialog,
  .import-dialog {
    max-width: none;
    max-height: 92vh;
    border-radius: 16px 16px 10px 10px;
  }

  .dialog-body {
    max-height: 72vh;
    overflow: auto;
    padding: 12px 14px;
  }

  .dialog-head {
    padding: 15px 14px 0;
  }

  .dialog-foot {
    padding: 0 14px 14px;
  }

  .member-table-wrap {
    max-height: 58vh;
  }

  .home-hero {
    padding: 18px;
  }

  .home-hero-copy h3 {
    font-size: 24px;
  }

  .home-hero-actions {
    width: 100%;
  }

  .home-hero-actions a {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .overview-kpi-grid,
  .page-bar-actions {
    grid-template-columns: 1fr;
  }

  .app-brand-logo {
    width: 26px;
    height: 26px;
  }
}

/* 部门画像表合计行：置于斑马纹之上，加粗并与明细区分 */
tbody tr.total-row td {
  font-weight: 600;
  background: var(--brand-faint);
  border-top: 1px solid var(--line-strong);
  color: var(--brand-ink);
}

/* ============================================================
   打印 / 存 PDF
   ------------------------------------------------------------
   老板常要把看板打出来开会或归档。屏幕上那些导航、筛选、下载按钮
   打印出来是噪声，这里全部隐掉，只留指标卡、图表和表格。
   ============================================================ */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  body {
    background: #fff;
  }

  /* 屏幕上才需要的东西：导航、搜索、筛选、下载/打印按钮、提示条 */
  .app-header,
  .app-sidebar,
  .workspace-tabs,
  .page-bar-actions,
  .ghost-button,
  .header-search,
  .toast-stack,
  .header-profile,
  .header-locale,
  .empty-state button {
    display: none !important;
  }

  .app-shell,
  .workspace-shell,
  .workspace-main {
    display: block;
    padding: 0;
    margin: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    background: #fff;
  }

  /* 双栏在纸上太挤，统一改单栏 */
  .overview-secondary-grid,
  .overview-main-grid,
  .overview-kpi-grid {
    display: block;
  }

  .panel {
    border: 1px solid #cbd5e6;
    box-shadow: none;
    margin-bottom: 8mm;
    /* 一张图不要被切到两页 */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Chart.js 的 canvas 在打印时需要确定高度，否则会塌成一条线 */
  .chart-box,
  .chart-box.tall {
    height: 70mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .overview-kpi-card {
    display: inline-block;
    width: 31%;
    margin: 0 1% 4mm 0;
    vertical-align: top;
    border: 1px solid #cbd5e6;
    break-inside: avoid;
  }

  .table-wrap {
    max-height: none;
    overflow: visible;
  }

  /* 表头在跨页时重复，方便对照 */
  thead {
    display: table-header-group;
  }

  /* 保住图表颜色，否则打印机默认省墨会把柱状图印成灰的 */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}