/* ============================================================
   词元无限 · New API 面板克莱因蓝主题（外挂皮肤，不改镜像）
   注入方式：nginx sub_filter 往面板 </head> 注入本文件
   策略：三层覆盖 Semi Design 主色
     ① 覆盖 --semi-blue-N 色阶（primary 的底层来源）
     ② 覆盖 --semi-color-primary* 语义变量
     ③ 关键类名 !important 兜底
   克莱因蓝主色 #002FA7 = rgb(0,47,167)
   ============================================================ */

:root,
body[theme-mode],
body {
  /* —— ① Semi blue 色阶：以克莱因蓝为中心铺一条 0~9 —— */
  --semi-blue-0: 232 237 250;
  --semi-blue-1: 205 216 245;
  --semi-blue-2: 158 176 232;
  --semi-blue-3: 110 133 219;
  --semi-blue-4: 61 92 200;
  --semi-blue-5: 20 55 176;   /* hover 用，略亮 */
  --semi-blue-6: 0 47 167;    /* ← 主色 克莱因蓝 #002FA7 */
  --semi-blue-7: 0 38 138;    /* active 用，略暗 */
  --semi-blue-8: 0 30 110;
  --semi-blue-9: 0 22 82;

  /* —— ② primary 语义变量（Semi 用逗号分隔 RGB，供 rgba(var(),a) ）—— */
  --semi-color-primary: 0, 47, 167;
  --semi-color-primary-hover: 20, 55, 176;
  --semi-color-primary-active: 0, 38, 138;
  --semi-color-primary-disabled: 158, 176, 232;
  --semi-color-primary-light-default: 0, 47, 167, .09;
  --semi-color-primary-light-hover: 0, 47, 167, .16;
  --semi-color-primary-light-active: 0, 47, 167, .24;
  --semi-color-link: 0, 47, 167;
  --semi-color-link-hover: 20, 55, 176;
  --semi-color-link-active: 0, 38, 138;
  --semi-color-focus-border: 0, 47, 167;

  /* 品牌强调渐变，供自定义元素引用 */
  --iw-klein: #002FA7;
  --iw-klein-glow: rgba(0, 47, 167, .45);
}

/* ============================================================
   ③ 关键控件兜底 —— 万一某处没走变量，用类名硬盖主色
   （Semi 类名前缀 .semi-*，相对稳定）
   ============================================================ */

/* 主按钮 */
.semi-button-primary,
.semi-button.semi-button-primary:not(.semi-button-borderless) {
  background-color: #002FA7 !important;
  border-color: #002FA7 !important;
}
.semi-button-primary:hover {
  background-color: #1437B0 !important;
  border-color: #1437B0 !important;
}
.semi-button-primary:active {
  background-color: #00268A !important;
}

/* 链接 / 文字按钮 */
.semi-typography-link,
.semi-button-borderless.semi-button-primary,
a.semi-navigation-item-normal:hover {
  color: #002FA7 !important;
}

/* 选中态：菜单、标签页、单选、开关 */
.semi-navigation-item-selected,
.semi-navigation-item-selected .semi-navigation-item-icon {
  color: #002FA7 !important;
}
.semi-navigation-item-selected {
  background: rgba(0, 47, 167, .10) !important;
}
.semi-tabs-tab-active {
  color: #002FA7 !important;
}
.semi-tabs-bar-line .semi-tabs-tab-active::after,
.semi-tabs-content .semi-tabs-tab-active {
  border-color: #002FA7 !important;
}
.semi-switch-checked {
  background-color: #002FA7 !important;
}
.semi-radio-checked .semi-radio-inner-checked,
.semi-checkbox-checked .semi-checkbox-inner {
  background-color: #002FA7 !important;
  border-color: #002FA7 !important;
}

/* 进度条 / 滑块 / spin 主色 */
.semi-progress-track-inner,
.semi-slider-track,
.semi-spin-wrapper {
  background-color: #002FA7 !important;
}
.semi-spin .semi-spin-dot {
  color: #002FA7 !important;
}

/* 标签 primary */
.semi-tag-solid.semi-tag-blue,
.semi-tag-light.semi-tag-blue {
  background-color: rgba(0, 47, 167, .12) !important;
  color: #002FA7 !important;
}

/* ============================================================
   点阵背景 —— 给主内容区铺克莱因蓝细点阵，增高级感
   贴在内容容器底层，不挡交互（pointer-events:none）
   ============================================================ */
.semi-layout,
.semi-layout-content,
body {
  position: relative;
}
.semi-layout-content::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(0, 47, 167, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -11px -11px;
  /* 顶部略亮的克莱因蓝辉光，往下渐隐 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
/* 内容本身抬到点阵之上 */
.semi-layout-content > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   UI 切换动效 —— 路由/视图切换时淡入上移
   .iw-route-enter 由注入的 theme.js 在路由变化时打到 <body>
   ============================================================ */
@keyframes iwRouteIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.iw-route-enter .semi-layout-content > *,
body.iw-route-enter main,
body.iw-route-enter [role="main"] {
  animation: iwRouteIn .34s cubic-bezier(.22, .61, .36, 1) both;
}

/* 卡片 / 表格行 / 按钮：统一顺滑过渡 + hover 微抬升 */
.semi-card,
.semi-table-row,
.semi-button,
.semi-navigation-item {
  transition:
    transform .18s cubic-bezier(.22, .61, .36, 1),
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease !important;
}
.semi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 47, 167, .16) !important;
}
.semi-button:not(.semi-button-borderless):hover {
  transform: translateY(-1px);
}

/* 尊重「减少动态效果」的系统偏好 */
@media (prefers-reduced-motion: reduce) {
  body.iw-route-enter .semi-layout-content > *,
  .semi-card:hover,
  .semi-button:hover {
    animation: none !important;
    transform: none !important;
  }
}

/* 顶栏横向导航在克莱因蓝底上：文字/图标/Logo 转白 */
.semi-navigation-horizontal,
.semi-navigation-horizontal .semi-navigation-inner,
.semi-navigation-horizontal .semi-navigation-header {
  background-color: #002FA7 !important;
}
.semi-navigation-horizontal .semi-navigation-item,
.semi-navigation-horizontal .semi-navigation-item-text,
.semi-navigation-horizontal .semi-navigation-item-icon,
.semi-navigation-horizontal .semi-navigation-header-logo,
.semi-navigation-horizontal .semi-navigation-header-text,
.semi-navigation-horizontal a {
  color: #FFFFFF !important;
}
.semi-navigation-horizontal .semi-navigation-item:hover {
  background-color: rgba(255, 255, 255, .14) !important;
  color: #FFFFFF !important;
}
.semi-navigation-horizontal .semi-navigation-item-selected,
.semi-navigation-horizontal .semi-navigation-item-selected .semi-navigation-item-icon,
.semi-navigation-horizontal .semi-navigation-item-selected .semi-navigation-item-text {
  background-color: #FFFFFF !important;
  color: #002FA7 !important;
}

/* 笨办法兜底：顶栏所有文字强制刷白，不依赖具体 class */
.semi-layout-header,
.semi-layout-header *,
header,
header *,
[class*="headerBar"],
[class*="headerBar"] *,
[class*="header-bar"],
[class*="header-bar"] *,
[class*="topBar"],
[class*="topBar"] *,
nav[class*="semi"],
nav[class*="semi"] * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}
/* 顶栏 hover 项：浅白底衬托 */
.semi-layout-header a:hover,
header a:hover,
[class*="headerBar"] a:hover {
  background-color: rgba(255,255,255,.16) !important;
}