/* ==========================================================================
   FinLearn 浅色外壳 + 横向导航层
   --------------------------------------------------------------------------
   与 Tabler 官方页（preview.tabler.io）并排对比后确认的结构性差距：

     Tabler 官方                          |  本站在此之前
     -------------------------------------|--------------------------------------
     侧栏白色/极浅，视觉重量轻             |  深海军蓝侧栏，占 18.4% 画面面积
     内容区顶部有横向 pill 标签导航        |  无（只有侧栏）
     深色像素占比 0.4%                    |  18.4%
     区块间距 24px，留白充足               |  16px，偏紧
     KPI 卡纯白底 + 大号近黑数字           |  数字带底色，偏花
     小指标卡用彩色图标方块（蓝/绿/黑）     |  无

   结论：本站此前把"深色 = 高级"当成了方向，而 Tabler 的观感来自"轻、白、留白"。
   本层把外壳改为浅色，并补上横向导航与彩色图标方块。
   ========================================================================== */

/* ==========================================================================
   1. 侧栏：深色 → 浅色（关键改动）
   ========================================================================== */
.navbar-vertical {
  background: #ffffff !important;
  border-right: 1px solid #e4eaf1 !important;
  box-shadow: none;
}

/* 品牌区：浅底上的深色文字 */
.navbar-vertical .navbar-brand .fw-bold,
.navbar-vertical .navbar-brand span { color: #16202e !important; }
.navbar-vertical .navbar-brand .text-secondary { color: #6b7684 !important; }

.navbar-vertical .navbar-brand span[aria-hidden="true"],
.navbar-vertical .brand-mark {
  background: linear-gradient(145deg, #0668c9, #0554a8) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(5, 84, 168, .28) !important;
}

/* 导航项：浅底 + 中性文字 */
.navbar-vertical .nav-link {
  color: #3d4855 !important;
  font-weight: 500;
  border-radius: var(--rd-sm);
  margin: 1px var(--sp-2);
  padding: 7px var(--sp-3);
}

.navbar-vertical .nav-link:hover {
  background: #f1f5f9 !important;
  color: #16202e !important;
}

/* 当前项：主色浅底 + 主色文字（Tabler 的做法） */
.navbar-vertical .nav-link.active {
  background: #e8f1fb !important;
  color: #0554a8 !important;
  font-weight: 600;
  box-shadow: none !important;
}

.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link.active .nav-link-title { color: #0554a8 !important; }

/* 左侧指示条：浅底上仍然保留，但改为细而克制 */
.navbar-vertical .nav-link::before {
  left: 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: #0554a8;
  height: 0;
}
.navbar-vertical .nav-link:hover::before { height: 14px; }
.navbar-vertical .nav-link.active::before { height: 18px; }

.navbar-vertical .nav-link-icon { color: #6b7684; }
.navbar-vertical .nav-link:hover .nav-link-icon { color: #0554a8; }

/* 分组与底部角色卡 */
.navbar-vertical .ws-nav__group,
.navbar-vertical .mt-auto .card {
  background: #f6f8fb !important;
  border-color: #e4eaf1 !important;
}
.navbar-vertical .card .fw-medium { color: #16202e !important; }
.navbar-vertical .card .text-secondary { color: #6b7684 !important; }

/* 侧栏宽度收窄一档，给内容区更多空间 */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg { width: 232px; }
  .page-wrapper { margin-left: 232px; }
}

/* ==========================================================================
   2. 内容区背景与留白（对齐 Tabler 的宽松节奏）
   ========================================================================== */
.page-wrapper { background: #f6f8fb !important; }

.page-body { padding-block: var(--sp-6) var(--sp-10); }
.page-body > .container-xl { padding-inline: var(--sp-6); max-width: 1560px; }

@media (max-width: 1200px) {
  .page-body > .container-xl { padding-inline: var(--sp-4); }
}

/* 区块之间留出 Tabler 那样的呼吸 */
.page-body .row-cards { --tblr-gutter-x: var(--sp-5); --tblr-gutter-y: var(--sp-5); }
.page-body .section { padding-block: var(--sp-6); }
.page-body .section__head { margin-bottom: var(--sp-5); }

/* ==========================================================================
   3. 横向 pill 导航（内容区顶部的页内分区）
   ========================================================================== */
.fl-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 0 var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid #e4eaf1;
}

.fl-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--rd-full);
  color: #4a5563;
  font-size: var(--fz-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.fl-tabs__item:hover { background: #eef2f7; color: #16202e; }

.fl-tabs__item[aria-current="page"],
.fl-tabs__item.is-active {
  background: #0554a8;
  color: #fff;
  font-weight: 600;
}

.fl-tabs__item svg { width: 16px; height: 16px; opacity: .8; }

@media (max-width: 768px) {
  .fl-tabs { gap: 4px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--sp-2); }
}

/* ==========================================================================
   4. KPI 卡：纯白底 + 大号近黑数字（去掉数字底色）
   ========================================================================== */
.page-body .card,
.page-body .viz,
.page-body .stat,
.page-body .tool,
.page-body .ws-table-wrap,
.page-body .ws-nav {
  background: #ffffff;
  border: 1px solid #e4eaf1;
  border-radius: var(--rd-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.page-body .card:hover,
.page-body .viz:hover,
.page-body .stat:hover,
.page-body .tool:hover {
  border-color: #cfe0f2;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .07);
  transform: translateY(-1px);
}

/* 数值：大号 + 近黑（Tabler 的 .h1 观感） */
.page-body .stat__value,
.page-body .board-card__value,
.page-body .metric-mini__value,
.page-body .figure--hero {
  font-size: var(--fz-2xl);
  font-weight: 700;
  color: #101a26 !important;
  letter-spacing: -.025em;
}

/* 标签：小号大写字距浅灰（Tabler 的 .subheader） */
.page-body .stat__label,
.page-body .subheader,
.page-body .metric-mini__label {
  font-size: var(--fz-micro);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b7684 !important;
}

/* ==========================================================================
   5. 彩色图标方块（Tabler 的 bg-blue-lt / bg-green-lt 做法）
   ========================================================================== */
.fl-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rd-sm);
  flex: 0 0 auto;
}

.fl-icon svg { width: 18px; height: 18px; }

.fl-icon--blue   { background: #0554a8; color: #fff; }
.fl-icon--green  { background: #0f7b36; color: #fff; }
.fl-icon--amber  { background: #b26a00; color: #fff; }
.fl-icon--red    { background: #c02a2a; color: #fff; }
.fl-icon--ink    { background: #16202e; color: #fff; }
.fl-icon--cyan   { background: #0a6b78; color: #fff; }
.fl-icon--soft   { background: #e8f1fb; color: #0554a8; }

/* ==========================================================================
   6. 表格：表头更轻、行高更松、分隔更淡（Tabler 的观感）
   ========================================================================== */
.page-body table > thead > tr > th,
.page-body .ws-table thead th,
.page-body .kpi-table thead th,
.page-body .card-table thead th {
  background: #ffffff !important;
  border-bottom: 1px solid #e4eaf1 !important;
  color: #6b7684 !important;
  font-size: var(--fz-micro) !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-3) !important;
}

.page-body table > tbody > tr > td,
.page-body .ws-table td,
.page-body .kpi-table td {
  padding: 10px var(--sp-3) !important;
  border-bottom: 1px solid #eef2f7 !important;
}

.page-body .ws-table tbody tr:hover,
.page-body .kpi-table tbody tr:hover { background: #f8fbfe !important; }

/* 表格外框：Tabler 的表在卡里不带内框 */
.page-body .ws-table-wrap { border: 1px solid #e4eaf1; }
.page-body .ws-table-wrap .ws-table { border: 0; }

/* ==========================================================================
   7. 顶部操作条
   ========================================================================== */
.page-wrapper > .navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e4eaf1 !important;
  box-shadow: none !important;
  min-height: 56px;
}

/* ==========================================================================
   8. 分区带：Tabler 不用整块底色，改用留白与细线
   ========================================================================== */
.page-body .section--tinted,
.page-body .section:nth-of-type(even) {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.page-body .section + .section { border-top: 1px solid #e9eef4; }
.page-body .page-header { border-bottom: 1px solid #e4eaf1; }

/* ==========================================================================
   9. 侧栏在工作台页内的浅色化（.ws-nav 已于上方统一）
   ========================================================================== */
.page-body .ws-nav { padding: var(--sp-2); }

.page-body .ws-nav button,
.page-body .ws-nav a { color: #3d4855; padding: 7px var(--sp-3); }

.page-body .ws-nav button:hover,
.page-body .ws-nav a:hover { background: #f1f5f9; }

.page-body .ws-nav button[aria-current="true"] {
  background: #e8f1fb !important;
  color: #0554a8 !important;
  font-weight: 600;
  box-shadow: none !important;
}

.page-body .ws-nav button::before,
.page-body .ws-nav a::before { background: #0554a8; }

/* ==========================================================================
   10. 深色模式（保留对应取值）
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .navbar-vertical { background: #101822 !important; border-right-color: #22303f !important; }
  .navbar-vertical .navbar-brand .fw-bold,
  .navbar-vertical .navbar-brand span { color: #e8eef5 !important; }
  .navbar-vertical .nav-link { color: #a8b6c6 !important; }
  .navbar-vertical .nav-link.active { background: #1b2c3e !important; color: #6fb4f5 !important; }
  .page-wrapper { background: #0d1520 !important; }
  .page-body .card, .page-body .viz, .page-body .stat,
  .page-body .tool, .page-body .ws-table-wrap, .page-body .ws-nav {
    background: #16202e; border-color: #253141;
  }
  .page-body table > thead > tr > th { background: #16202e !important; border-bottom-color: #253141 !important; }
  .page-body table > tbody > tr > td { border-bottom-color: #1e2b3a !important; }
  .page-body .stat__value, .page-body .board-card__value { color: #f2f6fa !important; }
}

/* ==========================================================================
   11. 侧栏文字标签必须常显
   --------------------------------------------------------------------------
   问题：模板里图标用了 Tabler 的 d-md-none d-lg-inline-block，
        导致宽度 232px 的侧栏在 lg 断点下只显示图标、不显示文字。
   做法：强制常显，并让图标与文字水平对齐。
   ========================================================================== */
.navbar-vertical .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
}

.navbar-vertical .nav-link-icon,
.navbar-vertical .nav-link-icon.d-md-none,
.navbar-vertical .nav-link-icon.d-lg-inline-block {
  display: grid !important;
  place-items: center;
  width: 20px;
  flex: 0 0 20px;
  margin: 0;
}

.navbar-vertical .nav-link-icon svg { width: 20px; height: 20px; }

.navbar-vertical .nav-link-title {
  display: block !important;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fz-sm);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 品牌文字同样常显 */
.navbar-vertical .navbar-brand .d-none,
.navbar-vertical .navbar-brand .d-lg-block {
  display: block !important;
}

/* 侧栏整体：贴顶、导航区与品牌区分开 */
.navbar-vertical .navbar-brand { min-height: 56px; align-items: center; }
.navbar-vertical .navbar-nav { padding-top: var(--sp-2); }

/* 导航项之间保持 2px 间隔，形成清单感 */
.navbar-vertical .nav-item + .nav-item { margin-top: 2px; }

/* ==========================================================================
   12. 浅色侧栏的文字颜色：彻底覆盖早期为深色侧栏写的白字规则
   --------------------------------------------------------------------------
   实测发现 .nav-link-title 计算色是 rgb(255,255,255)（白），
   压在白色侧栏上等于隐形。来源是 polish.css 与 color-depth.css 里
   为深色侧栏写的 .navbar-vertical .nav-link-title { color: #ffffff } 等规则。

   shell-light.css 是最后加载的一层，这里用 !important + 更完整的选择器
   把侧栏内所有文字一并归位到浅底可读的深色。
   ========================================================================== */
.navbar-vertical,
.navbar-vertical *,
.navbar-vertical .nav-link,
.navbar-vertical .nav-link-title,
.navbar-vertical .nav-link span,
.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand span,
.navbar-vertical .navbar-brand .fw-bold,
.navbar-vertical .card,
.navbar-vertical .card *,
.navbar-vertical a,
.navbar-vertical a:visited {
  color: #3d4855 !important;
}

/* 当前项：主色文字 */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link.active *,
.navbar-vertical .nav-link.active .nav-link-title,
.navbar-vertical .nav-link.active .nav-link-icon {
  color: #0554a8 !important;
}

/* hover：近黑 */
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:hover * { color: #16202e !important; }

/* 图标：中灰，当前项主色 */
.navbar-vertical .nav-link-icon,
.navbar-vertical .nav-link-icon svg { color: #6b7684 !important; }
.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link.active .nav-link-icon svg { color: #0554a8 !important; }

/* 品牌主副标题 */
.navbar-vertical .navbar-brand .fw-bold { color: #16202e !important; }
.navbar-vertical .navbar-brand .text-secondary,
.navbar-vertical .navbar-brand span.text-secondary,
.navbar-vertical .text-secondary { color: #6b7684 !important; }

/* 底部角色卡：浅底卡片 */
.navbar-vertical .card {
  background: #f6f8fb !important;
  border: 1px solid #e4eaf1 !important;
}
.navbar-vertical .card .fw-medium { color: #16202e !important; }
.navbar-vertical .card .text-secondary { color: #6b7684 !important; }

/* 品牌方块保持白字（它是主色底） */
.navbar-vertical .brand-mark,
.navbar-vertical .navbar-brand span[aria-hidden=true] {
  color: #ffffff !important;
}

/* ==========================================================================
   13. 对比度收口（浅色外壳引入）
   --------------------------------------------------------------------------
   侧栏改为浅色 #f6f8fb 后，#6b7684 对它的实测对比度是 4.34:1，差 0.16 不达 AA。
   统一把侧栏/页脚的次级文字提到 #55616f（对 #f6f8fb 为 5.94:1）。
   ========================================================================== */
.navbar-vertical .navbar-brand .text-secondary,
.navbar-vertical .navbar-brand span.text-secondary,
.navbar-vertical .text-secondary,
.navbar-vertical .card .text-secondary {
  color: #55616f !important;
}

.footer .text-secondary,
.footer .small,
.page-body .small .text-secondary,
.page-body .text-secondary.small {
  color: #55616f !important;
}

/* 整体次级文字基线同步加深 */
.page-body .text-secondary,
.page-body .small { color: #55616f; }

/* ==========================================================================
   14. 横向导航选中项：主色底必须配白字
   --------------------------------------------------------------------------
   问题：color-depth.css 里「链接用主色 #04488f」的兜底规则
        把选中项的文字也染成主色，压在主色底 #0554a8 上只有 1.21:1。
   做法：用更高优先级把选中项及其子元素强制为白字。
   ========================================================================== */
.fl-tabs__item,
.fl-tabs__item:visited { color: #4a5563 !important; }

.fl-tabs__item:hover { color: #16202e !important; background: #eef2f7; }

.fl-tabs__item[aria-current=page],
.fl-tabs__item[aria-current=page]:visited,
.fl-tabs__item[aria-current=page] *,
.fl-tabs__item[aria-current=page] span,
.fl-tabs__item[aria-current=page] svg,
.fl-tabs__item.is-active,
.fl-tabs__item.is-active * {
  color: #ffffff !important;
  fill: none;
  stroke: currentColor;
}

.fl-tabs__item[aria-current=page] {
  background: #0554a8 !important;
  font-weight: 600;
}

.fl-tabs__item[aria-current=page]:hover { background: #04488f !important; }

/* 横向导航里的图标与文字对齐 */
.fl-tabs__item svg { flex: 0 0 16px; }