/* ============================================================================
   晓黎 FDE 演示站主题 —— 只消费 晓黎 token，不另起一套颜色
   ----------------------------------------------------------------------------
   色值事实源：FDE任务/04_品牌与市场资产/.../90_共享样式/wuno-xiaoli-deck.sty
   该 sty 的色值又取自 x-c/designs/ 的晓黎门牌设计源（单向引用，不回写）。

   Wuno / WUWEI 是合作方品牌，不是本司自有品牌。本文件只做晓黎主题。

   ⚠ 选择器是照着 Frappe v16 真实 DOM 写的，不要凭印象改成 Bootstrap 那套：
     v16 的 Desk 是「左侧栏 + 页头」结构，没有 .navbar 顶栏，
     左上角 logo 是 .sidebar-header .header-logo .icon-container > svg.desktop-alphabet，
     且 .icon-container 带 inline background-color，必须 !important 才盖得住。
   ========================================================================= */

:root {
  /* ---- 晓黎标识色（与 wuno-xiaoli-deck.sty 逐值对应）---- */
  --xl-navy:   #123B72;   /* XiaoliNavy   面板与字标 */
  --xl-amber:  #F6A800;   /* XiaoliAmber  琥珀竖条、强调 */
  --xl-slate:  #506477;   /* XiaoliSlate  次级文字 */
  --xl-steel:  #71808C;   /* XiaoliSteel  三级文字 */
  --xl-line:   #D8E0DC;   /* XiaoliLine   边框 */
  --xl-mist:   #EEF2F0;   /* XiaoliMist   背景深端 */
  --xl-paper:  #FBFCFA;   /* XiaoliPaper  背景浅端 */

  /* ---- 语义映射：覆盖 Frappe 自带变量，不改名 ---- */
  --primary: var(--xl-navy);
  --primary-color: var(--xl-navy);
  --brand-color: var(--xl-navy);
  --bg-color: var(--xl-paper);
  --fg-color: var(--xl-paper);
  --card-bg: #fff;
  --border-color: var(--xl-line);
  --text-color: var(--xl-navy);
  --text-muted: var(--xl-slate);
  --text-light: var(--xl-steel);
  --sidebar-select-color: var(--xl-mist);
  --awesomebar-focus-fg: var(--xl-navy);
  --xl-topbar-h: 48px;
}

/* ══ 1. 左侧栏：深靛蓝面板 + 琥珀右沿 ══════════════════════════════════════
   v16 的侧栏是 .body-sidebar（里面还有 .body-sidebar-container 与
   .body-sidebar-placeholder 两个同名层，一起盖才不留白缝）。 */
.body-sidebar,
.body-sidebar-container,
.body-sidebar-placeholder {
  background: var(--xl-navy) !important;
}
.body-sidebar {
  border-right: 3px solid var(--xl-amber) !important;
}

/* 侧栏内所有文字转纸白 */
.body-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item,
.body-sidebar .sidebar-item-label.header-title,
.body-sidebar .sidebar-item-label.header-subtitle,
.body-sidebar .collapse-sidebar-link,
.body-sidebar .sidebar-item-icon,
.body-sidebar .icon {
  color: var(--xl-paper) !important;
}
.body-sidebar .sidebar-item-label.header-subtitle {
  color: var(--xl-steel) !important;
  opacity: .85;
}

/* 侧栏条目：悬停/选中用半透明白 + 琥珀左条 */
.body-sidebar .standard-sidebar-item,
.body-sidebar .sidebar-item-container {
  border-radius: 6px !important;
  margin: 1px 6px !important;
}
.body-sidebar .standard-sidebar-item:hover,
.body-sidebar .sidebar-item-container:hover {
  background: rgba(255, 255, 255, .10) !important;
}
/* 选中态：v16 用的是 .active-sidebar（不是 .selected/.active），
   而且它自带白底，必须一起盖，否则侧栏里会出现一块白砖。 */
.body-sidebar .standard-sidebar-item.selected,
.body-sidebar .sidebar-item-container.selected,
.body-sidebar .standard-sidebar-item.active,
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .sidebar-item-container.active-sidebar {
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: inset 3px 0 0 0 var(--xl-amber) !important;
  border-radius: 6px !important;
}
.body-sidebar .standard-sidebar-item.selected .sidebar-item-label,
.body-sidebar .sidebar-item-container.selected .sidebar-item-label,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon,
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
  color: #fff !important;
  font-weight: 600;
}
/* v16 里 active-sidebar 的 a 也会拿到浅色底 */
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
.body-sidebar .standard-sidebar-item.active-sidebar a {
  background: transparent !important;
}

/* ── 左上角标识：把 ERPNext 的字母块换成晓黎水彩日出 ──────────────────────
   Frappe 渲染的是 <svg class="desktop-alphabet"><use href="#H">，
   我们用同一容器做背景图，并把那个字母 svg 藏掉。 */
.sidebar-header .header-logo .icon-container,
.sidebar-header .sidebar-item-icon .icon-container {
  background-color: transparent !important;
  background-image: url("/xiaoli-assets/xiaoli-mark.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 6px !important;
  width: 34px !important;
  height: 30px !important;
}
.sidebar-header .icon-container .desktop-alphabet,
.sidebar-header .icon-container svg {
  visibility: hidden !important;
}

/* ── 侧栏品牌名（v16 用 header-title / header-subtitle 两行）──────────────
   2026-10-21 补：原来只把 subtitle 换掉了，title 还是 ERPNext 原生的「Desk」，
   而且 subtitle 原文是「Frappe Framework」。两行都得换。

   实测拿到的真实 DOM（别凭记忆改，v16 的类名和旧版不一样）：
     <div class="sidebar-item-label header-title">Desk</div>
     <div class="sidebar-item-label header-subtitle">Frappe Framework</div>

   为什么用「藏原字 + ::after 出新字」而不是直接改文本：
     这两处文本由 JS 从 workspace/app_title 取并渲染，CSS 改不了内容，
     而直接改 JS 又要动 desk.bundle（要 bench build，重）。
     藏原字再叠一层是最稳的做法，升级也不会炸。 */
.sidebar-header .sidebar-item-label.header-title {
  color: transparent !important;   /* 藏掉「Desk」 */
  font-size: 0 !important;
  line-height: 0 !important;
  height: 16px !important;
  position: relative !important;
  overflow: visible !important;
}
.sidebar-header .sidebar-item-label.header-title::after {
  content: "晓黎 FDE" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  color: #fff !important;
  white-space: nowrap;
}
.sidebar-header .sidebar-item-label.header-subtitle {
  color: transparent !important;   /* 藏掉「Frappe Framework」 */
  font-size: 0 !important;
  line-height: 0 !important;
  height: 14px !important;
  position: relative !important;
  overflow: visible !important;
}
.sidebar-header .sidebar-item-label.header-subtitle::after {
  content: "场景演示站" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  letter-spacing: .04em;
  color: var(--xl-amber) !important;
  white-space: nowrap;
}

/* 演示站不该出现「Add Sidebar Item」这类编辑控件 */
.body-sidebar .add-sidebar-item,
.body-sidebar [class*="add-sidebar"],
.body-sidebar .sidebar-item-container:has(.add-sidebar-item),
button.add-sidebar-item {
  display: none !important;
}

/* 侧栏里那个白色空块（promotional banner / onboarding 占位）压掉 */
.body-sidebar .promotional-banners,
.body-sidebar .promotional-banner,
.body-sidebar .onboarding-sidebar,
.body-sidebar .sidebar-item-container:empty {
  display: none !important;
}
.body-sidebar .standard-sidebar-item:empty,
.body-sidebar a[href=""] {
  display: none !important;
}

/* ══ 2. 页头：纸白底 + 琥珀下沿 ═══════════════════════════════════════════ */
.page-head {
  background: var(--xl-paper) !important;
  border-bottom: 2px solid var(--xl-amber) !important;
}
.page-head .page-title .title-text,
.page-head .title-text { color: var(--xl-navy) !important; font-weight: 600; }

/* ══ 3. 按钮 ══════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.btn.btn-primary {
  background-color: var(--xl-navy) !important;
  border-color: var(--xl-navy) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #0d2c56 !important;
  border-color: #0d2c56 !important;
}
/* 页头右侧的「添加」主按钮 */
.page-head .primary-action,
.page-actions .btn-primary {
  background-color: var(--xl-navy) !important;
  border-color: var(--xl-navy) !important;
}

/* ══ 4. 链接、焦点、标签页 ════════════════════════════════════════════════ */
a { color: var(--xl-navy); }
a:hover { color: #0d2c56; }
.form-control:focus,
.input-with-feedback:focus {
  border-color: var(--xl-navy) !important;
  box-shadow: 0 0 0 2px rgba(18, 59, 114, .12) !important;
}
.form-tabs .nav-link.active,
.nav-tabs .nav-link.active,
.nav-tabs .active > .nav-link {
  color: var(--xl-navy) !important;
  border-bottom: 2px solid var(--xl-amber) !important;
  font-weight: 600;
}

/* ══ 5. 列表 ══════════════════════════════════════════════════════════════ */
.list-row-head,
.grid-heading-row {
  background: var(--xl-mist) !important;
  color: var(--xl-navy) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--xl-line) !important;
}
.list-row:hover,
.grid-row:hover { background: var(--xl-mist) !important; }

/* ══ 6. 状态标签：用晓黎色系，不用 Frappe 蓝 ═════════════════════════════ */
.indicator-pill.blue,
.indicator-pill.gray { background: var(--xl-mist) !important; color: var(--xl-navy) !important; }
.indicator-pill.orange,
.indicator-pill.yellow { background: #FFF3D6 !important; color: #8A5D00 !important; }
.indicator-pill.red { background: #FBE9E9 !important; color: #A11B1B !important; }
.indicator-pill.green { background: #E8F3EC !important; color: #1F6B41 !important; }

/* ══ 7. 卡片与工作台 ══════════════════════════════════════════════════════ */
.widget,
.dashboard-widget-box,
.shortcut-widget-box,
.card {
  border: 1px solid var(--xl-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}
.widget-head .widget-title,
.widget-title,
.widget .widget-title { color: var(--xl-navy) !important; font-weight: 600; }
.shortcut-widget-box:hover { border-color: var(--xl-amber) !important; }
.widget .widget-title .es-icon,
.widget-group-title { color: var(--xl-navy) !important; }

/* ══ 8. 登录页 ════════════════════════════════════════════════════════════ */
.page-card {
  border: 1px solid var(--xl-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 28px rgba(18, 59, 114, .10) !important;
}
.page-card-head {
  background: var(--xl-navy) !important;
  border-bottom: 3px solid var(--xl-amber) !important;
  border-radius: 10px 10px 0 0 !important;
}
.page-card-head h4,
.page-card-head .page-card-title { color: #fff !important; }
.for-login .page-card .page-card-body .btn-primary,
.for-login .btn-primary {
  background: var(--xl-navy) !important;
  border-color: var(--xl-navy) !important;
}
/* 登录页左上角 logo */
.for-login .page-card-head img,
.page-card-head img { filter: none; }

/* ══ 9. 收尾：把 Frappe 默认蓝从各处挤掉 ═════════════════════════════════ */
.text-primary { color: var(--xl-navy) !important; }
.bg-primary { background-color: var(--xl-navy) !important; }
.progress-bar { background-color: var(--xl-navy) !important; }
.es-icon.text-primary { color: var(--xl-navy) !important; }


/* ══ 10. 品牌收口：把 ERPNext / Frappe 的痕迹换掉 ═══════════════════════
   2026-10-21 负责人指示：「logo 也都换成我们自己的，把 erpnext 的 logo 换掉」。

   —— 先扫描，再动手。实测结果（不是猜的）——
   登录页/场景入口  : 已是晓黎水彩标              → 无需处理
   Desk 侧栏图形    : 已是晓黎水彩标              → 无需处理
   Desk 侧栏文字    : 「Desk」+「Frappe Framework」→ 本节 10.1
   Desk 首页 20 磁贴: 标题**已经全中文**（组织/会计/资产…）
   Framework 磁贴   : 唯一英文 + frappe-framework-logo.svg → rebrand_home.py + 本节 10.2

   实测拿到的真实 DOM（v16，别用旧版的 .workspace-content/.ce-block，那些不存在）：
     div.desktop-wrapper
       └ div.desktop-container
           └ div.icons-container
               └ div.icons
                   └ a.desktop-icon > .icon-container > img.app-icon
                                  > .icon-caption > .icon-title
   ===================================================================== */

/* ── 10.1 侧栏文字：Desk / Frappe Framework → 晓黎 FDE / 场景演示站 ──────
   这两处文本由 JS 从 workspace 名取并渲染，CSS 改不了内容；
   直接改 JS 要动 desk.bundle（要 bench build，重）。
   藏原字 + ::after 叠新字是最稳的做法，升级也不会炸。 */
.sidebar-header .sidebar-item-label.header-title {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 16px !important;
  position: relative !important;
  overflow: visible !important;
}
.sidebar-header .sidebar-item-label.header-title::after {
  content: "晓黎 FDE" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  color: #fff !important;
  white-space: nowrap;
}
.sidebar-header .sidebar-item-label.header-subtitle {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 14px !important;
  position: relative !important;
  overflow: visible !important;
}
.sidebar-header .sidebar-item-label.header-subtitle::after {
  content: "场景演示站" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  letter-spacing: .04em;
  color: var(--xl-amber) !important;
  white-space: nowrap;
}

/* ── 10.2 那个 Frappe logo 磁贴 ──────────────────────────────────────────
   rebrand_home.py 已经把 Desktop Icon 改名换图标，
   但 img.src 是服务端渲染的，缓存没刷时还会是旧图 —— 这里再兜一层。
   （换 logo 是负责人明确要求，这条兜底值得留着。） */
a.desktop-icon[data-id="Framework"] img.app-icon,
a.desktop-icon[data-id="FDE 平台底座"] img.app-icon,
img.app-icon[src*="frappe-framework-logo"] {
  content: url("/xiaoli-assets/xiaoli-mark.png") !important;
  /* 坑（2026-10-21 实测）：晓黎标原图是 1024x584（1.75:1 宽幅），
     而磁贴框是 54x54 正方形。默认 object-fit:fill 会把它**横向压扁**，
     看起来像「变形了」。必须用 contain 保持比例。
     同时给 padding 让它不要顶满格子（顶满了显脏）。 */
  object-fit: contain !important;
  padding: 10px 6px !important;
  box-sizing: border-box !important;
}

/* ── 10.3 磁贴墙降噪：原生模块不抢演示入口的视觉重心 ───────────────────── */
.desktop-wrapper .icons {
  gap: 6px;
}
.desktop-wrapper a.desktop-icon .icon-container {
  border-radius: 12px;
  transition: transform 160ms cubic-bezier(.2,.7,.3,1),
              box-shadow 160ms cubic-bezier(.2,.7,.3,1);
}
.desktop-wrapper a.desktop-icon:hover .icon-container {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(18, 59, 114, .30);
}
.desktop-wrapper a.desktop-icon .icon-title {
  color: var(--xl-navy) !important;
  font-weight: 600;
}
.desktop-wrapper a.desktop-icon:hover .icon-title { color: var(--xl-navy) !important; }

/* ── 10.4 收尾：任何漏网的 Frappe/ERPNext 品牌图都换掉 ──────────────────── */
img[src*="frappe-framework-logo"],
img[src*="erpnext-logo"] {
  content: url("/xiaoli-assets/xiaoli-mark.png") !important;
  object-fit: contain;
}

/* ── 10.5 磁贴图标统一成晓黎配色 ──────────────────────────────────────────
   2026-10-21 负责人：「logo 也都换成我们自己的」。

   剩下的 6 个磁贴里，除了「FDE 平台底座」是我们的标，
   其余 5 个（采购/生产/质量/销售/库存）用的是 ERPNext 的
   /assets/erpnext/icons/desktop_icons/solid/*.svg ——
   形状是 ERPNext 的，颜色是那个很扎眼的蓝 (#2490ef)。

   这里不换形状（换成我们的反而认不出是什么功能），只做两件事：
     1. 把底色从 ERPNext 蓝改成晓黎深靛蓝
     2. 统一圆角与投影，跟主题一致
   这样整面墙的观感是我们自己的，功能语义还保留。
   ===================================================================== */
.desktop-wrapper a.desktop-icon .icon-container {
  background-color: transparent !important;
  border-radius: 12px !important;
}
.desktop-wrapper a.desktop-icon .icon-container img.app-icon {
  /* ERPNext 的图标是蓝色实心方块 svg。用 filter 把它压成晓黎深靛蓝：
     先转灰度，再用 sepia + hue-rotate + saturate 调到 #123B72 那一挂。
     比换图省事，也不会因为 ERPNext 升级换文件名而失效。 */
  filter: grayscale(1) brightness(0.45) sepia(1) hue-rotate(185deg)
          saturate(3.2) brightness(0.72) !important;
}
/* 我们自己那个标不要被 filter 影响 */
.desktop-wrapper a.desktop-icon[data-id="FDE 平台底座"] .icon-container img.app-icon {
  filter: none !important;
}

/* 顶栏 logo 区（桌面视图的左上角）也统一 */
.navbar .app-logo,
.navbar-brand img {
  filter: none !important;
}

/* ── 10.6 晓黎标的所有出现位置都锁死宽高比 ────────────────────────────────
   2026-10-21 负责人指出磁贴里的标「都变形了」。

   根因：晓黎标原图 1024x584（1.75:1 宽幅），
   而磁贴框是 54x54 正方形，浏览器默认 object-fit:fill 直接横向压扁。

   这里把**所有**出现位置统一加 contain，避免以后再在别处变形。
   （顶栏 56x32 恰好也是 1.75:1 所以之前看着正常，但那是巧合，不能依赖。）
   ===================================================================== */
img[src*="xiaoli-mark"] {
  object-fit: contain !important;
}
.navbar img[src*="xiaoli-mark"],
.navbar-brand img[src*="xiaoli-mark"] {
  object-fit: contain !important;
}
.xl-entry-head img[src*="xiaoli-mark"] {
  object-fit: contain !important;
}

/* ══ 11. 返回场景入口 ═══════════════════════════════════════════════════
   2026-10-21 负责人反馈：「为什么我直接进了 desk，这个进不去」。

   根因（实测确认，不是猜的）：
     场景入口页注入在 Website Settings.head_html 里，只在 `/login` 生效；
     而 **已登录时 `/login` 会 301 跳到 `/desk`**（Frappe 的行为）。
     所以登进去之后就再也回不到入口页了 —— 演示时想切场景只能退出登录，
     退出后又回到 Frappe 的默认登录表单，很别扭。

   实测发现 `/home` 这个路径**在登录与未登录两种状态下都能显示入口页**
   （Guest 7 张卡 / 已登录 7 张卡都正常），所以把它作为固定入口。

   这里做两件事：
     1. 侧栏顶部 logo 区可点，回到场景入口（最自然的位置）
     2. 补一个明确的文字提示，让人知道能点
   ===================================================================== */

/* 侧栏 header 可点 + 悬停反馈 */
.body-sidebar .sidebar-header {
  cursor: pointer !important;
  border-radius: 8px;
  transition: background-color 160ms cubic-bezier(.2,.7,.3,1);
}
.body-sidebar .sidebar-header:hover {
  background-color: rgba(255, 255, 255, .09) !important;
}
.body-sidebar .sidebar-header:active {
  background-color: rgba(255, 255, 255, .14) !important;
}

/* 副标题那行补一句「点这里回场景入口」，让人知道能点。
   注意：原来的 ::after 内容是「场景演示站」，这里改成两段更明确。 */
.body-sidebar .sidebar-item-label.header-subtitle::after {
  content: "场景演示站 · 点此返回" !important;
}