/* ==========================================================================
   FinLearn 精细化校准层
   --------------------------------------------------------------------------
   与 Tabler 官方（preview.tabler.io）逐项测量后得出的精确差距：

     项目            Tabler 官方                本站此前            结论
     --------------  --------------------------  -----------------  ------------------
     th 内边距       8px 12px 8px 20px          12px（全边）        垂直偏大、首列无缩进
     td 内边距       12px 12px 12px 20px        10px 12px           首列缩进不足
     按钮高度        40px                        34px                偏小
     按钮字号        14px                        13px                偏小
     卡片圆角        8px                         12px                偏大
     正文字号        14px                        13px                偏小
     正文行高        20px（1.43）                19.5px / 22.4px     不统一
     标题字距        normal                      -0.56px             加过度
     表格行高        57px                        44px                偏紧
     容器宽          1320px                      1169px              偏窄

   本层按上表逐项校准，回归 Tabler 的尺度，并保持中文可读性
   （中文正文行高略高于英文，取 1.5 而非 1.43）。
   ========================================================================== */

:root {
  /* ---------- 排版尺度（对齐 Tabler） ---------- */
  --fz-body: 14px;          /* 正文 */
  --lh-body: 21px;          /* 中文正文行高，比 Tabler 的 20px 略高 */
  --lh-tight: 20px;         /* 表格单元格 */

  --fz-h1: 20px;            /* 页级标题（Tabler h1 = 20px w600） */
  --fz-h2: 24px;            /* 区块标题 */
  --fz-h3: 16px;
  --fz-label: 12px;         /* 标签（Tabler subheader = 12px） */
  --ls-label: 0.48px;       /* 标签字距（Tabler 0.48px） */

  /* ---------- 组件尺度 ---------- */
  --rd-card: 8px;           /* 卡片圆角（Tabler 8px） */
  --rd-field: 6px;          /* 按钮/输入框圆角 */
  --btn-h: 40px;
  --btn-h-sm: 32px;
  --btn-px: var(--sp-4);    /* 16px */

  --pad-cell-y: 12px;
  --pad-cell-x: var(--sp-3);
  --pad-cell-first: var(--sp-5);   /* 首列缩进 20px */
  --pad-th-y: var(--sp-2);         /* 表头垂直 8px */
}

/* ==========================================================================
   1. 排版：回归 Tabler 的克制尺度
   ========================================================================== */
.page-body {
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

.page-body h1,
.page-body .page-title {
  font-size: var(--fz-h1);
  font-weight: var(--fw-semibold);
  line-height: 28px;
  letter-spacing: normal;
  color: #101a26;
}

.page-body h2 {
  font-size: var(--fz-h2);
  font-weight: var(--fw-semibold);
  line-height: 32px;
  letter-spacing: normal;
  color: #101a26;
}

.page-body h3 {
  font-size: var(--fz-h3);
  font-weight: var(--fw-semibold);
  line-height: 24px;
  letter-spacing: normal;
}

.page-body h4 {
  font-size: var(--fz-body);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  letter-spacing: normal;
}

/* 标题不再加负字距（Tabler 用 normal） */
.page-body h1, .page-body h2, .page-body h3, .page-body h4,
.page-body .page-title, .page-body .card-title,
.page-body .viz__title, .page-body .section__head-text h2 {
  letter-spacing: normal;
}

/* 正文 */
.page-body p,
.page-body li,
.page-body .news__text,
.page-body .tool__desc {
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

/* 标签：12px / 字距 0.48px / 字重 500（对齐 Tabler subheader） */
.page-body .subheader,
.page-body .stat__label,
.page-body .metric-mini__label,
.page-body .field__label,
.page-body .fl-stat__label {
  font-size: var(--fz-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 16px;
  color: #55616f;
}

/* 小字 */
.page-body .small,
.page-body small,
.page-body .text-secondary.small {
  font-size: 12.25px;
  line-height: 17.5px;
}

/* ==========================================================================
   2. 表格：单元格内边距与行高对齐 Tabler
   --------------------------------------------------------------------------
   Tabler 的表格首列有 20px 左缩进，其余列 12px；垂直 12px（表头 8px）。
   本站此前是全边 12px 与 10px，导致行偏紧、首列贴边。
   ========================================================================== */
.page-body table > thead > tr > th,
.page-body .ws-table thead th,
.page-body .kpi-table thead th,
.page-body .card-table thead th {
  padding: var(--pad-th-y) var(--pad-cell-x) !important;
  font-size: var(--fz-label) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-label) !important;
  line-height: 16px !important;
}

/* 首列左缩进 20px */
.page-body table > thead > tr > th:first-child,
.page-body table > tbody > tr > td:first-child,
.page-body .ws-table thead th:first-child,
.page-body .ws-table tbody td:first-child,
.page-body .kpi-table thead th:first-child,
.page-body .kpi-table tbody td:first-child {
  padding-left: var(--pad-cell-first) !important;
}

.page-body table > tbody > tr > td,
.page-body .ws-table td,
.page-body .kpi-table td,
.page-body .card-table td {
  padding: var(--pad-cell-y) var(--pad-cell-x) !important;
  font-size: var(--fz-body) !important;
  line-height: var(--lh-tight) !important;
}

/* 复选框列：不需要 20px 缩进 */
.page-body .ws-table__check,
.page-body table td.ws-table__check,
.page-body table th.ws-table__check {
  padding-left: var(--pad-cell-x) !important;
  width: 40px;
}

/* ==========================================================================
   3. 按钮：40px 高 / 14px 字 / 16px 内边距（对齐 Tabler .btn）
   ========================================================================== */
.page-body .btn {
  min-height: var(--btn-h);
  padding: 9px var(--btn-px);
  font-size: var(--fz-body);
  font-weight: var(--fw-medium);
  line-height: 20px;
  border-radius: var(--rd-field);
}

.page-body .btn-sm,
.page-body .btn--sm {
  min-height: var(--btn-h-sm);
  padding: 5px var(--sp-3);
  font-size: 13px;
  line-height: 20px;
  border-radius: var(--rd-field);
}

.page-body .btn-lg {
  min-height: 48px;
  padding: 13px var(--sp-5);
  font-size: var(--fz-h3);
}

/* 顶栏里的按钮小一档，避免顶栏被撑高 */
.page-wrapper > .navbar .btn {
  min-height: var(--btn-h-sm);
  padding: 5px var(--sp-3);
  font-size: 13px;
}

/* ==========================================================================
   4. 卡片：圆角 8px（对齐 Tabler），头/体内边距 20px
   ========================================================================== */
.page-body .card,
.page-body .viz,
.page-body .stat,
.page-body .tool,
.page-body .fl-stat,
.page-body .who__card,
.page-body .formula-card,
.page-body .board-card,
.page-body .org-node,
.page-body .panel,
.page-body .ws-table-wrap,
.page-body .ws-nav {
  border-radius: var(--rd-card);
}

.page-body .card > .card-header,
.page-body .card-header,
.page-body .viz__head {
  padding: var(--sp-5) !important;
  min-height: 0;
  border-radius: var(--rd-card) var(--rd-card) 0 0;
}

.page-body .card > .card-body,
.page-body .card-body,
.page-body .viz__body {
  padding: var(--sp-5) !important;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

.page-body .card > .card-footer,
.page-body .card-footer {
  padding: var(--sp-4) var(--sp-5) !important;
  border-radius: 0 0 var(--rd-card) var(--rd-card);
}

/* 卡片标题字号回到 16px（Tabler 的 h3 = 20px 用于页标题，卡片标题更小） */
.page-body .card-title,
.page-body .viz__title {
  font-size: var(--fz-h3);
  font-weight: var(--fw-semibold);
  line-height: 24px;
}

/* ==========================================================================
   5. 徽标：10px 字（对齐 Tabler badge）
   ========================================================================== */
.page-body .badge,
.page-body .st,
.page-body .fl-tag {
  padding: 2px var(--sp-1);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.4px;
  line-height: 16px;
  border-radius: var(--rd-field);
}

/* 表格内的状态徽标稍大，便于识别 */
.page-body .ws-table .st,
.page-body .kpi-table .st {
  font-size: 11px;
  padding: 2px var(--sp-2);
}

/* ==========================================================================
   6. 输入控件：40px 高 / 14px 字 / 6px 圆角
   ========================================================================== */
.page-body .input, .page-body .select, .page-body .textarea,
.page-body input:not([type="checkbox"]):not([type="radio"]),
.page-body select, .page-body textarea {
  min-height: var(--btn-h);
  padding: 9px var(--sp-3);
  font-size: var(--fz-body);
  line-height: 20px;
  border-radius: var(--rd-field);
}

.page-body select,
.page-body select.select { padding-right: var(--sp-6); }

.page-body .ws-toolbar .select,
.page-body .ws-toolbar .input { min-height: var(--btn-h-sm); padding: 5px var(--sp-3); font-size: 13px; }

/* ==========================================================================
   7. 数值：三档字号（避免全部 28px）
   --------------------------------------------------------------------------
   用途区分：
     · 页级主数值（数据带、hero）  28px
     · 卡片主数值（KPI 卡）        20px（Tabler 的 .h1）
     · 次级数值                    16px
   ========================================================================== */
.page-body .fl-stat__value,
.page-body .stat__value,
.page-body .board-card__value,
.page-body .metric-mini__value {
  font-size: var(--fz-h1);
  font-weight: var(--fw-semibold);
  line-height: 28px;
  letter-spacing: normal;
}

.page-body .fl-stat__value i {
  font-size: var(--fz-body);
  font-weight: var(--fw-normal);
}

/* 数据带与首屏的主数值保留大号 */
.page-body .stat-band__item dd,
.page-body .hero__stat dd,
.page-body .figure--hero {
  font-size: 32px;
  font-weight: var(--fw-semibold);
  line-height: 38px;
  letter-spacing: normal;
}

/* ==========================================================================
   8. 容器宽度：给内容区更多空间
   ========================================================================== */
.page-body > .container-xl {
  max-width: 1440px;
  padding-inline: var(--sp-5);
}

@media (min-width: 1500px) {
  .page-body > .container-xl { max-width: 1560px; }
}

/* 侧栏再收窄一点，把宽度让给内容 */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg { width: 224px; }
  .page-wrapper { margin-left: 224px; }
}

/* ==========================================================================
   9. 间距节奏：与 Tabler 的 20px 基准一致
   ========================================================================== */
.page-body .row-cards { --tblr-gutter-x: var(--sp-5); --tblr-gutter-y: var(--sp-5); }
.page-body .section { padding-block: var(--sp-5); }
.page-body .section__head { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); }

.page-body .fl-tabs { padding-bottom: var(--sp-2); margin-bottom: var(--sp-5); }

/* 卡片之间的垂直间距 */
.page-body .row-cards + .row-cards { margin-top: 0; }

/* ==========================================================================
   10. 阴影：Tabler 用极轻阴影 + 描边
   ========================================================================== */
.page-body .card,
.page-body .fl-stat,
.page-body .viz,
.page-body .stat,
.page-body .tool,
.page-body .ws-table-wrap,
.page-body .ws-nav {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  border: 1px solid #e4eaf1;
}

.page-body .card:hover,
.page-body .fl-stat:hover,
.page-body .viz:hover,
.page-body .tool:hover {
  box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}

/* ==========================================================================
   11. 中文观感细节
   ========================================================================== */
/* 中文标题不使用负字距；数字用等宽并收紧 */
.page-body .num,
.page-body .ws-table__amount,
.page-body .ws-table__id {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 中英混排时给西文留出光学间距 */
.page-body .card-title,
.page-body .section__head-text h2 { text-wrap: balance; }

/* 表格里的长文本不换行挤压 */
.page-body .ws-table td { white-space: nowrap; }
.page-body .ws-table td:last-child { white-space: nowrap; }

/* ==========================================================================
   12. 深色模式同步
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .page-body h1, .page-body h2, .page-body h3, .page-body h4 { color: #f2f6fa; }
  .page-body .card, .page-body .fl-stat, .page-body .viz,
  .page-body .stat, .page-body .tool, .page-body .ws-table-wrap {
    border-color: #253141;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

/* ==========================================================================
   13. 收尾：残余三项校准（复测后仍与 Tabler 不一致）
   --------------------------------------------------------------------------
   复测结果：
     · 卡片圆角仍是 12px（目标 8px）
     · 徽标 11px / h23（目标 10px / h16）
     · 页头 h2 仍 28px（目标 24px）
   原因：更早的层（shell-light / color-depth / polish）选择器更具体，
        这里是最后一层，用同等或更高的选择器 + !important 收口。
   ========================================================================== */

/* (1) 卡片圆角统一 8px */
.page-body .card,
.page-body .card.card-sm,
.page-body .viz,
.page-body .stat,
.page-body .tool,
.page-body .fl-stat,
.page-body .panel,
.page-body .who__card,
.page-body .formula-card,
.page-body .board-card,
.page-body .org-node,
.page-body .ws-table-wrap,
.page-body .ws-nav,
.page-body .table-wrap {
  border-radius: 8px !important;
}

.page-body .card > .card-header,
.page-body .card-header { border-radius: 8px 8px 0 0 !important; }
.page-body .card > .card-footer { border-radius: 0 0 8px 8px !important; }
.page-body .card > .card-body:only-child { border-radius: 8px !important; }

/* 内部小卡（如 bg-dark-lt 的角色卡）用更小圆角 */
.page-body .card .card { border-radius: 6px !important; }

/* (2) 徽标 10px / 行高 16px */
.page-body .badge,
.page-body .badge.bg-green-lt,
.page-body .badge.bg-blue-lt,
.page-body .badge.bg-red-lt,
.page-body .badge.bg-yellow-lt,
.page-body .badge.bg-purple-lt,
.page-body .fl-tag {
  font-size: 10px !important;
  line-height: 16px !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  letter-spacing: 0.4px !important;
}

/* 表格内状态徽标保留 11px，保证可读 */
.page-body .ws-table .st,
.page-body .kpi-table .st,
.page-body .st {
  font-size: 11px !important;
  line-height: 16px !important;
  padding: 2px 8px !important;
}

/* (3) 页头与区块标题字号 */
.page-body .page-header .page-title,
.page-body .page-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: normal !important;
}

.page-body .section__head-text h2,
.page-body .section__head h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  letter-spacing: normal !important;
}

/* 卡片头高度回到 Tabler 的 20px 内边距，不额外撑高 */
.page-body .card > .card-header,
.page-body .card-header {
  padding: 20px !important;
  min-height: 0 !important;
}

/* ==========================================================================
   14. 栅格槽宽收口
   --------------------------------------------------------------------------
   复测发现卡片列（.col-sm-6 / .col-lg-3）的左右内边距仍是 10px，
   即半槽 10px（全槽 20px）未被应用。Tabler 用 20px 全槽，即半槽 10px —— 
   这与 Tabler 一致，但此前 --tblr-gutter-x 被多层覆盖，需要固定下来。

   同时统一 row-cards 与普通 row 的槽宽，避免两种节奏并存。
   ========================================================================== */
.page-body .row,
.page-body .row-cards,
.page-body .row-deck {
  --tblr-gutter-x: 20px;
  --tblr-gutter-y: 20px;
}

/* Bootstrap 的列间距基于 gutter 变量，这里显式给出半槽值兜底 */
.page-body .row > [class*=col],
.page-body .row-cards > [class*=col],
.page-body .row-deck > [class*=col] {
  padding-left: 10px;
  padding-right: 10px;
}

/* 行本身抵消半槽，保证容器左右对齐 */
.page-body .row,
.page-body .row-cards,
.page-body .row-deck {
  margin-left: -10px;
  margin-right: -10px;
}

/* 卡片组之间的垂直间距与 Tabler 一致 */
.page-body .row-cards + .row-cards { margin-top: 0; }
.page-body .row-cards { margin-bottom: 20px; }
.page-body .row-cards:last-child { margin-bottom: 0; }