/* =========================================================
 * base.css —— 基类模板全局样式（2.0 从 base.html 内联外移）
 * 导航布局 / 表格响应式 / 拼音候选 / 次级页字号 / 悬浮表头 / 回顶按钮
 * 统一由 templates/base.html 引入，带 asset_version 版本号便于缓存刷新
 * ========================================================= */
/* 桌面端（>=lg）系统设置下拉菜单支持悬停展开；移动端折叠导航保持点击展开 */
@media (min-width: 992px) {
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}
/* 桌面端整体留白：导航栏与内容区限宽居中，左右各留白不小于屏幕宽度10%
   1920px 屏时内容占 80vw、两侧各 10vw；超大屏上限 1600px，留白更宽。
   手机端（<992px）保持 100% 宽度，沿用各页移动端布局（如 qc_test_panels 卡片式） */
.app-shell {
  width: 100%;
}
@media (min-width: 992px) {
  .app-shell {
    width: min(86vw, 1600px);
    margin-left: auto;
    margin-right: auto;
  }
}
/* 导航栏：全宽、高度降低、字号14px加粗 */
.navbar {
  padding-top: .17rem !important;
  padding-bottom: .17rem !important;
}
.navbar .navbar-brand {
  padding-top: .106rem !important;
  padding-bottom: .106rem !important;
  margin: 0 6px 0 0 !important;
  font-size: 14px;
  font-weight: 700;
}
.navbar .nav-link {
  padding-top: .17rem !important;
  padding-bottom: .17rem !important;
  font-size: 14px;
  font-weight: 700;
}
.navbar .navbar-toggler {
  padding: .1rem .375rem !important;
}
/* ===== 桌面端（>=992px）：导航栏始终横向展开 ===== */
@media (min-width: 992px) {
  .navbar-expand {
    flex-wrap: wrap !important;
    row-gap: .1rem;
  }
  .navbar-expand .navbar-toggler {
    display: none !important;
  }
  .navbar-expand .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .25rem;
    row-gap: .1rem;
  }
  .navbar-expand .navbar-nav {
    flex-wrap: wrap;
    align-items: center;
    row-gap: .1rem;
  }
  .navbar-expand .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .navbar-expand .navbar-nav .nav-link {
    white-space: nowrap;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }
  /* 右侧帐号/公告组：与左侧菜单组分离，始终靠右对齐 */
  .navbar-expand .navbar-collapse > .navbar-nav + .navbar-nav {
    margin-left: auto;
    flex-wrap: nowrap;
  }
}
/* ===== 手机/平板（<992px）：导航折叠为顶部三横杠，点击展开浮层面板 ===== */
@media (max-width: 991.98px) {
  /* 顶栏一行：品牌 + 三横杠按钮 */
  nav.navbar.navbar-system > .container-fluid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .navbar-expand .navbar-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    color: var(--nav-fg, var(--nav-color, #0f172a)) !important;
    background: transparent !important;
    padding: .22rem .3rem !important;
  }
  .navbar-expand .navbar-toggler .navbar-toggler-icon {
    width: 1.35rem;
    height: 1.35rem;
    filter: none;
  }
  /* 默认收起菜单 */
  .navbar-expand .navbar-collapse {
    display: none !important;
  }
  /* 展开：浮层盖在内容上方，不推挤页面内容，sticky 基准不变 */
  .navbar-expand.nav-open .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1032;
    max-height: calc(100vh - var(--nav-ht, 56px) - 10px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--nav-bg, #ffffff);
    border-bottom: 1px solid var(--crm-border, #e2e8f0);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
    padding: .4rem .7rem .55rem;
  }
  .navbar-expand.nav-open .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    row-gap: .08rem;
  }
  .navbar-expand.nav-open .navbar-nav .nav-item {
    display: block;
    flex: none;
  }
  .navbar-expand.nav-open .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    white-space: nowrap;
    padding: .5rem .6rem !important;
    margin: 0;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 14px;
  }
  .navbar-expand.nav-open .navbar-nav .nav-link.dropdown-toggle::after {
    margin-left: auto;
  }
  /* 二级菜单在展开面板内做静态列表展示（点击父级展开/收起） */
  .navbar-expand.nav-open .dropdown-menu {
    position: static !important;
    float: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 .15rem .95rem;
    margin: 0;
  }
  .navbar-expand.nav-open .dropdown-menu .dropdown-item {
    padding: .42rem .6rem !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    white-space: normal;
    color: var(--nav-fg, var(--nav-color)) !important;
  }
  .navbar-expand.nav-open .dropdown-menu .dropdown-item:hover,
  .navbar-expand.nav-open .dropdown-menu .dropdown-item:focus {
    color: var(--nav-fg-hover, var(--nav-active)) !important;
  }
  .navbar-expand.nav-open .dropdown-divider {
    display: none !important;
  }
  /* 左侧主菜单与右侧帐号组之间加分隔线 */
  .navbar-expand.nav-open .navbar-collapse > .navbar-nav + .navbar-nav {
    margin-left: 0;
    border-top: 1px solid var(--crm-border, #e2e8f0);
    margin-top: .28rem;
    padding-top: .28rem;
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .navbar-expand .navbar-collapse > .navbar-nav + .navbar-nav {
    width: 100%;
    justify-content: flex-end;
    padding: .05rem .25rem .15rem 0;
  }
  /* 手机端导航视觉紧凑：菜单项透明无底色（导航深底时文字由脚本反色），
     折叠展开后的菜单文字只随导航背景反色调变化 */
  .navbar-system .navbar-nav .nav-link {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    border-radius: 8px;
    background: transparent;
    margin: .14rem 0;
  }
  .navbar-system .navbar-nav .nav-link.dropdown-toggle {
    background: transparent;
  }
  .navbar-system .navbar-brand {
    font-size: 13px;
  }
  .navbar-expand .navbar-nav .nav-link {
    font-size: 13px;
  }
}
/* 全站表格手机/窄屏显示优化：
   窄屏(<992px)所有表格字号与内边距适当缩小，避免撑破屏幕；
   手机(<768px)带表头的多列表格自动卡片化（JS 加 .table-carded），
   每行一张卡片、每格显示“表头: 内容”，操作/输入格保持原样 */
@media (max-width: 991.98px) {
  .table {
    font-size: .8rem;
  }
  .table td,
  .table th {
    padding: .35rem .4rem;
    word-break: break-word;
  }
}
@media (max-width: 767.98px) {
  .table.table-carded,
  .table.table-carded tbody,
  .table.table-carded tr,
  .table.table-carded td {
    display: block;
    width: 100%;
  }
  .table.table-carded thead {
    display: none;
  }
  .table.table-carded tbody {
    border: 0;
  }
  .table.table-carded tr {
    margin-bottom: .6rem;
    border: 1px solid #e3e8ef;
    border-radius: .5rem;
    padding: .3rem .55rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .table.table-carded td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    border: 0;
    padding: .28rem .35rem;
    text-align: left;
  }
  .table.table-carded td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: #64748b;
  }
  .table.table-carded td.cell-actions {
    display: block;
    text-align: left;
  }
  .table.table-carded td.cell-actions::before {
    content: none;
  }
  .table.table-carded td.cell-actions .btn {
    margin: .15rem .2rem .15rem 0;
  }
  .table.table-carded td.cell-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    text-align: left;
  }
  .table.table-carded td.cell-input::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: #64748b;
  }
  .table.table-carded td.cell-input .form-control,
  .table.table-carded td.cell-input .form-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 70%;
    font-size: .8rem;
    padding: .2rem .35rem;
  }
}
/* 客户详情-基本信息（无表头小表格）窄屏优化：
   手机(<768px)下改为"两行"布局：每行内字段依次竖排，
   表头(label)行左对齐、内容(value)行右对齐，整行宽度全部可用 */
@media (max-width: 767.98px) {
  .table-basic-info {
    border-collapse: separate;
    border-spacing: 0 .4rem;
  }
  .table-basic-info tbody,
  .table-basic-info tr {
    display: block;
    width: 100%;
  }
  .table-basic-info tr {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid #e3e8ef;
    border-radius: .5rem;
    margin-bottom: .4rem;
    padding: .3rem .55rem .45rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .table-basic-info th,
  .table-basic-info td {
    border: 0 !important;
    padding: .25rem .3rem;
    word-break: break-word;
    white-space: normal;
  }
  .table-basic-info th {
    font-weight: 600;
    color: #64748b;
    text-align: left;
    margin-top: .55rem;
  }
  .table-basic-info th:first-child { margin-top: 0; }
  .table-basic-info td {
    text-align: right;
    padding-bottom: .1rem;
  }
  .table-basic-info a {
    word-break: break-all;
  }
}
/* ===== 拼音候选输入框（PinyinCombo）=====
   用于「内容取自其它表字段」的输入框：在框内直接输入拼音首字母/全拼/汉字即可模糊筛选候选，
   可点选也可自由填写。取代原先「独立拼音筛选框 + 原生 select/datalist」的写法。 */
.pc-wrap { position: relative; }
.pc-menu {
  /* 用 fixed 定位：表格内的 .table-responsive 会裁剪 absolute 子元素，
     由 JS 按输入框位置计算坐标，保证任何容器内都能完整展开 */
  position: fixed;
  z-index: 1080;
  left: 0;
  top: 0;
  max-height: 264px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cfe3d6;
  border-radius: .375rem;
  box-shadow: 0 .35rem 1rem rgba(20, 60, 40, .16);
  display: none;
  -webkit-overflow-scrolling: touch;
}
.pc-menu.pc-open { display: block; }
.pc-item {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .34rem .55rem;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.45;
  border-bottom: 1px solid #f1f5f2;
}
.pc-item:last-child { border-bottom: 0; }
.pc-item:hover, .pc-item.pc-active { background: #eaf4ed; }
.pc-item .pc-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pc-item .pc-t b { color: #d97706; font-weight: 700; }
.pc-item .pc-s {
  flex: 0 0 auto;
  max-width: 42%;
  color: #7b8a80;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-empty { padding: .5rem .6rem; color: #8a9791; font-size: 12px; text-align: center; }
.pc-clear {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #9aa8a0;
  line-height: 1;
  padding: .1rem .3rem;
  cursor: pointer;
  font-size: 13px;
  display: none;
  z-index: 2;
}
.pc-wrap.pc-has-value .pc-clear { display: block; }
.pc-wrap .form-control { padding-right: 1.5rem; }
.pc-hint { color: #8a9791; font-size: 11px; margin-top: .15rem; }
@media (max-width: 767.98px) {
  .pc-menu { max-height: 44vh; }
}
/* ===== /拼音候选输入框 ===== */

/* 导航栏默认浅色方案（2026-09-06 视觉改版，参考华为开发者文档站）：
   白底导航 + 墨黑菜单文字 + 绿色品牌点缀 + 蓝色 hover 细节 + 红色危险项。
   若用户在「系统设置 → 导航栏外观」自定义主题，注入 CSS 会覆盖以下变量 */
:root {
  --nav-bg: #ffffff;
  --nav-color: #0f172a;           /* 菜单文字：墨黑 */
  --nav-active: #16a34a;          /* hover/active：品牌绿 */
  --nav-hover-bg: #f0fdf4;        /* hover 底色：淡绿 */
  --nav-dd-bg: #ffffff;
  --nav-dd-border: #e5e9f0;
  --nav-dd-text: #0f172a;
  --nav-dd-hover: #f0fdf4;
  --brand-dot: #16a34a;           /* 品牌徽章圆点：品牌绿 */
  /* 菜单文字前景色：默认浅底中间深字；底部脚本会按导航栏实际背景亮度自动反色，
     深底导航自动换浅色文字并写回 --nav-fg（写在导航元素内联上，优先级最高） */
  --nav-fg: #334155;
  --nav-fg-hover: #15803d;
  --nav-dd-fg: #334155;
  --nav-dd-fg-hover: #15803d;
}
/* ===== 次级页面字号规范（方案总览 .qc-page 章节内容豁免）=====
   所有非 dashboard 页面统一基线：正文 13px / 表格内容 13px / 表头加粗。
   dashboard 主页面（page-dashboard）不应用；
   方案总览章节正文（.qc-page 作用域）保留自身大字号设计。
   qc_eval 页面（qc_eval.html）已恢复纳入全局字号规范，不再单独豁免。 */
body.page-app { font-size: 13px; }
body.page-app h1:not(.qc-page h1),
body.page-app h2:not(.qc-page h2),
body.page-app h3:not(.qc-page h3),
body.page-app h4:not(.qc-page h4),
body.page-app h5:not(.qc-page h5),
body.page-app h6:not(.qc-page h6) {
  font-size: 14px;
  font-weight: 700;
}
body.page-app .table { font-size: 13px; }
body.page-app .table thead th { font-weight: 700; }
/* 表格内交互元素补偿：badge/按钮若继承 10px 会小到不可读 */
body.page-app .table .badge { font-size: .72rem; }
body.page-app .table .btn { font-size: .78rem; }
body.page-app .table .form-control,
body.page-app .table .form-select { font-size: .78rem; }
/* ===== /次级页面字号规范 ===== */
/* ===== 列表页表头统一样式（对齐产品/客户列表观感，dashboard 不套用） =====
   白底表头 + 2px 细分割线 + 列名不折行；表体单元格垂直居中、行距统一。
   含 sticky/冻结列的页面（产品、客户）白底不受影响。 */
body.page-app .card .table thead th{
  background:#fff;
  color:var(--crm-ink);
  border-bottom:2px solid var(--crm-border);
  vertical-align:middle;
  white-space:nowrap;
  padding:.55rem .6rem;
  letter-spacing:.2px;
}
body.page-app .card .table tbody td{
  vertical-align:middle;
  padding:.45rem .6rem;
}
body.page-app .card .table-hover > tbody > tr:hover{
  background:#f5f8fc;
}
/* 时间/序号等固定列显示不换行（在各自 td 加 class="cell-nowrap" 时生效） */
body.page-app .table .cell-nowrap{white-space:nowrap}
/* ===== /列表页表头统一样式 ===== */
/* ===== 表头悬浮（tbl-fixed）：卡片内限高滚动区，表头吸附在滚动区顶部，
   页面再怎么滚动表头都保持可见（与产品表同款"内外两层"结构） ===== */
body.page-app .tbl-fixed{
  max-height: calc(100vh - var(--nav-ht, 56px) - 176px);
  overflow-y: auto;
}
body.page-app .tbl-fixed thead th{
  position: sticky !important;
  top: 0;
  background: #fff;
  z-index: 3;
  box-shadow: 0 1px 0 var(--crm-border);
}
body.page-app .tbl-fixed.table-hover > tbody > tr:hover > th{ background:#fff; }
@media (max-width: 767.98px){
  body.page-app .tbl-fixed{ max-height:none; overflow-y:visible; }
  body.page-app .tbl-fixed thead th{ position:static !important; box-shadow:none; }
}
/* ===== /表头悬浮 ===== */
/* 导航栏：白底浅色 + 底部细分割线（华为顶栏风格）。若用户注入导航主题，
   背景色与文字色以注入 CSS 为准；hover 交互细节保留浅色风格 */
.navbar.navbar-system {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--crm-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
/* 品牌标识：绿色圆点徽章 + 反色系统名（文字随导航背景亮度自动取反色调） */
.navbar-system .navbar-brand {
  color: var(--nav-fg, var(--nav-color)) !important;
}
.navbar-system .navbar-brand::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-dot);
  margin-right: 8px;
  vertical-align: 1px;
  box-shadow: 0 0 0 3px var(--nav-hover-bg);
}
.navbar-system .navbar-brand:hover,
.navbar-system .navbar-brand:focus {
  color: var(--nav-fg, var(--nav-color)) !important;
}
/* 菜单项：文字用导航背景反色调；hover/点击只变文字色、不变底色 */
.navbar-system .navbar-nav .nav-link {
  color: var(--nav-fg, var(--nav-color)) !important;
  border-radius: 999px;
  padding-left: .7rem !important;
  padding-right: .7rem !important;
}
.navbar-system .navbar-nav .nav-link:hover,
.navbar-system .navbar-nav .nav-link:focus {
  color: var(--nav-fg-hover, var(--nav-active)) !important;
  background: transparent !important;
}
.navbar-system .navbar-nav .nav-link:active {
  color: var(--nav-fg-hover, var(--nav-active)) !important;
  background: transparent !important;
}
/* 导航二级菜单：面板背景保持原样，项文字用反色调；hover 只变文字不变底色 */
.navbar-system .dropdown-menu {
  background: var(--nav-dd-bg) !important;
  border: 1px solid var(--nav-dd-border) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}
.navbar-system .dropdown-menu .dropdown-item {
  color: var(--nav-dd-fg, var(--nav-dd-text)) !important;
  font-size: 14px !important;
}
.navbar-system .dropdown-menu .dropdown-item:hover,
.navbar-system .dropdown-menu .dropdown-item:focus {
  background: transparent !important;
  color: var(--nav-dd-fg-hover, var(--nav-active)) !important;
  font-weight: 700 !important;
}
.navbar-system .dropdown-divider {
  border-color: var(--nav-dd-border) !important;
}
/* 导航栏悬浮置顶：任意屏幕、任意滚动位置，导航栏始终吸附在页面顶部可见 */
.navbar.navbar-system {
  position: sticky !important;
  top: 0;
  z-index: 1030;
}
/* 导航深底（脚本判定后加 nav-dark）：三横杠图标反白，与菜单文字反色一致 */
.navbar-system.nav-dark .navbar-toggler .navbar-toggler-icon {
  filter: invert(1) brightness(2);
}
/* 回顶悬浮按钮：半透明圆钮，滚动后淡入，点击平滑回到顶部 */
#backTop {
  position: fixed;
  right: 18px;
  bottom: 41px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, .55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 1050;
  box-shadow: 0 2px 10px rgba(15,23,42,.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
#backTop.show {
  display: flex;
}
#backTop:hover {
  background: rgba(37, 99, 235, .9);
  transform: translateY(-2px);
}