/* =============================================================
   css/components.css · 组件样式
   KPI 卡 / 结论条 / 预警条 / 表格 / 标签 / 进度 / 时间轴 / 日历
   Toast / Tabs / 抽屉 / 弹窗 / 表单 / 空态 / 搜索下拉
   铁律：状态呈现 = 色块(圆点或左竖条) + 浅底 + 文字 三元组
   依赖：variables.css
   ============================================================= */

/* =============================================================
   Toast
   ============================================================= */
.ck-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-width: 220px;
  max-width: 360px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-modal);
  font-size: var(--fs-body);
  color: var(--ink-700);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
  cursor: pointer;
}
.ck-toast.is-in { opacity: 1; transform: none; }
.ck-toast__icon { flex-shrink: 0; margin-top: 1px; }
.ck-toast__text { flex: 1 1 auto; word-break: break-word; }

.ck-toast.is-success { border-left-color: var(--green); background: var(--green-bg); color: var(--green); }
.ck-toast.is-info    { border-left-color: var(--blue-600); background: var(--blue-50); color: var(--blue-700); }
.ck-toast.is-warning { border-left-color: var(--yellow); background: var(--yellow-bg); color: var(--yellow); }
.ck-toast.is-error   { border-left-color: var(--red); background: var(--red-bg); color: var(--red); }

/* =============================================================
   Tabs
   ============================================================= */
.ck-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.ck-tabs__item {
  position: relative;
  height: 34px;
  padding: 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  border: 0;
  background: transparent;
  color: var(--ink-500);
  font-size: var(--fs-body);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.ck-tabs__item:hover { color: var(--blue-700); }
.ck-tabs__item.is-active {
  color: var(--blue-700);
  font-weight: 600;
  border-bottom-color: var(--blue-700);
}
.ck-tabs__badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--line);
  color: var(--ink-700);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* =============================================================
   Tag 标签（浅底 + 同色系文字）
   ============================================================= */
.ck-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-tag);
  font-size: var(--fs-tag);
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg);
  color: var(--ink-500);
  border: 1px solid transparent;
}
.ck-tag.is-red    { background: var(--red-bg);    color: var(--red);    border-color: var(--red-line); }
.ck-tag.is-yellow { background: var(--yellow-bg); color: var(--yellow); border-color: var(--yellow-line); }
.ck-tag.is-green  { background: var(--green-bg);  color: var(--green);  border-color: var(--green-line); }
.ck-tag.is-blue   { background: var(--blue-50);   color: var(--blue-700); border-color: var(--blue-100); }
.ck-tag.is-gray   { background: var(--bg);        color: var(--gray);   border-color: var(--line); }
.ck-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =============================================================
   KPI 卡
   ============================================================= */
.ck-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 92px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ck-kpi.is-clickable { cursor: pointer; }
.ck-kpi.is-clickable:hover { border-color: var(--blue-100); box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.ck-kpi.is-clickable:active { transform: scale(.995); }
/* 左上 3px 状态色条 */
.ck-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue-700);
}
.ck-kpi.is-red::before { background: var(--red); }
.ck-kpi.is-yellow::before { background: var(--yellow); }
.ck-kpi.is-green::before { background: var(--green); }
.ck-kpi.is-gray::before { background: var(--gray); }

.ck-kpi__title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-body);
  color: var(--ink-700);
  line-height: 1.3;
}
.ck-kpi__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--fs-kpi);
  font-weight: 700;
  color: var(--ink-900);
  font-family: var(--font-num);
  line-height: 1.1;
}
.ck-kpi.is-red .ck-kpi__value { color: var(--red); }
.ck-kpi.is-yellow .ck-kpi__value { color: var(--yellow); }
.ck-kpi.is-green .ck-kpi__value { color: var(--green); }
.ck-kpi__unit { font-size: 13px; font-weight: 500; color: var(--ink-500); font-family: var(--font); }
.ck-kpi__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--ink-500);
}
.ck-kpi__delta { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-num); }
.ck-kpi__delta.is-up { color: var(--red); }
.ck-kpi__delta.is-down { color: var(--green); }
.ck-kpi__delta.is-flat { color: var(--ink-500); }
/* 口径 tooltip */
.ck-kpi__info {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  cursor: help;
  flex-shrink: 0;
}

/* 通用 tooltip（口径/公式） */
.ck-tip { position: relative; }
.ck-tip__box {
  position: absolute;
  z-index: 50;
  left: 0;
  bottom: calc(100% + 6px);
  width: 260px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink-900);
  color: var(--white);
  font-size: var(--fs-meta);
  line-height: 1.5;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  font-family: var(--font);
  font-weight: 400;
  text-align: left;
}
.ck-tip:hover .ck-tip__box { opacity: 1; visibility: visible; }

/* =============================================================
   结论条
   ============================================================= */
.ck-conclusion {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-card);
}
.ck-conclusion__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink-900);
  flex-shrink: 0;
}
.ck-conclusion__score {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-num);
  line-height: 1;
  flex-shrink: 0;
}
.ck-conclusion__score.is-red { color: var(--red); }
.ck-conclusion__score.is-yellow { color: var(--yellow); }
.ck-conclusion__score.is-green { color: var(--green); }
.ck-conclusion__grade {
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--ink-500);
}
.ck-conclusion__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--ink-700);
}
.ck-conclusion__link { flex-shrink: 0; font-size: var(--fs-meta); }

/* =============================================================
   预警条
   ============================================================= */
.ck-warn {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--gray);
}
.ck-warn.is-red { border-left-color: var(--red); background: var(--red-bg); }
.ck-warn.is-yellow { border-left-color: var(--yellow); background: var(--yellow-bg); }
.ck-warn.is-green { border-left-color: var(--green); background: var(--green-bg); }
.ck-warn.is-gray { border-left-color: var(--gray); background: var(--bg); }

.ck-warn__main { flex: 1 1 auto; min-width: 0; }
.ck-warn__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.ck-warn__text { font-size: var(--fs-body); color: var(--ink-900); line-height: 1.45; }
.ck-warn__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
  font-size: var(--fs-meta);
  color: var(--ink-500);
}
.ck-warn__due.is-overdue { color: var(--red); font-weight: 600; }
.ck-warn__due.is-soon { color: var(--yellow); font-weight: 600; }
.ck-warn__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* =============================================================
   进度条
   ============================================================= */
.ck-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 120px;
}
.ck-progress__track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.ck-progress__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--blue-700);
  transition: width .25s ease;
}
.ck-progress__fill.is-yellow { background: var(--yellow); }
.ck-progress__fill.is-green { background: var(--green); }
.ck-progress__fill.is-red { background: var(--red); }
.ck-progress__text {
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
  font-size: var(--fs-meta);
  font-family: var(--font-num);
  color: var(--ink-500);
}

/* =============================================================
   数据表
   ============================================================= */
.ck-table-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.ck-table-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.ck-table-tools__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.ck-table-scroll { overflow-x: auto; }
.ck-table {
  width: 100%;
  font-size: var(--fs-table);
}
.ck-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  background: var(--blue-50);
  color: var(--blue-900);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.ck-table thead th.is-sortable { cursor: pointer; user-select: none; }
.ck-table thead th.is-sortable:hover { background: var(--blue-100); }
.ck-table__sort { margin-left: 4px; color: var(--ink-500); font-size: 10px; }
.ck-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-700);
  line-height: var(--lh-table);
  vertical-align: middle;
}
.ck-table tbody tr:nth-child(even) { background: var(--bg); }
.ck-table tbody tr:hover { background: var(--blue-50); }
.ck-table tbody tr.is-clickable { cursor: pointer; }
.ck-table td.is-num,
.ck-table th.is-num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ck-table td.is-actions { white-space: nowrap; }
.ck-table .is-masked { color: var(--gray); cursor: help; }

.ck-table-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  color: var(--ink-500);
}

/* =============================================================
   空态 / 无数据
   ============================================================= */
.ck-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--ink-500);
}
.ck-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
}
.ck-empty__title { font-size: var(--fs-body); color: var(--ink-700); }

/* =============================================================
   时间轴
   ============================================================= */
.ck-timeline { position: relative; padding-left: var(--sp-4); }
.ck-timeline__item {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-4);
  border-left: 2px solid var(--line);
}
.ck-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.ck-timeline__dot {
  position: absolute;
  left: -6px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray);
}
.ck-timeline__item.is-active .ck-timeline__dot { border-color: var(--blue-700); background: var(--blue-50); }
.ck-timeline__item.is-red .ck-timeline__dot { border-color: var(--red); }
.ck-timeline__item.is-green .ck-timeline__dot { border-color: var(--green); }
.ck-timeline__time { font-size: var(--fs-meta); color: var(--ink-500); font-family: var(--font-num); }
.ck-timeline__title { font-size: var(--fs-body); color: var(--ink-900); font-weight: 600; }
.ck-timeline__desc { font-size: var(--fs-meta); color: var(--ink-500); }

/* =============================================================
   月历网格
   ============================================================= */
.ck-calendar { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.ck-calendar__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.ck-calendar__week,
.ck-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.ck-calendar__week span {
  padding: 6px 0;
  text-align: center;
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--ink-500);
  background: var(--bg);
}
.ck-calendar__cell {
  position: relative;
  min-height: 62px;
  padding: 4px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.ck-calendar__cell.is-out { background: var(--bg); color: var(--gray); cursor: default; }
.ck-calendar__cell.is-today .ck-calendar__day { background: var(--blue-700); color: var(--white); border-radius: 50%; }
.ck-calendar__cell:hover { background: var(--blue-50); }
.ck-calendar__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-family: var(--font-num);
}
.ck-calendar__marks { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.ck-calendar__mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 0 4px;
  border-radius: var(--radius-tag);
  font-size: 10px;
  line-height: 15px;
  background: var(--blue-50);
  color: var(--blue-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck-calendar__mark.is-red { background: var(--red-bg); color: var(--red); }
.ck-calendar__mark.is-yellow { background: var(--yellow-bg); color: var(--yellow); }
.ck-calendar__mark.is-green { background: var(--green-bg); color: var(--green); }

/* =============================================================
   表单（抽屉内用）
   ============================================================= */
.ck-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-4); }
.ck-form__grid .ck-field--full { grid-column: 1 / -1; }
.ck-form__section {
  grid-column: 1 / -1;
  margin: var(--sp-3) 0 var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink-900);
}
.ck-form__hint { font-size: var(--fs-meta); color: var(--ink-500); margin-top: 2px; }

/* =============================================================
   全局搜索下拉（分组结果）
   ============================================================= */
.ck-search-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-2) 0;
  z-index: 60;
}
.ck-search-panel__group { padding: 0 0 var(--sp-1); }
.ck-search-panel__title {
  padding: 2px var(--sp-3);
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--ink-500);
}
.ck-search-panel__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  font-size: var(--fs-body);
  cursor: pointer;
}
.ck-search-panel__item:hover,
.ck-search-panel__item.is-active { background: var(--blue-50); }

/* =============================================================
   平台模式切换 / 分段控件
   ============================================================= */
.ck-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-btn); overflow: hidden; }
.ck-seg__item {
  height: 28px;
  padding: 0 var(--sp-3);
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-700);
  font-size: var(--fs-meta);
}
.ck-seg__item:last-child { border-right: 0; }
.ck-seg__item.is-active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }

/* =============================================================
   询问表单结果（问卷/体检）
   ============================================================= */
.ck-quiz__progress { font-size: var(--fs-meta); color: var(--ink-500); }
.ck-quiz__q { font-size: var(--fs-h3); color: var(--ink-900); margin-bottom: var(--sp-2); }
.ck-quiz__opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.ck-quiz__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.ck-quiz__opt:hover { background: var(--blue-50); border-color: var(--blue-100); }
.ck-quiz__opt.is-picked { background: var(--blue-50); border-color: var(--blue-600); }

/* =============================================================
   小徽标 / 数据引用块
   ============================================================= */
.ck-ref {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--blue-50);
  border-left: 3px solid var(--blue-700);
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
  font-size: var(--fs-meta);
  color: var(--ink-700);
}
.ck-strategy {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-tag);
  background: var(--bg);
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 600;
}