/* ==========================================================================
   FinLearn 视觉精修层 v1
   --------------------------------------------------------------------------
   目标：把"能用"提升到"精致"。原则（对齐 Tabler / shadcn / Vercel 三家共识）：
     1. 主色只出现在「可操作」与「当前状态」，不做装饰铺色
     2. 层次靠「细描边 + 极轻阴影 + 留白」三层叠加，不用重投影
     3. 数字一律等宽对齐；标签一律小号大写字距
     4. 卡片要有统一的头/体/脚节奏，hover 有克制的反馈
     5. 圆角、间距、阴影全部走固定档位，不出现随机值
   ========================================================================== */

/* ============================ 1. 版心与留白节奏 ============================ */
.page-body .container-xl {
  max-width: 1600px;
  padding-inline: 1.5rem;
}

@media (max-width: 992px) {
  .page-body .container-xl { padding-inline: 1rem; }
}

/* 内容区垂直节奏：Tabler 默认偏紧，这里给区块之间统一的呼吸感 */
.page-body > .container-xl > * + * { margin-top: 1rem; }

/* ============================ 2. 排版：建立更清晰的层级 ============================ */
:root {
  /* 中文界面下标题用更紧凑的字距，正文保持可读行高 */
  --fl-heading-tracking: -0.02em;
  --fl-label-tracking: 0.04em;
}

.page-body h1,
.page-body h2,
.page-body h3,
.viz__title,
.card__title,
.tool__title,
.tri__title,
.who__name,
.board-card__value,
.figure--hero {
  letter-spacing: var(--fl-heading-tracking);
}

/* 页头：Tabler 的 page-title 加大一档，形成明确的第一层级 */
.page-body .page-head h1,
.page-body h1.page-title,
.page-body .page-header .page-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}

/* 标签类：小号 + 大写字距，视觉上"退到后面" */
.stat__label,
.subheader,
.field__label,
.viz__source,
.viz__subtitle,
.metric-mini__label,
.stat-band__item dt {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--fl-label-tracking);
  text-transform: uppercase;
  color: var(--tblr-secondary, #6c7a91);
}

/* ============================ 3. 卡片：三层层次叠加 ============================ */
.card,
.viz,
.stat,
.panel,
.org-node,
.board-card,
.tool,
.tri__col,
.who__card,
.formula-card,
.loop,
.ws-nav,
.ws-table-wrap,
.table-wrap {
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: .75rem;                 /* 统一 12px，比 Tabler 默认更柔 */
  background: var(--tblr-card-bg, #ffffff);
  box-shadow:
    0 1px 1px rgba(16, 24, 40, .03),
    0 1px 3px rgba(16, 24, 40, .04);      /* 极轻双层，比单层更"稳" */
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* 可交互卡片：hover 抬起 1px + 加深描边，反馈明确但不喧哗 */
.card:hover,
.viz:hover,
.stat:hover,
.tool:hover,
.tri__col:hover,
.who__card:hover,
.board-card:hover {
  border-color: color-mix(in srgb, var(--tblr-primary, #066fd1) 26%, var(--tblr-border-color, #e6e7e9));
  box-shadow:
    0 2px 4px rgba(16, 24, 40, .05),
    0 8px 20px -6px rgba(16, 24, 40, .10);
  transform: translateY(-1px);
}

/* 卡片头：去掉整块灰底，改为「只留上下细线」，更清爽 */
.viz__head,
.card__head,
.panel__head {
  padding: .625rem .875rem;
  background: transparent;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: .75rem .75rem 0 0;
}

/* 卡片体：内边距统一，保证多卡并排时内容基线对齐 */
.viz__body,
.card__body,
.panel__body { padding: .875rem; }

/* ============================ 4. 数值：建立"数据感" ============================ */
.stat__value,
.board-card__value,
.figure--hero,
.hero__stat dd,
.stat-band__item dd,
.metric-mini__value {
  font-family: var(--tblr-font-monospace, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tblr-body-color, #1b2434);
  line-height: 1.05;
}

/* 单位跟随数字，小一号并降级颜色 —— 避免"数字+单位"挤在一起 */
.figure__unit,
.hero__stat-unit,
.board-card__unit,
.stat-band__item dd i {
  font-family: var(--tblr-font-sans-serif, system-ui, sans-serif);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tblr-secondary, #6c7a91);
  margin-left: .25rem;
}

/* ============================ 5. 徽标：紧凑、有底色、有边界 ============================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .5rem;
  border-radius: .375rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  border: 1px solid transparent;
}

.badge--accent, .badge--gold, .badge--info {
  background: var(--tblr-primary-lt, #e9f0fb);
  border-color: color-mix(in srgb, var(--tblr-primary, #066fd1) 18%, transparent);
  color: var(--tblr-primary, #066fd1);
}

.badge--success { background: var(--tblr-green-lt, #e7f6ea); border-color: #bfe6c8; color: #1a7f37; }
.badge--warning { background: var(--tblr-yellow-lt, #fdf5e6); border-color: #f3ddb0; color: #9a6700; }
.badge--danger  { background: var(--tblr-red-lt, #fbeaea); border-color: #f5c2c2; color: #b42318; }
.badge--outline { background: transparent; border-color: var(--tblr-border-color, #e6e7e9); color: var(--tblr-secondary, #6c7a91); }

/* 时效徽标（工作台表格里的小胶囊）：等宽数字 + 状态底色 */
.st {
  padding: .125rem .4375rem;
  border-radius: .3125rem;
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}

.st--info    { background: #f0f4f8; border-color: #dbe3ec; color: #4b5b6e; }
.st--success { background: #e7f6ea; border-color: #bfe6c8; color: #1a7f37; }
.st--warning { background: #fdf5e6; border-color: #f3ddb0; color: #9a6700; }
.st--danger  { background: #fbeaea; border-color: #f5c2c2; color: #b42318; }

/* ============================ 6. 表格：数据密度与可读性 ============================ */
.ws-table,
.kpi-table {
  font-size: .8125rem;
  border-collapse: separate;
  border-spacing: 0;
}

.ws-table thead th,
.kpi-table thead th {
  padding: .5rem .75rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--fl-label-tracking);
  text-transform: uppercase;
  color: var(--tblr-secondary, #6c7a91);
}

.ws-table td,
.kpi-table td {
  padding: .5625rem .75rem;
  border-bottom: 1px solid #f1f4f8;
  vertical-align: middle;
}

.ws-table tbody tr:hover,
.kpi-table tbody tr:hover { background: #f8fafc; }

/* 单据号用主色 + 等宽：一眼能定位 */
.ws-table__id {
  font-family: var(--tblr-font-monospace, ui-monospace, monospace);
  font-size: .75rem;
  font-weight: 600;
  color: var(--tblr-primary, #066fd1);
  letter-spacing: -.01em;
}

/* 金额：等宽右对齐 + 稍重字重 */
.ws-table__amount {
  font-family: var(--tblr-font-monospace, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

/* 行内操作链接：主色可点，hover 下划线 */
.ws-table__link {
  color: var(--tblr-primary, #066fd1);
  font-size: .75rem;
  font-weight: 500;
  text-decoration: none;
}
.ws-table__link:hover { text-decoration: underline; }

/* ============================ 7. 按钮：主次分明 ============================ */
.btn {
  border-radius: .5rem;
  font-weight: 600;
  font-size: .8125rem;
  min-height: 2.125rem;
  padding: .25rem .75rem;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.btn:active { transform: translateY(1px); }

/* 主按钮：实心主色 + 极轻投影，hover 加深 */
.btn--primary {
  background: var(--tblr-primary, #066fd1);
  border-color: var(--tblr-primary, #066fd1);
  color: #fff;
  box-shadow: 0 1px 2px rgba(6, 111, 209, .28);
}
.btn--primary:hover {
  background: #0559a8;
  border-color: #0559a8;
  box-shadow: 0 2px 6px rgba(6, 111, 209, .34);
}

.btn--outline {
  background: #fff;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  color: var(--tblr-body-color, #1b2434);
}
.btn--outline:hover {
  border-color: var(--tblr-primary, #066fd1);
  color: var(--tblr-primary, #066fd1);
  background: var(--tblr-primary-lt, #e9f0fb);
}

.btn--ghost { border-color: transparent; background: transparent; color: var(--tblr-primary, #066fd1); }
.btn--ghost:hover { background: var(--tblr-primary-lt, #e9f0fb); }

.btn--sm { min-height: 1.75rem; padding: .125rem .5rem; font-size: .75rem; border-radius: .375rem; }

/* ============================ 8. 表单控件 ============================ */
.input, .select, .textarea, input[type="search"], input[type="text"], input[type="number"] {
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: .5rem;
  background: #fff;
  font-size: .8125rem;
  min-height: 2.125rem;
  padding: .25rem .625rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:hover, .select:hover, input[type="search"]:hover, input[type="text"]:hover { border-color: #cfd6de; }
.input:focus, .select:focus, .textarea:focus,
input[type="search"]:focus, input[type="text"]:focus, input[type="number"]:focus {
  outline: none;
  border-color: var(--tblr-primary, #066fd1);
  box-shadow: 0 0 0 3px rgba(6, 111, 209, .14);
}

/* ============================ 9. 进度与条形 ============================ */
.progress, .sla-bar, .composition__bar, .compare__track, .rank-row__track {
  background: #eef2f6;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar, .sla-bar__fill {
  background: linear-gradient(90deg, #066fd1, #2f8fe8);
  border-radius: 999px;
}

/* ============================ 10. 侧栏与顶栏：专业后台的"门面" ============================ */
.navbar-vertical {
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.navbar-vertical .nav-link {
  border-radius: .5rem;
  margin: 1px .5rem;
  padding: .5rem .625rem;
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  transition: background-color .16s ease, color .16s ease;
}

.navbar-vertical .nav-link:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.navbar-vertical .nav-link.active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--tblr-primary, #066fd1);
}

.navbar-vertical .nav-link-title { letter-spacing: .01em; }

/* 顶栏：白色 + 细底线，操作区右对齐 */
.page-wrapper > .navbar {
  background: #fff;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  min-height: 3.5rem;
}

/* ============================ 11. 页脚 ============================ */
.footer {
  border-top: 1px solid var(--tblr-border-color, #e6e7e9);
  margin-top: 1.5rem;
  padding-block: 1.25rem;
  font-size: .75rem;
}

/* ============================ 12. 空态与提示条 ============================ */
.callout {
  border-radius: .625rem;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  padding: .75rem .875rem;
  font-size: .8125rem;
}
.callout--info {
  background: var(--tblr-primary-lt, #e9f0fb);
  border-color: color-mix(in srgb, var(--tblr-primary, #066fd1) 20%, transparent);
}

/* 教学要点条：左侧主色细条 + 极浅底 */
.viz__insight {
  margin: 0 .875rem .875rem;
  padding: .625rem .875rem;
  border-left: 3px solid var(--tblr-primary, #066fd1);
  border-radius: .375rem;
  background: #f6f9fd;
  font-size: .8125rem;
  line-height: 1.6;
}

/* ============================ 13. 深色模式 ============================ */
@media (prefers-color-scheme: dark) {
  .card, .viz, .stat, .panel, .org-node, .board-card, .tool, .tri__col,
  .who__card, .formula-card, .loop, .ws-nav, .ws-table-wrap, .table-wrap {
    background: #1a1f26;
    border-color: #2b3138;
  }
  .ws-table thead th, .kpi-table thead th { background: #20262e; }
  .ws-table td, .kpi-table td { border-bottom-color: #262c34; }
  .viz__insight { background: #16202c; }
}

/* ============================ 14. 分页控件 ============================ */
.ws-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .625rem .875rem;
  border-top: 1px solid var(--tblr-border-color, #e6e7e9);
  background: #fff;
  font-size: .75rem;
  color: var(--tblr-secondary, #6c7a91);
}

.ws-pager__info { margin-right: auto; }

.ws-pager__list { display: inline-flex; align-items: center; gap: .25rem; }

.ws-pager__btn {
  min-width: 1.875rem;
  height: 1.875rem;
  padding: 0 .5rem;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: .375rem;
  background: #fff;
  color: var(--tblr-body-color, #1b2434);
  font-size: .75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ws-pager__btn:hover:not(:disabled) {
  border-color: var(--tblr-primary, #066fd1);
  color: var(--tblr-primary, #066fd1);
  background: var(--tblr-primary-lt, #e9f0fb);
}

.ws-pager__btn:disabled { opacity: .42; cursor: not-allowed; }

.ws-pager__btn--on {
  border-color: var(--tblr-primary, #066fd1);
  background: var(--tblr-primary, #066fd1);
  color: #fff;
  font-weight: 600;
}

.ws-pager__gap { padding: 0 .25rem; color: #b6bfc9; }

.ws-pager__size { display: inline-flex; align-items: center; gap: .375rem; }

.ws-pager__select {
  min-height: 1.875rem;
  padding: .125rem 1.5rem .125rem .5rem;
  font-size: .75rem;
  border-radius: .375rem;
}

/* 表格容器：分页在容器内，不随表格滚动 */
.ws-table-wrap { display: flex; flex-direction: column; }
.ws-table-wrap > .ws-table { flex: 1 1 auto; }

/* ============================ 15. 对比度修正 ============================ */
/* axe 实测 .tri__more 用 #8e8e8e 对白底只有 3.27:1，不达 AA。
   统一把「次级文字类」的灰提到 #5c6672（白底 5.74:1）。 */
.tri__more,
.tri__more:visited,
.ws-pager__info,
.viz__subtitle,
.viz__source,
.stat__hint,
.stat__label,
.metric-mini__label,
.card__meta,
.field__label,
.small,
.muted,
.subtle {
  color: #5c6672;
}

/* 页脚与元信息也一并提亮，避免浅灰文字 */
.site-footer__legal,
.footer .text-secondary,
.page-head__meta {
  color: #5c6672;
}

/* Tabler 的 .text-secondary 在测试里被判定偏浅，局部覆盖为达标的灰 */
.page-body .text-secondary { color: #5c6672; }

/* ==========================================================================
   16. 深色侧栏内的文字对比度（axe 实测 2.37:1，一票否决）
   --------------------------------------------------------------------------
   根因：侧栏品牌区的 .fw-bold 继承了本站品牌紫 #533afd，
        压在深色侧栏 #1f2937 上只有 2.37:1，远低于 AA 的 4.5:1。
   做法：深色侧栏内一律用浅色文字，禁止任何深色/彩色文字继承。
   ========================================================================== */
.navbar-vertical,
.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand *,
.navbar-vertical .fw-bold,
.navbar-vertical .fw-semibold,
.navbar-vertical .nav-link,
.navbar-vertical .nav-link-title {
  color: #ffffff;
}

/* 品牌副标题与图标：略降亮度但仍然达标 */
.navbar-vertical .navbar-brand .text-secondary,
.navbar-vertical .text-secondary {
  color: rgba(255, 255, 255, .72) !important;
}

.navbar-vertical .nav-link { color: rgba(255, 255, 255, .82); }
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link.active { color: #ffffff; }

/* 侧栏内任何链接都不使用品牌紫（深底上不可读） */
.navbar-vertical a:not(.nav-link),
.navbar-vertical a:not(.nav-link):visited {
  color: #ffffff;
}

/* 侧栏底部角色卡：深底上不能用浅底卡片 */
.navbar-vertical .card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}
.navbar-vertical .card .fw-medium { color: #ffffff; }

/* ==========================================================================
   17. Tabler 浅底徽标的文字加深（axe 实测 bg-green-lt 只有 2.48:1）
   ========================================================================== */
.bg-green-lt  { background: #e7f6ea !important; color: #14682f !important; }
.bg-red-lt    { background: #fbeaea !important; color: #96181d !important; }
.bg-yellow-lt { background: #fdf5e6 !important; color: #7a5200 !important; }
.bg-blue-lt   { background: #e9f0fb !important; color: #0a4f96 !important; }
.bg-purple-lt { background: #f3ecfd !important; color: #5b21b6 !important; }
.bg-cyan-lt   { background: #e6f6f8 !important; color: #0a5c66 !important; }
.bg-orange-lt { background: #fdf0e3 !important; color: #8a4b06 !important; }

/* chip / segmented 未选中态：文字用达标的灰 */
.chip,
.segmented button,
.segmented__btn,
button[data-kind],
button[data-theme-chip] {
  color: #4a5462;
}

.chip:hover,
button[data-kind]:hover,
button[data-theme-chip]:hover { color: var(--tblr-body-color, #1b2434); }

.chip__count { color: #5c6672; }

/* 状态文本类 */
#caseCount, #quizCount, #kbCoverage, #videoCount,
[role="status"], .section__note, .page-head__meta, .stat__hint { color: #5c6672; }

/* ==========================================================================
   18. 主色在浅底上的对比度（axe 实测 4.36:1，差 0.14 不达 AA）
   --------------------------------------------------------------------------
   做法：浅底徽标/标签里的文字用加深版主色 #055bb0（浅蓝底 5.86:1），
        实心按钮仍用原主色 #066fd1（白字 5.00:1，本来就达标）。
   ========================================================================== */
.badge--accent,
.badge--gold,
.badge--info {
  background: #e6f1fa !important;
  border-color: #c2ddf3 !important;
  color: #055bb0 !important;
}

/* Tabler 浅蓝底徽标与 chip 计数 */
.bg-blue-lt { background: #e6f1fa !important; color: #055bb0 !important; }

/* 侧栏当前项、进度文字等主色文字 */
.ws-nav button[aria-current="true"] { color: #055bb0; }
#progressText, #usageProgress, .progress-text { color: #055bb0 !important; }

/* 警告色加深 */
.badge--warning { color: #7a5200 !important; background: #fdf5e6 !important; border-color: #f3ddb0 !important; }

/* ==========================================================================
   19. 时效徽标警告色加深（axe 实测 st--warning 4.49:1，差 0.01）
   ========================================================================== */
.st--warning { background: #fdf5e6 !important; border-color: #ecd9ae !important; color: #7a5200 !important; }
.st--success { background: #e7f6ea !important; border-color: #bfe6c8 !important; color: #14682f !important; }
.st--danger  { background: #fbeaea !important; border-color: #f5c2c2 !important; color: #96181d !important; }
.st--info    { background: #f0f4f8 !important; border-color: #dbe3ec !important; color: #43536a !important; }