/* ============================================================
   style-topbar-v2.css — 顶栏单行自适应版（20260930TOPBARC）
   方案3（ResizeObserver 溢出感知）：
     单行 = [☰ 标题][筛选 chips…摘要 重置][管理工作台 语言]
     行尾 .tb-actions（工作台+语言成对）锚定最右；
     宽度不足时 topbar-v2.js 按 data-tblv=1/2/3 分级让位：
       L1 摘要收起+日期收窄 → L2 快捷档收起+间距收紧+标题收字
       → L3 工作台图标化+语言收窄+标题只留图标，永不换行；
     ≤900px 回退两行布局（分级关闭）。
   下拉美化：topbar 内 select 统一 appearance:none 自绘箭头
   + hover/focus 反馈。
   ============================================================ */

/* ---------- 整体：桌面单行（JS 分级兜住溢出），窄屏两行 ---------- */
.topbar { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px 8px; padding: 8px 22px; overflow: hidden; }
.topbar .tb-main {
  display: flex; align-items: center; gap: 0 8px;
  flex: 0 0 auto; min-width: 0;
}
.topbar .tb-filterrow {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 6px 8px;
  flex: 1 1 auto; min-width: 0;
}
/* 子项保持自然宽度：溢出由 JS 分级让位处理（可收缩会让 scrollWidth 永不超宽，分级失效） */
.topbar .tb-filterrow > * { flex-shrink: 0; }
/* hidden 显隐双保险（CSS display 会覆盖 [hidden]，本项目系统性坑） */
.topbar .tb-filterrow[hidden] { display: none !important; }
.topbar .topbar-title { margin-right: 4px; }
.topbar .tb-filter-label { margin-left: 2px; }

/* ---------- 行尾功能组：管理工作台 → 语言 成对锚定最右 ---------- */
.topbar .tb-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin-left: auto; /* 筛选行整体隐藏（如配件页）时仍锚定行尾 */
}
.topbar .tb-actions::before {
  content: ''; width: 1px; height: 20px; flex: none;
  background: var(--border-strong, #d4dbe8); margin-right: 6px;
}
.topbar .tb-filter-label {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 12px; font-weight: 800; color: var(--primary, #2563eb); letter-spacing: .5px;
  padding-right: 9px; border-right: 1px solid var(--border-strong, #d4dbe8); margin-right: 2px;
}
.topbar .tb-filter-label svg { width: 14px; height: 14px; flex: none; }

/* ---------- 下拉美化：appearance:none + 自绘箭头 + hover/focus ---------- */
.topbar .filter-chip select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 2px 17px 2px 5px; border: 1px solid transparent; border-radius: 6px;
  background-color: var(--th-bg, #f7f9fc);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center; background-size: 9px 6px;
  cursor: pointer; font-family: inherit;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.topbar .filter-chip select:hover {
  border-color: var(--primary, #2563eb); background-color: var(--primary-soft, #eef4ff);
}
.topbar .filter-chip select:focus {
  outline: none; border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px var(--primary-soft, #eef4ff);
}

/* 筛选条内 chips：28px 紧凑规格 */
.topbar .tb-filterrow .filter-chip {
  height: 28px; border-radius: 8px; padding: 0 9px 0 4px; gap: 6px;
  box-shadow: none;
}
.topbar .tb-filterrow .filter-chip .filter-icon {
  width: 20px; height: 20px; border-radius: 5px;
}
.topbar .tb-filterrow .filter-chip .filter-icon svg { width: 13px; height: 13px; }
.topbar .tb-filterrow .filter-chip select,
.topbar .tb-filterrow .filter-chip input { font-size: 12px; font-weight: 600; padding: 2px; }
.topbar .tb-filterrow .filter-chip select { padding: 2px 17px 2px 5px; }
.topbar .tb-filterrow .filter-chip input[type="month"],
.topbar .tb-filterrow .filter-chip input[type="date"] { min-width: 98px; }

/* 模块月份步进按钮（‹ ›）：主题变量化，替换原硬编码灰 */
.topbar .tb-mbtn {
  width: 19px; height: 19px; border-radius: 5px; border: 1px solid var(--border, #e7ebf3);
  background: var(--th-bg, #f7f9fc); color: var(--gray-600, #64748b); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0; flex: none; font-family: inherit;
  transition: color .12s, border-color .12s, background .12s;
}
.topbar .tb-mbtn:hover { color: var(--primary, #2563eb); border-color: var(--primary, #2563eb); background: var(--primary-soft, #eef4ff); }

/* 月份区间（方案B）：起→止分隔符 + 快捷档小按钮 */
.topbar .tb-range-sep { color: var(--gray-400, #b0bac9); font-size: 12px; font-weight: 700; flex: none; }
.topbar .tb-quick {
  display: inline-flex; align-items: center; height: 21px; padding: 0 8px; flex: none;
  border: 1px solid var(--border, #e7ebf3); background: var(--card, #fff); border-radius: 7px;
  font-size: 11px; font-weight: 600; color: var(--gray-600, #64748b); cursor: pointer; font-family: inherit;
  transition: color .12s, border-color .12s, background .12s;
}
.topbar .tb-quick:hover { color: var(--primary, #2563eb); border-color: var(--primary, #2563eb); background: var(--primary-soft, #eef4ff); }
.topbar .tb-quick.on { background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb); }

/* ---------- 行尾按钮：管理工作台 / 语言 ---------- */
/* 管理工作台：主题 soft 底胶囊（替换原硬编码 #3370ff） */
.topbar .tb-awb {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid transparent; background: var(--primary-soft, #eef4ff); color: var(--primary, #2563eb);
  border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  flex-shrink: 0; white-space: nowrap;
  transition: background .15s, box-shadow .15s;
}
.topbar .tb-awb svg { width: 13px; height: 13px; flex: none; }
.topbar .tb-awb:hover { background: #e0eaff; box-shadow: 0 2px 8px rgba(37, 99, 235, .14); }

/* 语言：30px 紧凑胶囊（图标 + 下拉，去底色图标块） */
.topbar .tb-actions .filter-chip.lang-chip {
  height: 30px; padding: 0 8px 0 8px; gap: 6px; border-radius: 9px; box-shadow: none;
}
.topbar .tb-actions .filter-chip.lang-chip .filter-icon {
  width: auto; height: auto; background: transparent; border-radius: 0;
}
.topbar .tb-actions .filter-chip.lang-chip .filter-icon svg {
  width: 14px; height: 14px; color: var(--gray-500, #94a3b8);
}
.topbar .tb-actions .filter-chip.lang-chip select { min-width: 0; max-width: 76px; padding: 2px 16px 2px 4px; }

/* ---------- 尾部：范围摘要 + 重置 ---------- */
.topbar .tb-scope-summary {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11.5px; color: var(--gray-600, #64748b); white-space: nowrap; min-width: 0;
}
.topbar .tb-scope-summary .tb-sum-text {
  color: var(--primary, #2563eb); font-weight: 700;
  max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .tb-reset {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; flex-shrink: 0;
  border: 1px solid var(--border, #e7ebf3); background: var(--card, #fff); border-radius: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--gray-600, #64748b); cursor: pointer;
  font-family: inherit; transition: color .15s, border-color .15s, background .15s;
}
.topbar .tb-reset svg { width: 12px; height: 12px; flex: none; }
.topbar .tb-reset:hover { color: var(--red, #dc2626); border-color: #fecaca; background: var(--red-soft, #fef2f2); }

/* ---------- 分级让位（topbar-v2.js 写 data-tblv，仅单行模式；规则累积） ----------
   L1+：摘要收起 + 日期收窄 */
.topbar[data-tblv="1"] .tb-scope-summary,
.topbar[data-tblv="2"] .tb-scope-summary,
.topbar[data-tblv="3"] .tb-scope-summary { display: none !important; }
.topbar[data-tblv="1"] .filter-chip input[type="date"],
.topbar[data-tblv="1"] .filter-chip input[type="month"],
.topbar[data-tblv="2"] .filter-chip input[type="date"],
.topbar[data-tblv="2"] .filter-chip input[type="month"],
.topbar[data-tblv="3"] .filter-chip input[type="date"],
.topbar[data-tblv="3"] .filter-chip input[type="month"] { min-width: 84px; }
/* L2+：快捷档收起 + 字段名收起（图标表意）+ 筛选标签收起 + 间距收紧 + 标题收字 + chip 收边 */
.topbar[data-tblv="2"], .topbar[data-tblv="3"] { gap: 4px 6px; }
.topbar[data-tblv="2"] .tb-filterrow, .topbar[data-tblv="3"] .tb-filterrow { gap: 4px 6px; }
.topbar[data-tblv="2"] .tb-quick, .topbar[data-tblv="3"] .tb-quick { display: none !important; }
.topbar[data-tblv="2"] .tb-filterrow .filter-chip > span:not(.filter-icon):not(.range-sep):not(.tb-range-sep),
.topbar[data-tblv="3"] .tb-filterrow .filter-chip > span:not(.filter-icon):not(.range-sep):not(.tb-range-sep) { display: none; }
.topbar[data-tblv="2"] .tb-filter-label, .topbar[data-tblv="3"] .tb-filter-label { display: none; }
.topbar[data-tblv="2"] .topbar-title span, .topbar[data-tblv="3"] .topbar-title span {
  display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.topbar[data-tblv="2"] .tb-filterrow .filter-chip, .topbar[data-tblv="3"] .tb-filterrow .filter-chip { padding: 0 6px 0 3px; gap: 4px; }
.topbar[data-tblv="2"] .filter-chip input[type="date"],
.topbar[data-tblv="2"] .filter-chip input[type="month"],
.topbar[data-tblv="3"] .filter-chip input[type="date"],
.topbar[data-tblv="3"] .filter-chip input[type="month"] { min-width: 78px; }
/* L3：工作台图标化 + 语言收窄 + 标题只留图标 */
.topbar[data-tblv="3"] .tb-awb span { display: none; }
.topbar[data-tblv="3"] .tb-awb { width: 30px; padding: 0; justify-content: center; }
.topbar[data-tblv="3"] .tb-actions .filter-chip.lang-chip select { max-width: 56px; }
.topbar[data-tblv="3"] .topbar-title span { display: none; }

/* ---------- 窄屏适配：回退两行（分级由 JS 关闭；960 以下单行压尽仍会裁切，故取 960） ---------- */
@media (max-width: 960px) {
  .topbar { flex-wrap: wrap; padding: 4px 12px; overflow: visible; }
  .topbar .tb-main {
    display: flex; align-items: center; flex: 0 1 auto; min-width: 0;
    gap: 8px; padding: 6px 2px;
  }
  .topbar .tb-filterrow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    flex: 1 1 100%; padding: 6px 2px 8px;
    border-top: 1px solid var(--gray-100, #f1f5f9);
    background: linear-gradient(180deg, rgba(238, 244, 255, .45), rgba(255, 255, 255, 0) 70%);
  }
  .topbar .tb-filterrow[hidden] { display: none !important; }
  .topbar .tb-actions { order: 1; margin-left: auto; }
  .topbar .tb-filterrow { order: 2; }
  .topbar .tb-actions::before { display: none; }
  .topbar .tb-scope-summary { display: none; }
  .topbar .tb-actions .tb-awb span { display: none; }
  .topbar .tb-actions .tb-awb { width: 30px; padding: 0; justify-content: center; }
}