/* ============================================================
   火灵ERP · 表头赛博科技组件 table-pro v1.0（R1 表头视觉 / R2 菜单视觉）
   落地：豆包 2026-10-25，10轮「菜单+表头」精细化第一、二轮
   - 高特异性选择器覆盖 81/91 页内联 th 样式（不破坏布局，仅强化视觉）
   - 渐变辉光表头 + 排序指示状态 + 粘性表头发光阴影 + hover 行荧光
   - 菜单工具栏赛博强化（渐变描边按钮 / 发光分组 / 玻璃拟态筛选区）
   - 配合 column-settings.js（R3+）使用：表头字段设置面板 / 折叠记忆 / 自定义字段
   - 零外部素材，系统字体，纯 CSS 原创；署名 东莞市世炬科技有限公司 李培俊
   ============================================================ */

/* ---------- R1 表头赛博视觉（高特异性覆盖内联 th） ---------- */
/* 渐变科技表头：深蓝渐变 + 底部辉光线 + 顶部高光 */
table thead th,
table.fz thead th,
table.erp thead th,
table.wrap thead th {
  background: linear-gradient(180deg, #123c7e 0%, #0e2a5c 60%, #0b1e4a 100%) !important;
  color: #e8f1ff !important;
  font-weight: 600;
  letter-spacing: .5px;
  border-bottom: 2px solid rgba(14,111,255,.55) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 3px 10px rgba(2,20,60,.28);
  transition: background .2s, box-shadow .2s, color .2s;
}
/* 表头顶部高光线 */
table thead th::before,
table.fz thead th::before,
table.erp thead th::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,163,255,.8), transparent);
  pointer-events: none;
}
/* 表头悬浮辉光 */
table thead th:hover {
  background: linear-gradient(180deg, #1a55b8 0%, #13409b 60%, #0e2a5c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(14,111,255,.55), 0 3px 10px rgba(2,20,60,.3);
}

/* 排序指示：th.col-sort-asc / col-sort-desc 由排序逻辑驱动 */
table thead th.col-sort-asc::after,
table.erp thead th.col-sort-asc::after {
  content: '▲' !important;
  font-size: 10px;
  color: #00c6ff !important;
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  text-shadow: 0 0 6px rgba(0,198,255,.8);
}
table thead th.col-sort-desc::after,
table.erp thead th.col-sort-desc::after {
  content: '▼' !important;
  font-size: 10px;
  color: #00c6ff !important;
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  text-shadow: 0 0 6px rgba(0,198,255,.8);
}
/* 默认排序箭头（未排序时淡显） */
table thead th.sortable::after,
table.erp thead th.sortable::after {
  content: '▾';
  font-size: 12px;
  color: rgba(255,255,255,.35);
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
}

/* 数据行 hover 荧光 + 斑马纹科技化 */
table tbody tr:hover td {
  background: rgba(14,111,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(14,111,255,.18);
}
table tbody tr:nth-child(even) td {
  background: rgba(14,111,255,.02);
}

/* 表头字段设置面板入口按钮（由 column-settings.js 注入到工具栏） */
.hcol-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #0e6fff, #00c6ff);
  color: #fff; border: none; border-radius: 18px;
  padding: 6px 14px; font-size: 11.5px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(14,111,255,.35);
  transition: all .18s;
}
.hcol-btn:hover { box-shadow: 0 6px 18px rgba(14,111,255,.5); transform: translateY(-1px); filter: brightness(1.08); }
.hcol-btn svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

/* 表头字段设置面板（赛博玻璃拟态） */
.hcol-panel {
  position: fixed; right: 24px; top: 64px; z-index: 1001;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(14,111,255,.25);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(2,20,60,.22), inset 0 1px 0 rgba(255,255,255,.8);
  min-width: 260px; max-height: 70vh; overflow-y: auto;
  font-size: 12px; display: none;
}
.hcol-panel.on { display: block; }
.hcol-panel .hp-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; color: #0e2a5c; font-weight: 700; font-size: 12.5px;
  background: linear-gradient(90deg, #e8f1fc, #f6fafd);
  border-bottom: 1px solid rgba(14,111,255,.15);
  position: sticky; top: 0;
}
.hcol-panel .hp-hd .hp-x { cursor: pointer; color: #7AA7D0; font-size: 14px; padding: 0 4px; }
.hcol-panel .hp-hd .hp-x:hover { color: #0e6fff; }
.hcol-panel .hp-opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer;
  color: #1a1b1c; transition: background .12s;
}
.hcol-panel .hp-opt:hover { background: rgba(14,111,255,.07); }
.hcol-panel .hp-opt input[type=checkbox] { width: 15px; height: 15px; accent-color: #0e6fff; cursor: pointer; }
.hcol-panel .hp-opt.off { color: #9aa5b1; text-decoration: line-through; }
.hcol-panel .hp-acts {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid rgba(14,111,255,.12);
  position: sticky; bottom: 0; background: rgba(255,255,255,.96);
}
.hcol-panel .hp-acts button {
  flex: 1; border: 1px solid rgba(14,111,255,.3); background: #fff; color: #0e6fff;
  border-radius: 8px; padding: 6px 0; font-size: 11.5px; cursor: pointer; transition: all .15s;
}
.hcol-panel .hp-acts button:hover { background: #eaf3ff; box-shadow: 0 0 0 3px rgba(14,111,255,.12); }

/* ---------- R2 菜单工具栏赛博强化（覆盖 ltbar / toolbar / 分组） ---------- */
.ltbar, .toolbar {
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(248,250,252,.9));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(14,111,255,.12);
  border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 4px 18px rgba(2,20,60,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.ltbar .ltbtn, .toolbar .ltbtn, .ltbar .btn, .toolbar .btn, .ltbar .btn-sm, .toolbar .btn-sm {
  border-radius: 8px;
  border: 1px solid rgba(14,111,255,.22);
  background: linear-gradient(180deg, #fff, #f3f7fc);
  color: #27415f;
  transition: all .15s;
}
.ltbar .ltbtn:hover, .toolbar .ltbtn:hover,
.ltbar .btn:not(.btn-primary):not(.btn-danger):hover,
.toolbar .btn:not(.btn-primary):not(.btn-danger):hover {
  border-color: #0e6fff; color: #0e6fff;
  box-shadow: 0 0 0 3px rgba(14,111,255,.12), 0 4px 14px rgba(14,111,255,.18);
  transform: translateY(-1px);
}
.ltbar .ltbtn.active {
  background: linear-gradient(135deg, #0e6fff, #00c6ff); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(14,111,255,.4);
}
/* 工具栏内分组间距与分隔线 */
.ltbar .grp-sep, .toolbar .grp-sep {
  width: 1px; height: 20px; background: linear-gradient(180deg, transparent, rgba(14,111,255,.35), transparent);
  margin: 0 6px; flex: none;
}
/* 页头渐变标题增强（已由 erp-common 提供，这里补光晕） */
.page-header h1 {
  filter: drop-shadow(0 1px 6px rgba(14,111,255,.25));
}
/* 搜索/筛选区玻璃拟态强化 */
.top-search, .filter-bar, .search-bar {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 4px 24px rgba(2,20,60,.10), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ============================================================
   R6 · Excel型列头筛选（配合 header-filter.js）
   ============================================================ */
/* 表头筛选触发按钮 ▾ */
table thead th .hf-trigger {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  transition: all .15s;
  line-height: 1;
  user-select: none;
}
table thead th .hf-trigger:hover {
  color: #fff;
  background: rgba(0,198,255,.35);
  box-shadow: 0 0 8px rgba(0,198,255,.6);
}
table thead th.hf-active .hf-trigger {
  color: #00c6ff;
  background: rgba(0,198,255,.18);
  box-shadow: 0 0 8px rgba(0,198,255,.5);
}
html[data-theme] table thead th .hf-trigger { color: var(--brand2, #00c6ff); }
html[data-theme] table thead th .hf-trigger:hover { background: var(--glow, rgba(14,111,255,.35)); }
html[data-theme="classic-light"] table thead th .hf-trigger { color: var(--brand, #2563eb); }

/* 筛选面板（Excel 风格下拉） */
.hf-panel {
  position: fixed;
  z-index: 1003;
  width: 280px;
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(14,111,255,.28);
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(2,20,60,.26), inset 0 1px 0 rgba(255,255,255,.85);
  font-size: 12px;
  display: none;
}
.hf-panel.on { display: block; }
.hf-panel .hf-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  color: #0e2a5c; font-weight: 700; font-size: 12.5px;
  background: linear-gradient(90deg, #e8f1fc, #f6fafd);
  border-bottom: 1px solid rgba(14,111,255,.15);
  position: sticky; top: 0;
}
.hf-panel .hf-hd .hf-x { cursor: pointer; color: #7AA7D0; font-size: 14px; padding: 0 4px; }
.hf-panel .hf-hd .hf-x:hover { color: #0e6fff; }
.hf-panel .hf-sec { padding: 9px 14px; border-bottom: 1px solid rgba(14,111,255,.08); }
.hf-panel .hf-sec-hd {
  font-size: 10.5px; color: #6b7280; letter-spacing: 1px;
  margin-bottom: 6px; font-weight: 600;
}
.hf-panel .hf-sec-hd .hf-cnt { color: #0e6fff; }
.hf-panel .hf-row { display: flex; gap: 6px; align-items: center; }
.hf-panel .hf-btn {
  flex: 1;
  border: 1px solid rgba(14,111,255,.25);
  background: linear-gradient(180deg, #fff, #f3f7fc);
  color: #27415f;
  border-radius: 7px;
  padding: 5px 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.hf-panel .hf-btn:hover {
  border-color: #0e6fff; color: #0e6fff;
  box-shadow: 0 0 0 3px rgba(14,111,255,.1);
}
.hf-panel .hf-btn.hf-apply {
  background: linear-gradient(135deg, #0e6fff, #00c6ff);
  color: #fff; border-color: transparent;
  font-weight: 600;
}
.hf-panel .hf-val {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 2px; cursor: pointer; border-radius: 4px;
  transition: background .1s;
}
.hf-panel .hf-val:hover { background: rgba(14,111,255,.06); }
.hf-panel .hf-val input { accent-color: #0e6fff; width: 14px; height: 14px; flex: none; }
.hf-panel .hf-val span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #1a1b1c;
}
.hf-panel .hf-acts {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid rgba(14,111,255,.12);
  position: sticky; bottom: 0; background: rgba(255,255,255,.97);
}