/* =============================================================
   css/polish.css · 商用化视觉升级层（[POLISH]）
   -------------------------------------------------------------
   定位：只做"质感与层级"的覆盖，不重写既有选择器语义、不改 DOM。
   加载顺序：variables → base → layout → components → views → polish → print
   （polish 排在 views 之后，故天然可覆盖；print 保持最后，打印不受影响）

   纪律（沿用 [LOGIN-V2] 覆盖层先例）：
     · 一切颜色/圆角/阴影/字号取自 variables.css，禁止散落魔法数；
       本文件只引用 token，唯一例外是深色面板内的半透明白（无 token 可用）。
     · 只动视觉属性（background/border/box-shadow/transform/opacity/color/
       font-size），不动布局尺寸（width/height/margin/padding）——
       凡涉及布局的均已在 variables.css 用 token 表达。
     · 尊重 prefers-reduced-motion。
     · 打印场景全部还原为无装饰（见文件末尾 @media print）。
   ============================================================= */


/* =============================================================
   1. P0 布局缺陷修复：登录页顶栏未隐藏
   -------------------------------------------------------------
   实测（2026-09-28，8123 端口截图）：登录页顶部露出一条 ~56px 的
   空白带，即 .ck-topbar 仍然渲染。既有 .is-login 规则只重置了
   .ck-body / .ck-content，未覆盖顶栏 —— 登录页既无导航也无业务
   操作，顶栏纯属干扰，必须隐藏。
   ============================================================= */
.ck-app.is-login .ck-topbar { display: none; }

/* 顶栏隐藏后，还须把 .ck-body 为 fixed 顶栏腾出的 padding-top 一并归零
   （layout.css:222 `.ck-body { padding-top: var(--topbar-h) }`）。
   实测（2026-09-28）：只隐藏顶栏不归零 padding，登录页顶部仍留 60px 空白带
   —— .ck-content getBoundingClientRect().top === 60，深色品牌面被整体压下。 */
.ck-app.is-login .ck-body { padding-top: 0; }


/* =============================================================
   2. 顶栏：从"贴边白条"到"悬浮工具条"
   ============================================================= */
.ck-topbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset,
              0 2px 10px rgba(15, 23, 42, .05);
}

/* 品牌徽标：纯色块 → 品牌渐变，增强识别度 */
.ck-topbar__logo {
  background: var(--brand-grad);
  box-shadow: 0 2px 6px rgba(29, 78, 216, .32),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* 图标按钮：hover 有形，不再是"隐形热区" */
.ck-icon-btn {
  transition: background-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .1s ease;
}
.ck-icon-btn:hover {
  background: var(--blue-50);
  color: var(--blue-700);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.ck-icon-btn:active { transform: scale(.94); }


/* =============================================================
   3. 侧导航：深色化（[POLISH-2]）
   -------------------------------------------------------------
   原为白底窄图标栏，与右侧内容区同为白色，整屏缺"骨架"。
   改为深色导航条——企业级 SaaS（阿里云控制台 / Ant Design Pro /
   Salesforce）的标准做法：白顶栏 + 深色侧栏，一眼分出"导航"与
   "工作面"，是全站最省成本的一次大气度提升。
   深色值不引入新 token（本项目 token 清单无深色板）：
   仅在 .ck-nav 作用域内定义局部变量，避免污染全局清单。
   ============================================================= */
.ck-nav {
  --nav-ink: rgba(203, 213, 225, .82);   /* 未激活文字/图标 */
  --nav-ink-strong: #ffffff;             /* 激活文字 */
  --nav-hover-bg: rgba(59, 130, 246, .16);
  --nav-divider: rgba(148, 163, 184, .22);
  background: linear-gradient(180deg, #101c36 0%, #0d1730 100%);
  border-right: 1px solid rgba(15, 23, 42, .55);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .04);
  scrollbar-color: rgba(148, 163, 184, .35) transparent;
}
.ck-nav::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .35);
  background-clip: content-box;
}
.ck-nav::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .55); background-clip: content-box; }

.ck-nav__group-title {
  color: rgba(148, 163, 184, .72);
  letter-spacing: .8px;
}

.ck-nav__item {
  color: var(--nav-ink);
  border-radius: var(--radius-btn);
}
.ck-nav__item:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-ink-strong);
}

/* 激活态：亮蓝实底而非渐变——深色底上渐变会"糊"，纯亮蓝才跳得出来 */
.ck-nav__item.is-active {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: var(--nav-ink-strong);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .40),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* 深色底下不需要左侧指示条（实底已足够），去掉避免视觉噪音 */
.ck-nav__item.is-active::after { display: none; }

/* 折叠态的分组分隔线：白底用的 --line 在深色底上不可见，改深色分隔 */
.ck-app.is-nav-collapsed .ck-nav__group-title {
  background: var(--nav-divider);
}


/* =============================================================
   4. 卡片：柔和描边 + 真实阴影 + 悬浮反馈
   -------------------------------------------------------------
   原卡片的 --shadow-card 仅 1px 位移阴影，视觉上与"无边框白块"
   无异，是"显得平"的主因。
   ============================================================= */
.ck-card {
  border-color: rgba(226, 232, 240, .9);
  box-shadow: var(--shadow-1);
  transition: box-shadow .18s cubic-bezier(.16, 1, .3, 1),
              border-color .18s ease,
              transform .18s cubic-bezier(.16, 1, .3, 1);
}
.ck-card:hover {
  border-color: var(--blue-100);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.ck-card__hd { border-bottom-color: rgba(226, 232, 240, .8); }
.ck-card__ft { border-top-color: rgba(226, 232, 240, .8); }

.ck-panel {
  border-color: rgba(226, 232, 240, .9);
  box-shadow: var(--shadow-1);
}


/* =============================================================
   5. KPI 卡：数据是驾驶舱的主角，给它应有的视觉权重
   ============================================================= */
.ck-kpi {
  border-color: rgba(226, 232, 240, .9);
  box-shadow: var(--shadow-1);
}
/* 左侧状态条：纯色 3px → 同色渐变 4px，更醒目但不喧宾 */
.ck-kpi::before {
  width: 4px;
  background: linear-gradient(180deg, var(--blue-600), var(--blue-900));
}
.ck-kpi.is-red::before    { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.ck-kpi.is-yellow::before { background: linear-gradient(180deg, #f59e0b, #b45309); }
.ck-kpi.is-green::before  { background: linear-gradient(180deg, #10b981, #047857); }
.ck-kpi.is-gray::before   { background: linear-gradient(180deg, #cbd5e1, #94a3b8); }

/* 数值：主视觉，放大 + 收紧字距 */
.ck-kpi__value { letter-spacing: -.5px; }

/* 悬浮：整体上浮 + 阴影升级（与 base.css 的 .ck-kpi-card:hover 叠加为正反馈） */
.ck-kpi.is-clickable:hover {
  border-color: var(--blue-100);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}


/* =============================================================
   6. 按钮：主按钮给"可以点"的自信
   ============================================================= */
.ck-btn {
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .1s ease;
}
.ck-btn--primary {
  background: var(--brand-grad);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(29, 78, 216, .30),
              inset 0 1px 0 rgba(255, 255, 255, .20);
}
.ck-btn--primary:hover {
  background: var(--brand-grad);
  box-shadow: 0 4px 12px rgba(29, 78, 216, .34),
              inset 0 1px 0 rgba(255, 255, 255, .20);
  transform: translateY(-1px);
  color: var(--white);
}
.ck-btn--primary:active { transform: translateY(0); }

/* 次级按钮 hover 轻描边，避免与主按钮抢戏 */
.ck-btn:hover { box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }


/* =============================================================
   7. 输入控件：聚焦态加深深蓝光晕，操作位置一眼可见
   ============================================================= */
.ck-input:focus,
.ck-select:focus,
.ck-textarea:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}


/* =============================================================
   8. 表格：降低线条噪音，突出数据本身
   ============================================================= */
.ck-table thead th {
  background: var(--blue-25);
  border-bottom: 1px solid var(--blue-100);
  font-weight: 600;
}
.ck-table thead th.is-sortable:hover { background: var(--blue-50); }
.ck-table tbody tr { transition: background-color .12s ease; }
.ck-table tbody tr:hover { background: var(--blue-25); }


/* =============================================================
   9. 徽标 / 标签：微投影，脱离"贴纸感"
   ============================================================= */
.ck-tag { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }


/* =============================================================
   10. 登录页：整页是产品门面，给到最高完成度
   ============================================================= */

/* 左栏：加深品牌纵深 + 双光斑，网格纹理保留 */
.ck-login__story {
  background:
    radial-gradient(1080px 560px at 6% -14%, rgba(96, 165, 250, .40), transparent 62%),
    radial-gradient(760px 460px at 114% 118%, rgba(56, 189, 248, .26), transparent 60%),
    linear-gradient(158deg, #0b1330 0%, #11234f 46%, #17368c 100%);
}

/* 品牌徽标与数据背书卡：玻璃拟态（深色面上唯一可用的"高级感"手法） */
.ck-login__mark {
  background: var(--brand-grad);
  box-shadow: 0 8px 22px rgba(29, 78, 216, .48),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
.ck-login__proof {
  background: rgba(255, 255, 255, .085);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ck-login__proof:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .26);
  transform: translateY(-2px);
}
.ck-login__proof-num { letter-spacing: -.5px; }

/* 能力清单圆点：改为品牌亮蓝，视觉重心上移 */
.ck-login__cap-dot {
  color: var(--white);
  background: linear-gradient(150deg, #60a5fa, #2563eb);
  box-shadow: 0 2px 6px rgba(37, 99, 235, .40);
}

/* 右栏：登录卡浮起，形成"两栏一实体"的层级 */
.ck-login__panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

/* 右栏 tab 条：选中页签加品牌描边，强化"当前在哪个入口" */
.ck-login__panel .ck-login__tab.is-active {
  color: var(--blue-700);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .10),
              inset 0 0 0 1px var(--blue-100);
}

/* 免密角色卡：从"灰框"变成"可点的卡片" */
.ck-login__quick-btn {
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.ck-login__quick-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(29, 78, 216, .12);
}
.ck-login__quick-btn.is-primary {
  background: var(--brand-grad);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 2px 8px rgba(29, 78, 216, .28);
}
.ck-login__quick-btn.is-primary:hover {
  background: var(--brand-grad);
  box-shadow: 0 4px 14px rgba(29, 78, 216, .34);
  transform: translateY(-1px);
  color: var(--white);
}


/* =============================================================
   11. 内容画布与标题层级（[POLISH-2]）
   ============================================================= */

/* 内容区顶部一层极浅的蓝雾，让首屏有"光从上方来"的纵深；
   320px 后即回落为 --bg，不影响表格区对比度。
   显式排除登录态（登录页自带整幅面板，不需要画布底）。 */
.ck-app:not(.is-login) .ck-content {
  background: linear-gradient(180deg, var(--blue-25) 0%, var(--bg) 320px);
}

/* 标题左竖条：纯色 → 品牌渐变，与主按钮/激活态同一语言 */
.ck-vline { background: var(--brand-grad); }

/* 页面标题区：拉大与正文的间距，首屏有"标题 → 内容"的节奏 */
.ck-content__hd { margin-bottom: var(--sp-5); }
.ck-content__title { letter-spacing: .3px; }


/* =============================================================
   12. 动效尊重与打印还原
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .ck-card,
  .ck-kpi,
  .ck-panel,
  .ck-icon-btn,
  .ck-btn,
  .ck-nav__item,
  .ck-login__proof,
  .ck-login__quick-btn { transition: none; }
  .ck-card:hover,
  .ck-kpi.is-clickable:hover,
  .ck-btn--primary:hover,
  .ck-login__proof:hover,
  .ck-login__quick-btn:hover { transform: none; }
}

@media print {
  /* 深色导航在纸上是纯墨块，打印一律还原为浅色 */
  .ck-nav {
    background: var(--white) !important;
    border-right: 1px solid var(--line);
    box-shadow: none;
  }
  .ck-nav__item { color: var(--ink-700) !important; }
  .ck-nav__group-title { color: var(--ink-500) !important; background: transparent !important; }
  .ck-nav__item.is-active {
    background: var(--blue-50) !important;
    color: var(--blue-900) !important;
    box-shadow: none !important;
  }
  .ck-app:not(.is-login) .ck-content { background: var(--white); }
  .ck-topbar { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ck-card,
  .ck-kpi,
  .ck-panel,
  .ck-tag { box-shadow: none; }
  .ck-card:hover,
  .ck-kpi:hover,
  .ck-panel:hover { transform: none; }
  .ck-btn--primary { background: var(--blue-700); box-shadow: none; }
}