/**
 * WeKnora SaaS 品牌定制 - 基础覆盖样式
 *
 * 说明：
 * 1. 本文件提供 CSS 变量覆盖的示例和 logo 替换的 CSS 方案
 * 2. 动态主题色由 bootstrap.js 通过 CSS 变量注入
 * 3. 本文件主要处理静态结构层面的品牌样式调整
 * 4. 所有选择器尽量使用通用类名，不依赖官方具体 DOM 结构
 */

/* ============================================================
   品牌色 CSS 变量（默认值，会被 bootstrap.js 动态覆盖）
   ============================================================ */
:root {
  /* 以下变量为默认占位，实际值由 bootstrap.js 运行时注入 */
  --saas-brand-color: var(--td-brand-color, #0052D9);
  --saas-brand-color-hover: var(--td-brand-color-hover, #366EF2);
  --saas-brand-color-active: var(--td-brand-color-active, #0034B5);
}

/* ============================================================
   Logo 替换 - CSS 方案
   说明：对于使用 background-image 的 logo，可通过 CSS 直接替换
   对于 <img> 标签的 logo，由 bootstrap.js 通过 JS 动态替换
   ============================================================ */

/* 侧边栏 Logo 区域（背景图替换方案） */
.sidebar-logo,
.t-logo,
.logo {
  /* 使用 CSS 变量控制 logo 地址，可由 JS 动态设置 */
  /* background-image: var(--saas-logo-url) !important; */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* 隐藏原始 img logo（当使用背景图方案时） */
.sidebar-logo img.saas-logo-hidden,
.t-logo img.saas-logo-hidden,
.logo img.saas-logo-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ============================================================
   登录页品牌样式
   ============================================================ */

/* 登录页 Logo 容器 */
.login-logo,
.t-login-logo {
  /* 可通过 CSS 变量调整 logo 大小 */
  /* --saas-login-logo-width: 180px; */
}

/* 登录页标题品牌色 */
.login-title,
.t-login-title,
.login-page .title {
  /* color: var(--saas-brand-color); */
}

/* 登录页主按钮品牌色（兜底，TDesign 按钮已通过 CSS 变量控制） */
.login-btn-primary,
.t-button--primary {
  /* 已通过 --td-brand-color 系列变量控制，此处无需额外覆盖 */
}

/* ============================================================
   登录页背景图（loginBgUrl）
   ------------------------------------------------------------
   动态背景图 URL 必须由 bootstrap.js 运行时注入到独立的
   <style id="saas-login-bg-style"> 中，本文件不写死任何生效规则：
   无配置 / 空串 / 请求失败 / SaaSBrand.clear() 时该 style 被整体
   移除，官方绿色渐变、::before 白色光晕、.animated-bg 动画必须
   完整恢复，因此这里的规则只能以注释模板形式存在，切勿放开。

   bootstrap.js 实际注入的规则等价于：

   .login-layout {
     background: #0b2a24 url("<loginBgUrl>") center center / cover no-repeat !important;
   }
   html[theme-mode="dark"] .login-layout {
     background: #071a16 url("<loginBgUrl>") center center / cover no-repeat !important;
   }
   可读性遮罩（复用官方 ::before 光晕层，左深右浅，不压白色卡片）：
   .login-layout::before {
     background: linear-gradient(105deg, rgba(3,20,17,.62) 0%, rgba(3,20,17,.30) 46%, rgba(3,20,17,.12) 100%) !important;
   }
   背景生效时浮动知识节点动画层整体隐藏（style 移除后自动恢复，
   不影响官方 ≤480px / prefers-reduced-motion 自带的隐藏行为）：
   .login-layout .animated-bg { display: none !important; }
   ============================================================ */

/* ============================================================
   侧边栏品牌样式
   ============================================================ */

/* 侧边栏选中项品牌色（兜底） */
.sidebar-menu-item.is-active,
.t-menu-item.t-is-active,
.t-menu__item.t-is-active {
  /* 已通过 --td-brand-color 控制 */
}

/* 侧边栏顶部 Logo 区域高度调整 */
.sidebar-header,
.t-layout-sider-logo {
  /* height: 64px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   顶部导航栏品牌样式
   ============================================================ */

/* 顶部栏 Logo */
.header-logo,
.t-header-logo {
  display: flex;
  align-items: center;
}

/* ============================================================
   页脚品牌信息
   ============================================================ */

.footer-brand,
.t-footer-brand {
  /* color: var(--td-text-color-secondary); */
}

/* ============================================================
   帮助提示：品牌定制标记
   用于调试时识别当前是否已应用定制主题
   ============================================================ */

/* 在 body 上添加 data-saas-themed 属性后可用于调试 */
body[data-saas-themed="true"]::before {
  /* 调试用：取消注释可在页面角落显示定制标记 */
  /*
  content: "SaaS Custom Theme Active";
  position: fixed;
  bottom: 8px;
  right: 8px;
  font-size: 10px;
  color: #fff;
  background: var(--td-brand-color);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0.6;
  */
}

/* ============================================================
   加载状态优化
   减少主题切换时的闪烁感
   ============================================================ */

/* 页面初始加载时，在品牌配置加载完成前，
   可以给 body 添加一个过渡类，让颜色变化更平滑 */
body.saas-theme-transition * {
  /* 注意：全站过渡可能影响性能，默认不开启
     如需启用，在 bootstrap.js 中动态添加/移除该类 */
  /* transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; */
}

/* ============================================================
   自定义滚动条（可选，品牌色延伸）
   ============================================================ */

/*
::-webkit-scrollbar-thumb {
  background-color: var(--td-brand-color-4, #84ADFF);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--td-brand-color-5, #5A8BFF);
}
*/

/* ============================================================
   品牌水印（可选）
   ============================================================ */

/*
.saas-watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-repeat: repeat;
  background-image: var(--saas-watermark-image, none);
}
*/

/* ============================================================
   响应式适配
   ============================================================ */

/* 移动端 Logo 大小调整 */
@media (max-width: 768px) {
  .sidebar-logo,
  .t-logo,
  .logo {
    /* --saas-logo-scale: 0.8; */
  }
}

/* ============================================================
   暗色模式适配（如果官方支持暗色模式）
   ============================================================ */

/*
[data-theme="dark"] .sidebar-logo,
[data-theme="dark"] .t-logo {
  filter: brightness(1.2);
}
*/

/* ============================================================
   去品牌遮盖（路线 A：运行时遮盖，与 bootstrap.js applyTextBrand 配套）
   ------------------------------------------------------------
   设计原则：
   - 只处理白名单元素，不做全站品牌词替换；
   - 默认隐藏规则纯 CSS 生效（薄镜像注入本文件即生效），零首屏闪烁；
   - 自定义 logo 由 bootstrap.js 替换 src 并打 data-saas-logo-replaced
     标记后恢复显示；
   - 登录页不在本次范围：登录页用的是 .logo-image，不会被下面的
     .logo_box img.logo 规则命中。
   ============================================================ */

/* F2 侧栏官方文字合体 logo（menu.vue:6，图片本身含"WeKnora"字样）：
   无自定义 logo 时默认隐藏。折叠态官方 v-if 不渲染该节点，天然不受影响。 */
.logo_box img.logo {
  display: none !important;
}

/* 配置了自定义首页 logo（bootstrap.js 完成 src 替换并打标）后恢复显示。
   字段重构后侧栏图标归 homeLogoUrl，标记为 data-saas-home-logo-replaced；
   data-saas-logo-replaced 现仅用于登录页 logo，不能再用于此处恢复。 */
.logo_box img.logo[data-saas-home-logo-replaced="true"] {
  display: inline-block !important;
}

/* F5 用户菜单「帮助与文档」「GitHub」外链项：
   bootstrap.js 按图标锚点（help-circle / logo-github）识别后打标隐藏。
   菜单点击才渲染（v-if="menuVisible"），无需防闪烁处理。 */
.user-dropdown .menu-item[data-saas-link-hidden="true"],
.user-dropdown .menu-divider[data-saas-divider-hidden="true"] {
  display: none !important;
}

/* ============================================================
   F1 新会话欢迎大标题防闪烁
   ------------------------------------------------------------
   不做无条件静态隐藏：只有 bootstrap.js 成功加载并在 <html> 上
   打了 saas-boot 标记后才先隐藏 .dialogue-title，完成首轮替换
   打 saas-chat-ready 后放行；若官方升级导致原文锚点失配
   （匹配不到、无法打 ready 标记），bootstrap.js 会在启动 3 秒后
   打 saas-timeout 强制放行。JS 完全不可用时没有 saas-boot 类，
   标题按官方原样显示（优雅降级，绝不永久空白）。
   ============================================================ */
html.saas-boot:not(.saas-chat-ready):not(.saas-timeout) .dialogue-title {
  visibility: hidden;
}

/* F4 新手引导弹窗为点击/首访触发，且自带 guide-fade 淡入动画，
   MutationObserver 80ms 防抖窗口内完成替换，肉眼不可见，不做强制隐藏。 */

/* ============================================================
   自定义首页 logo：禁用官方反色滤镜
   ------------------------------------------------------------
   官方侧栏 CSS（容器内 /assets/index-*.css）对 .logo_box .logo 套用
   filter: invert(1) hue-rotate(180deg)（亮色/暗色均可能命中），
   租户上传的彩色 logo 被反色后会与侧栏背景融为一体、看似"没替换成功"。
   bootstrap.js 完成 src 替换并打 data-saas-home-logo-replaced 标记后，
   在此无条件关闭滤镜；恢复官方 logo（标记移除）时官方滤镜自动生效。
   登录页 a.header-logo img.logo-image 无此滤镜规则（用户反馈显示正常），
   不增加多余规则。
   ============================================================ */
.logo_box img.logo[data-saas-home-logo-replaced="true"] {
  filter: none !important;
  /* 尺寸保护：租户上传图比例不可控。若沿用官方固定 width:128px，比例偏"方"
     的图（如用户图 2.11:1 → 128px 宽时高约 61px）可能超出侧栏 logo 区高度、
     被 overflow:hidden 裁切。改用 max-width + max-height 双约束、宽高 auto，
     浏览器在两约束内保持原始比例缩放，完整显示且不变形。 */
  max-width: 128px;
  max-height: 40px;
  width: auto;
  height: auto;
}
