/* ============================================================
   巨牛工作台 · V3 玻璃拟态（Glassmorphism）
   基于 V2 顶部导航布局；独立 CSS，仅 html.ui-v3 作用域。
   依赖 v2-topbar.css 提供 V2 布局；本文件仅叠加玻璃质感，
   不重复任何布局规则。
   设计原则：
   - 顶栏用 backdrop-filter 直接磨砂（V2 顶栏为 fixed 且内部无 fixed 后代，
     不会触发"包含块陷阱"，故无需挂 ::before 承载模糊；
     ::before 仅作装饰高光/流光线，不参与模糊）。
   - 卡片/弹层做半透明磨砂 + 高光描边，底部彩色光晕让玻璃有内容可模糊。
   - 移动端（<768px）不启用模糊（性能/可读性），顶栏改半透明实底回退。
   ============================================================ */

/* ---------- 移动端轻量回退：保留 V2 原 UI 顶栏底色，仅加磨砂不覆盖 ---------- */
html.ui-v3 .sidebar{
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
}

/* ===================== 桌面端玻璃拟态 ===================== */
@media(min-width:768px){

  /* 装饰背景：彩色光晕只放在【仪表盘首页】，让玻璃有内容可模糊；
     其它页面（财务/客户/电商等）保持干净纯色底，避免数据区被晕染色。
     body 默认纯色，首页单独叠光晕。 */
  html.ui-v3 body{
    background: var(--bg) !important;
  }
  /* 浅色主题首页：极淡光晕（--primary 是深灰蓝，浓度高会成脏灰） */
  html.ui-v3 #page-home{
    background:
      radial-gradient(1100px 560px at 10% -8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%),
      radial-gradient(900px 520px at 102% -4%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 58%),
      radial-gradient(820px 700px at 55% 118%, color-mix(in srgb, var(--green) 7%, transparent), transparent 60%),
      var(--bg) !important;
    background-attachment: fixed !important;
  }
  /* 深色主题（暗夜/暗夜紫）首页：底色深，可承受较浓光晕 */
  html.ui-v3.theme-dark #page-home,
  html.ui-v3.theme-purple #page-home{
    background:
      radial-gradient(1100px 560px at 10% -8%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 60%),
      radial-gradient(900px 520px at 102% -4%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%),
      radial-gradient(820px 700px at 55% 118%, color-mix(in srgb, var(--green) 20%, transparent), transparent 60%),
      var(--bg) !important;
    background-attachment: fixed !important;
  }

  /* ---------- 顶栏磨砂玻璃（招牌效果） ----------
     保留 V2 原 UI 顶栏底色（color-mix(var(--primary-dark) 70%, #12161b)），
     仅叠加磨砂模糊，不覆盖其 background */
  html.ui-v3 .sidebar{
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.20) !important;
  }
  /* 顶栏质感升级（不改原底色）：顶部高光提亮 + 底缘主题色流光线 */
  html.ui-v3 .sidebar::before{
    content:'' !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 36%),
      linear-gradient(90deg, color-mix(in srgb, var(--primary) 70%, transparent), color-mix(in srgb, var(--green) 50%, transparent) 42%, transparent 78%) !important;
    background-size:100% 100%, 100% 2px !important;
    background-position:0 0, 0 100% !important;
    background-repeat:no-repeat !important;
  }
  /* 品牌名/导航文字在玻璃上保持高对比（白字） */
  html.ui-v3 .brand .b-name,
  html.ui-v3 .brand .b-slogan,
  html.ui-v3 .nav a{ color: rgba(255,255,255,.92) !important; }
  /* 高亮/hover：半透明白胶囊 + 白字（原 --primary-soft 浅底在深顶栏上与白字对比不足） */
  html.ui-v3 .nav a:hover,
  html.ui-v3 .nav a.active,
  html.ui-v3 .nav a.active:hover{
    background: rgba(255,255,255,.16) !important;
    color:#fff !important;
  }

  /* ---------- 通用玻璃卡片 ----------
     ⚠️ .fin-card 绝不能进此清单：它是财务模块整体包裹层
     (finance.js: main.innerHTML='<div class="fin-card">'+html)，
     main.css 里本就 background:transparent；给它玻璃白底
     会变成盖住整个内容区的"大白板"（2026-10-22 踩坑）。 */
  html.ui-v3 .dv-kpi,
  html.ui-v3 .dv-goals,
  html.ui-v3 .dv-arap-col,
  html.ui-v3 .idea-card,
  html.ui-v3 .cm-card,
  html.ui-v3 .ai-card,
  html.ui-v3 .card,
  html.ui-v3 .panel,
  html.ui-v3 .fin-modal,
  html.ui-v3 .cm-modal,
  html.ui-v3 .v2-pop,
  html.ui-v3 .v2-theme-pop{
    /* 浅色主题：底色本来就浅，透明度过高会显"灰蒙蒙"，故更实 */
    background: color-mix(in srgb, var(--panel) 86%, transparent) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid color-mix(in srgb, var(--panel) 55%, rgba(255,255,255,.35)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.22) !important;
    border-radius: 16px !important;
  }
  /* 弹窗单独提实：86% 会透出遮罩深色（rgba(40,46,34,.45)），显得灰绿浑浊；
     95% 仍残留 5% 遮罩色（用户仍嫌灰），改纯实底 var(--panel)，玻璃描边/高光保留 */
  html.ui-v3 .fin-modal,
  html.ui-v3 .cm-modal{
    background: var(--panel) !important;
  }
  /* 深色主题：底色深，可保留更强玻璃通透感 */
  html.ui-v3.theme-dark .dv-kpi,
  html.ui-v3.theme-dark .dv-goals,
  html.ui-v3.theme-dark .dv-arap-col,
  html.ui-v3.theme-dark .idea-card,
  html.ui-v3.theme-dark .cm-card,
  html.ui-v3.theme-dark .ai-card,
  html.ui-v3.theme-dark .card,
  html.ui-v3.theme-dark .panel,
  html.ui-v3.theme-dark .fin-modal,
  html.ui-v3.theme-dark .cm-modal,
  html.ui-v3.theme-dark .v2-pop,
  html.ui-v3.theme-dark .v2-theme-pop,
  html.ui-v3.theme-purple .dv-kpi,
  html.ui-v3.theme-purple .dv-goals,
  html.ui-v3.theme-purple .dv-arap-col,
  html.ui-v3.theme-purple .idea-card,
  html.ui-v3.theme-purple .cm-card,
  html.ui-v3.theme-purple .ai-card,
  html.ui-v3.theme-purple .card,
  html.ui-v3.theme-purple .panel,
  html.ui-v3.theme-purple .fin-modal,
  html.ui-v3.theme-purple .cm-modal,
  html.ui-v3.theme-purple .v2-pop,
  html.ui-v3.theme-purple .v2-theme-pop{
    background: color-mix(in srgb, var(--panel) 70%, transparent) !important;
  }

  /* 仪表盘 Hero：保留主色渐变，叠加玻璃高光描边 */
  html.ui-v3 .dv-hero{
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25) !important;
  }

  /* ---------- 子导航玻璃条 ---------- */
  html.ui-v3 .ai-tabs,
  html.ui-v3 .cm-tabs,
  html.ui-v3 .fin-side{
    background: color-mix(in srgb, var(--panel) 80%, transparent) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    border: 1px solid color-mix(in srgb, var(--panel) 50%, rgba(255,255,255,.25)) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  html.ui-v3.theme-dark .ai-tabs,
  html.ui-v3.theme-dark .cm-tabs,
  html.ui-v3.theme-dark .fin-side,
  html.ui-v3.theme-purple .ai-tabs,
  html.ui-v3.theme-purple .cm-tabs,
  html.ui-v3.theme-purple .fin-side{
    background: color-mix(in srgb, var(--panel) 55%, transparent) !important;
  }
  /* 财务子导航上沿贴主导航：去掉左上/右上圆角（仅保留底部） */
  html.ui-v3 .fin-side{
    border-radius: 0 0 14px 14px !important;
  }

  /* ---------- 财务模块去掉纯白底（V3） ----------
     浅色主题下 .fin-stat / .fin-table-wrap / .fin-summary 原本 var(--panel)=纯白，
     用户要求直接去掉白底，透出页面底色（--bg）即可，仅保留边框分隔。 */
  html.ui-v3 .fin-stat,
  html.ui-v3 .fin-table-wrap,
  html.ui-v3 .fin-summary{
    background: transparent !important;
  }
  html.ui-v3 .fin-table-wrap{
    border: 1px solid var(--line) !important;
  }

  /* ---------- 冻结列（编号/状态/客户名称）默认态底色与页面底色一致（V3） ----------
     ⚠️ 不能用 transparent：冻结列是 sticky，横向滚动时底下滑过的内容会透出来（重叠感）。
     改为实底 var(--bg)（与页面玻璃底色同色，视觉上仍像"透明"），
     既能遮住滚动内容，又与整行观感一致。
     hover / 逾期行仍由 main.css 统一上实底（:not 排除，避免抢级），保证整行同色。 */
  html.ui-v3 .juniu-table tbody tr:not(.fin-row-overdue):not(:hover) td.fin-no-cell,
  html.ui-v3 .juniu-table tbody tr:not(.fin-row-overdue):not(:hover) td.fin-st-cell,
  html.ui-v3 .juniu-table tbody tr:not(.fin-row-overdue):not(:hover) td.fin-frozen-col,
  html.ui-v3 .fin-table.commission-table tbody tr:not(.fin-row-overdue):not(:hover) td.fin-sup-no-cell,
  html.ui-v3 .fin-table.commission-table tbody tr:not(.fin-row-overdue):not(:hover) td.fin-sup-st-cell,
  html.ui-v3 .fin-table.commission-table tbody tr:not(.fin-row-overdue):not(:hover) td.fin-sup-cust-cell{
    background: var(--bg);
  }

  /* ---------- V3 行 hover 加深 ----------
     V3 行底透明（透出 --bg #f5f6f7）后，main.css 的 hover 色 --primary-soft(#e6eaed)
     与页面底色几乎同明度，肉眼看不见 → 无头浏览器实测确认规则生效但不可感知。
     此处统一加深 fin-table 全系（含客户资料 cust-table / 客户订单 / 供应商）hover，
     逾期行 hover(#fbe3e3, 特异度更高)不受影响。 */
  html.ui-v3 .fin-table tbody tr:not(.fin-row-overdue):hover td{
    background: color-mix(in srgb, var(--primary-soft) 88%, var(--primary)) !important;
  }

  /* ---------- 顶栏图标按钮：玻璃底 + 主题色辉光 hover ---------- */
  /* ---------- 顶栏图标按钮：克制重做（2026-10-23 用户要求） ----------
     之前叠了渐变/描边/外环/辉光，越弄越丑。
     现改为：常态全透明、无框、白字图标；hover 仅一层柔和白色薄雾 + 图标微亮，
     无任何边框 / 外环 / 重辉光。尺寸与 V2 一致(34px/圆角10px)。 */
  html.ui-v3 .v2-icon-btn,
  html.ui-v3 .v2-icon-btn svg{
    color:#fff !important;
  }
  html.ui-v3 .v2-icon-btn{
    width:34px !important; height:34px !important; border-radius:10px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transition: background .15s ease, transform .1s ease !important;
  }
  html.ui-v3 .v2-icon-btn:hover,
  html.ui-v3 .v2-icon-btn:hover svg{
    color:#fff !important;
  }
  /* 背景薄雾只加在按钮上，svg 只改字色（否则 svg 也会多出一个"内框"） */
  html.ui-v3 .v2-icon-btn:hover{
    background: rgba(255,255,255,.14) !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }
  html.ui-v3 .v2-icon-btn:active{ transform:scale(.94) !important; }

  /* ---------- 财务列表配色收敛（2026-10-23） ----------
     用户澄清：逾期行整行粉色要保留（与 V2 一致，行底统一由 main.css 保证整行同色），
     此处只收敛状态胶囊：统一中性浅灰底，语义色保留在文字上。 */
  /* 供应商对账状态胶囊（灰/蓝/黄/绿）→ 统一灰底，语义色保留在文字上 */
  html.ui-v3 .fin-sup-st-badge.none,
  html.ui-v3 .fin-sup-st-badge.reconed,
  html.ui-v3 .fin-sup-st-badge.invoiced,
  html.ui-v3 .fin-sup-st-badge.settle{
    background: #eef0f2 !important;
    border-color: transparent !important;
  }
  /* 对账进度胶囊（绿/橙/红）→ 同样统一灰底 */
  html.ui-v3 .fin-sup-recon-pill.done,
  html.ui-v3 .fin-sup-recon-pill.partial,
  html.ui-v3 .fin-sup-recon-pill.none{
    background: #eef0f2 !important;
  }

}

/* ============================================================
   V3 移动端底部标签栏 / 更多宫格「玻璃质感」（体现版本个性）
   仅 html.ui-v3 + 移动端(≤767px) 生效。
   ⚠️ #mbTabbar 为 position:fixed 且内部无 fixed 后代（仅 .mb-tab 按钮），
      不会触发「包含块陷阱」，可安全使用 backdrop-filter。
   注意加载顺序：mobile-nav.css 在本文件【之后】引入，其 #mbTabbar 基础样式
   无 !important，故此处全部用 !important 覆盖，确保 V3 玻璃优先。
   ============================================================ */
@media(max-width:767px){

  /* ---------- 底部标签栏：主题色实底（2026-10-23 用户：「白色太淡，跟内容混为一体」→ 改用 UI 色） ----------
     85% 实色主题色 + 微弱提亮，避免早期 26% 半透明那种灰蓝浑浊；
     保留顶部高光边 + 柔影以体现 V3 玻璃基因。图标/文字转白保证可读。 */
  html.ui-v3 #mbTabbar{
    background: color-mix(in srgb, var(--primary) 85%, #fff) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    border-top: 1px solid color-mix(in srgb, var(--primary) 55%, #fff) !important;
    box-shadow: 0 -6px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
  /* 整条栏图标/文字转白（彩色底上可读）；当前页也保持白字 */
  html.ui-v3 #mbTabbar .mb-tab,
  html.ui-v3 #mbTabbar .mb-tab.active{ color:#fff !important; }
  /* 当前页：更深一档主题色 + 顶部白指示条 + 加粗 */
  html.ui-v3 #mbTabbar .mb-tab.active{
    background: color-mix(in srgb, var(--primary) 100%, #000 8%) !important;
  }
  html.ui-v3 #mbTabbar .mb-tab.active::before{
    background:#fff !important;
  }
  html.ui-v3 #mbTabbar .mb-tab.active .mb-label{
    font-weight:800;
  }
  /* 点按瞬态：白色薄雾（覆盖 mobile-nav 默认 rgba(0,0,0,.04)） */
  html.ui-v3 #mbTabbar .mb-tab:active{
    background: rgba(255,255,255,.18) !important;
  }

  /* ---------- 深色主题（暗夜/暗夜紫）：primary 是亮色，底需暗化以防白字不可读 ---------- */
  html.ui-v3.theme-dark #mbTabbar,
  html.ui-v3.theme-purple #mbTabbar{
    background: color-mix(in srgb, var(--primary) 30%, #14171c) !important;
    border-top-color: color-mix(in srgb, var(--primary) 60%, #14171c) !important;
  }
  html.ui-v3.theme-dark #mbTabbar .mb-tab.active,
  html.ui-v3.theme-purple #mbTabbar .mb-tab.active{
    background: color-mix(in srgb, var(--primary) 48%, #14171c) !important;
  }

  /* ---------- 「更多」宫格面板：同样玻璃质感，呼应底部栏 ---------- */
  html.ui-v3 #mbGrid{ background: rgba(20,24,28,.40) !important; }
  html.ui-v3 .mb-grid-panel{
    background: color-mix(in srgb, var(--panel) 80%, transparent) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    border-top: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  html.ui-v3.theme-dark .mb-grid-panel,
  html.ui-v3.theme-purple .mb-grid-panel{
    background: color-mix(in srgb, var(--panel) 62%, transparent) !important;
  }
  /* 宫格小卡：玻璃质感 */
  html.ui-v3 .mb-grid-item{
    background: color-mix(in srgb, var(--bg) 70%, transparent) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
  }
  html.ui-v3.theme-dark .mb-grid-item,
  html.ui-v3.theme-purple .mb-grid-item{
    background: color-mix(in srgb, var(--bg) 50%, transparent) !important;
  }
}