/* ============================================================================
   医院培训考试系统 · 设计令牌层  tokens.css
   ----------------------------------------------------------------------------
   落盘方式：只做「加法」——在页面 </head> 之前多引一行，不动原 main.css。
     <link rel="stylesheet" href="/static/tokens.css">
   回滚方式：删掉这一行即可，零风险。

   注意：原 main.css 里有 1698 处 !important，本文件刻意全部使用 .ui- 前缀的
   组件类，不复活、不覆写任何既有选择器。若某处内联/!important 样式压不住，
   请在那个点上单独加一次 !important，而不是把整个令牌层提升优先级。
   ========================================================================== */

:root {
  /* --- 颜色：唯一强调色 + 中性阶 + 三个语义色 -----------------------------
     原系统有 5 个品牌蓝 + 3 套灰阶并存，颜色不承载语义。这里收敛为
     「1 个强调色 + 1 套中性阶 + 3 个只表示状态的语义色」。 */
  --c-accent:          #0066CC;   /* Action Blue：唯一强调色，全站按钮/链接/选中态 */
  --c-accent-focus:    #0071E3;   /* 焦点外环专用，比 accent 略亮 */
  --c-accent-surface:  #E8F1FC;   /* 强调色浅底：选中行、激活导航项、进度条轨道 */
  --c-link-on-dark:    #2997FF;   /* 仅深底场景的链接色 */

  --c-ink:             #1D1D1F;   /* 正文与标题 */
  --c-ink-muted-80:    #333333;   /* 次级正文（>=17px 场景） */
  --c-ink-muted-60:    #5A5A5F;   /* ★ 小字专用：<17px 的次级文字与表头。对白 6.4:1、对羊皮纸 6.1:1 */
  --c-ink-muted-48:    #7A7A7A;   /* 仅限 >=17px 的次要文字与非文字用途；对白仅 4.3:1，写小字不合规 */

  --c-divider-soft:    #F0F0F0;   /* 表格行分隔、卡内细分隔线 */
  --c-hairline:        #E0E0E0;   /* 卡片/输入框描边 */
  --c-parchment:       #F5F5F7;   /* 页面底色、表头底色 */
  --c-pearl:           #FAFAFC;   /* 次级按钮面、下拉面 */
  --c-surface:         #FFFFFF;

  --c-success:         #157A3C;   /* 及格、已完成 */
  --c-success-surface: #E7F4EC;
  --c-danger:          #C4322B;   /* 不及格、超时、危险操作 */
  --c-danger-surface:  #FBE9E7;
  --c-warning:         #B45309;   /* 待处理、进行中 */
  --c-warning-surface: #FBF0E0;

  --c-focus-ring:      rgba(0, 113, 227, 1);
  --c-hairline-alpha:  rgba(0, 0, 0, 0.08);  /* 通栏发丝线，替代阴影划层级 */

  /* --- 字体 ---------------------------------------------------------------
     原系统声明了 DM Serif Display / Plus Jakarta Sans 却并未真正加载
     （实际回落到 -apple-system），且依赖 fonts.googleapis.com ——
     与「院内局域网无公网」的部署前提冲突。
     这里改为系统字体栈，零外链、零加载失败。 */
  --font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
             -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: "Inter", "SF Pro Text", -apple-system, "Segoe UI", sans-serif;

  /* --- 字阶：21 档收敛为 8 档，正文下限 13px ------------------------------ */
  --fs-display:       28px;  --lh-display:       1.2;   /* 页面主标题 600/−0.374 */
  --fs-tagline:       21px;  --lh-tagline:       1.25;  /* 卡片小标题 600/+0.231 */
  --fs-body-strong:   17px;  --lh-body-strong:   1.4;   /* 强调正文 600/−0.374 */
  --fs-body:          17px;  --lh-body:          1.47;  /* 正文基准 400/−0.374 */
  --fs-caption-strong:14px;  --lh-caption-strong:1.42;  /* 按钮/字段名 600/−0.224 */
  --fs-caption:       14px;  --lh-caption:       1.42;  /* 次级说明 400/−0.224 */
  --fs-body-small:    13px;  --lh-body-small:    1.45;  /* 表格正文（下限）400/−0.12 */
  --fs-fine-print:    12px;  --lh-fine-print:    1.4;   /* 仅元信息，不作正文 */

  --fw-light: 300;  --fw-regular: 400;  --fw-semi: 600;  --fw-bold: 700;
  /* 刻意不用 500：本系统字重只走 300/400/600/700 四级 */

  --ls-display:      -0.374px;
  --ls-tagline:       0.231px;
  --ls-body:         -0.374px;
  --ls-caption:      -0.224px;
  --ls-small:        -0.12px;

  /* --- 间距：基值 8 ------------------------------------------------------- */
  --sp-xxs:  4px;   --sp-xs:  8px;   --sp-sm: 12px;  --sp-md: 17px;
  --sp-lg:  24px;   --sp-xl: 32px;   --sp-xxl: 48px; --sp-tile: 80px;
  --pad-card: 24px;             /* 卡片内边距 */
  --pad-btn-x: 22px; --pad-btn-y: 11px;

  /* --- 圆角：5 内联 / 8 工具 / 11 珍珠胶囊 / 18 卡 / 全圆 CTA 与搜索 ------- */
  --r-inline: 5px;
  --r-tool:   8px;
  --r-pearl:  11px;
  --r-card:   18px;
  --r-pill:   9999px;

  /* --- 高程：全系统只有一条投影，且只给产品渲染图 ------------------------- */
  --shadow-product: 0 3px 5px 30px rgba(0, 0, 0, 0.22);
  --elevation-hairline: 0 0 0 1px var(--c-hairline-alpha);

  /* --- 动效 --------------------------------------------------------------- */
  --motion-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --press-scale: 0.95;         /* 所有可点元素按压统一 scale(0.95) */

  /* --- 触控：最小 44×44 -------------------------------------------------- */
  --hit: 44px;
  --hit-tool: 36px;            /* 工具按钮视觉高，但外层命中区仍需 44 */

  /* --- 断点（供 media query 使用，变量不能直接进 @media）----------------
     1440 / 1068 / 834 / 640 / 480；<=834 全局导航塌汉堡、侧栏收成图标轨 */
  --bp-desktop: 1440px;
  --bp-laptop:  1068px;
  --bp-tablet:   834px;
  --bp-phone:    640px;
}

/* 全局兜底：把被 11px 拖下去的最小字号拉回 13px 下限。
   若只想局部生效，删掉这段、改用 .ui-scope 包裹目标区域。 */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-ui); font-size: var(--fs-body);
       line-height: var(--lh-body); letter-spacing: var(--ls-body);
       color: var(--c-ink); background: var(--c-parchment); }

/* 数字一律等宽对齐，表格与 KPI 不跳动 */
.ui-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ========================== 组件原语 ====================================== */

/* --- 按钮 ----------------------------------------------------------------
   主 CTA / 次按钮全圆 44px；工具按钮 8px 圆角 36px 视觉高。 */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--hit); padding: var(--pad-btn-y) var(--pad-btn-x);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: var(--fw-regular) var(--fs-body) / 1 var(--font-ui);
  letter-spacing: var(--ls-body); cursor: pointer;
  transition: background-color var(--motion-fast), transform var(--motion-fast);
  -webkit-tap-highlight-color: transparent;
}
.ui-btn:active      { transform: scale(var(--press-scale)); }
.ui-btn:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }
.ui-btn[disabled]   { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.ui-btn--primary { background: var(--c-accent); color: #fff; }
.ui-btn--primary:hover:not([disabled]) { background: #0058B0; }

.ui-btn--secondary { background: transparent; color: var(--c-accent);
                     border-color: var(--c-accent); }
.ui-btn--secondary:hover:not([disabled]) { background: var(--c-accent-surface); }

.ui-btn--danger { background: transparent; color: var(--c-danger);
                  border-color: var(--c-danger); }
.ui-btn--danger:hover:not([disabled]) { background: var(--c-danger-surface); }

.ui-btn--tool { min-height: var(--hit-tool); padding: 8px 15px;
                border-radius: var(--r-tool); background: var(--c-ink); color: #fff; }

/* --- 输入 / 下拉：三类控件严格同高，横向成行不再错位 -------------------- */
.ui-input, .ui-select {
  display: flex; align-items: center; gap: var(--sp-sm);
  min-height: var(--hit); padding: 0 16px;
  border: 1px solid var(--c-hairline); border-radius: var(--r-tool);
  background: var(--c-surface); color: var(--c-ink);
  font: var(--fw-regular) var(--fs-body) / 1 var(--font-ui);
  letter-spacing: var(--ls-body); width: 100%; box-sizing: border-box;
}
.ui-input::placeholder { color: var(--c-ink-muted-48); }
.ui-input:focus, .ui-select:focus {
  outline: none; border-color: var(--c-accent-focus); box-shadow: none;
}
.ui-input--error { border-color: var(--c-danger); border-width: 2px; }
.ui-input--pill  { border-radius: var(--r-pill); padding: 0 20px; }
.ui-field-label { display: block; margin-bottom: var(--sp-xs);
                  font: var(--fw-semi) var(--fs-caption) / var(--lh-caption) var(--font-ui);
                  letter-spacing: var(--ls-caption); color: var(--c-ink); }

/* --- 开关：44×26，状态由滑块位置表达，不靠颜色单独传意 ------------------ */
.ui-switch { position: relative; width: 44px; height: 26px; flex: none;
             border-radius: var(--r-pill); background: var(--c-hairline);
             transition: background-color var(--motion-fast); cursor: pointer; }
.ui-switch::after { content: ""; position: absolute; top: 3px; left: 3px;
             width: 20px; height: 20px; border-radius: 50%; background: #fff;
             transition: transform var(--motion-fast); }
.ui-switch[aria-checked="true"] { background: var(--c-accent); }
.ui-switch[aria-checked="true"]::after { transform: translateX(18px); }

/* --- 卡片：发丝描边，不加阴影 ------------------------------------------- */
.ui-card { background: var(--c-surface); border: 1px solid var(--c-hairline);
           border-radius: var(--r-card); padding: var(--pad-card); }
.ui-card__title { font: var(--fw-semi) var(--fs-caption-strong) / var(--lh-caption-strong) var(--font-ui);
                  letter-spacing: var(--ls-caption); margin: 0 0 var(--sp-md); }

/* --- 状态徽标：同色系浅底 + 深字，颜色从不单独传意（必带文字）----------- */
.ui-badge { display: inline-flex; align-items: center; padding: 4px 10px;
            border-radius: var(--r-inline); font: var(--fw-regular) var(--fs-caption) / 1 var(--font-ui);
            letter-spacing: var(--ls-caption); white-space: nowrap; }
.ui-badge--success { background: var(--c-success-surface); color: var(--c-success); }
.ui-badge--danger  { background: var(--c-danger-surface);  color: var(--c-danger); }
.ui-badge--warning { background: var(--c-warning-surface); color: var(--c-warning); }
.ui-badge--neutral { background: var(--c-divider-soft);    color: var(--c-ink-muted-80); }
/* 难度这类「属性」用灰阶强度，不用语义色：难度不是异常 */
.ui-badge--level-1 { background: var(--c-pearl);      color: var(--c-ink-muted-60);
                     box-shadow: inset 0 0 0 1px var(--c-hairline); }
.ui-badge--level-2 { background: var(--c-divider-soft); color: var(--c-ink-muted-80); }
.ui-badge--level-3 { background: var(--c-hairline);     color: var(--c-ink); }

/* --- 表格 ----------------------------------------------------------------
   表头 #5A5A5F（对白 6.1:1）；行高 56；行分隔用发丝线，去掉四边网格。 */
.ui-table { width: 100%; border-collapse: collapse; background: var(--c-surface);
            font-size: var(--fs-body-small); letter-spacing: var(--ls-small); }
.ui-table th { height: var(--hit); padding: 0 20px; text-align: left;
               background: var(--c-parchment); color: var(--c-ink-muted-60);
               font: var(--fw-semi) var(--fs-body-small) / 1 var(--font-ui);
               white-space: nowrap; }
.ui-table td { height: 56px; padding: 0 20px; color: var(--c-ink);
               border-top: 1px solid var(--c-divider-soft); vertical-align: middle; }
.ui-table td.ui-td-muted { color: var(--c-ink-muted-60); }
.ui-table td.ui-td-num   { text-align: center; font-family: var(--font-num); }
.ui-table td.ui-td-num.is-alert { color: var(--c-danger); font-weight: var(--fw-semi); }
.ui-table__actions { white-space: nowrap; }        /* 操作列收敛为「查看 + ⋯」 */
.ui-table__action  { color: var(--c-accent); text-decoration: none; font-size: var(--fs-caption); }

/* --- 侧栏 ---------------------------------------------------------------- */
.ui-nav { display: flex; flex-direction: column; gap: var(--sp-xxs); }
.ui-nav__item { display: flex; align-items: center; gap: var(--sp-sm);
                height: var(--hit); padding: 0 var(--sp-sm); border-radius: var(--r-pearl);
                color: var(--c-ink-muted-80); font-size: 15px;
                letter-spacing: var(--ls-caption); text-decoration: none; }
.ui-nav__item[aria-current="page"] { background: var(--c-accent-surface);
                color: var(--c-accent); font-weight: var(--fw-semi); }
.ui-nav__item svg { flex: none; }

/* --- 进度条：进度是数据不是装饰，只有一种蓝 ----------------------------- */
.ui-progress { height: 6px; border-radius: 3px; background: var(--c-accent-surface);
               overflow: hidden; }
.ui-progress__fill { height: 100%; border-radius: 3px; background: var(--c-accent); }

/* ========================== 响应式 =======================================
   原系统管理端在 390px 视口下侧栏不收起、横向溢出。这是第一刀。 */
@media (max-width: 834px) {
  .ui-nav { flex-direction: row; overflow-x: auto; }
  /* 侧栏收成图标轨：仅留图标，隐藏文字，或整表塌为汉堡抽屉 */
  .ui-nav__item span { display: none; }
  .ui-table th, .ui-table td { padding: 0 12px; }
  .ui-card { padding: var(--sp-md); border-radius: var(--r-pearl); }
}

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