/* CJ-Cloud 标准 AppBar 样式
 * 在 9 个网页端原型 <head> 里通过 <link rel="stylesheet" href="../_shared/appbar.css"> 引入
 * 标准源：派工/生产订单-网页端.html
 *
 * 关键布局/颜色用 !important 防御各页内联 <style> 改写
 * Tokens 兜底用 hardcode (var fallback)，保证 :root 没定义也能渲染
 */

/* ========== 顶部系统栏 ========== */
.system-bar {
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #eef0f1 !important;
  color: var(--gray-700, #343B3D) !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.system-bar .sb-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
}
.system-bar .brand-mark {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  flex-shrink: 0 !important;
  object-fit: contain;
}
.system-bar .sb-sep {
  width: 1px !important;
  height: 14px !important;
  background: #d6dadc !important;
  display: inline-block !important;
  flex-shrink: 0;
}
.system-bar .sb-company {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  color: var(--primary, #1A835C) !important;
  font-weight: 400 !important;
}
.system-bar .sb-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none;
}
.system-bar .sb-center .cj-logo {
  height: 14px !important;
  width: auto !important;
  display: block !important;
}
.system-bar .sb-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 12px !important;
  color: var(--gray-600, #5A6264) !important;
}
.system-bar .sb-lang {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  color: var(--gray-700, #343B3D) !important;
  cursor: pointer;
}
.system-bar .sb-lang svg { color: var(--gray-500, #6F787A); }
.system-bar .sb-env {
  color: var(--primary, #1A835C) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.system-bar .sb-icon {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gray-500, #6F787A) !important;
  position: relative !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  background: transparent !important;
}
.system-bar .sb-icon:hover {
  background: #f3f4f5 !important;
  color: var(--gray-700, #343B3D) !important;
}
.system-bar .sb-icon .pip {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  min-width: 16px !important;
  height: 14px !important;
  padding: 0 4px !important;
  background: var(--red, #DF3630) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.system-bar .sb-version {
  font-size: 12px !important;
  color: var(--primary, #1A835C) !important;
  padding-left: 6px !important;
}

/* ========== Tab 栏 ========== */
.tab-bar {
  height: 30px !important;
  display: flex !important;
  align-items: stretch !important;
  background: var(--primary, #1A835C) !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  /* 页签多到放不下时横向滚动，而不是被挤压/裁切；滚动条隐藏 */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
.tab-bar::-webkit-scrollbar { display: none !important; }
.tab-bar .tab-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 18px !important;
  width: auto !important;
  color: #fff !important;
  /* 横向滚动时钉在最左侧，用主色实底盖住从下方划过的页签 */
  position: sticky !important;
  left: 0 !important;
  z-index: 5 !important;
  flex-shrink: 0 !important;
  background: var(--primary, #1A835C) !important;
}
.tab-bar .tab-left .sb-icon,
.tab-bar .tab-left .sys-icon {
  color: #fff !important;
  background: transparent !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transform: none !important;
}
.tab-bar .tab-left .sb-icon:hover,
.tab-bar .tab-left .sys-icon:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.tab-bar .tab {
  position: relative !important;
  min-width: 72px !important;
  height: 30px !important;
  flex: 0 0 auto !important;        /* 不被挤压，保持自身宽度，多了就横向滚动 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 0 12px !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  transition: background .15s, color .15s, margin-top .15s, height .15s, padding-bottom .15s, border-radius .15s !important;
}
.tab-bar .tab:not(.active):not(.is-active):hover {
  margin-top: 6px !important;
  height: 24px !important;
  padding-bottom: 4px !important;
  background: var(--primary-light, #E4F3ED) !important;
  color: var(--primary, #1A835C) !important;
  border-radius: 8px 8px 0 0 !important;
}
.tab-bar .tab.active,
.tab-bar .tab.is-active {
  margin-top: 6px !important;
  height: 24px !important;
  padding-bottom: 4px !important;
  background: #fff !important;
  color: var(--primary, #1A835C) !important;
  font-weight: 400 !important;
  border-radius: 8px 8px 0 0 !important;
}
.tab-bar .tab .close,
.tab-bar .tab .tab-label {
  font-weight: inherit !important;
}
.tab-bar .tab .tab-label {
  white-space: nowrap !important;   /* 标签不换行成两行 */
}
.tab-bar .tab .close {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  color: rgba(255,255,255,.55) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  transition: background .15s, color .15s, transform .15s !important;
}
.tab-bar .tab .close::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") no-repeat center / contain !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") no-repeat center / contain !important;
}
.tab-bar .tab .close:hover {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}
.tab-bar .tab:not(.active):not(.is-active):hover .close {
  color: var(--gray-500, #6F787A) !important;
}
.tab-bar .tab:not(.active):not(.is-active):hover .close:hover {
  background: rgba(0,0,0,.06) !important;
  color: var(--gray-800, #1F2527) !important;
}
.tab-bar .tab.active .close,
.tab-bar .tab.is-active .close {
  color: var(--gray-400, #8A9294) !important;
}
.tab-bar .tab.active .close:hover,
.tab-bar .tab.is-active .close:hover {
  background: var(--gray-100, #ECEFF0) !important;
  color: var(--gray-800, #1F2527) !important;
}

/* ===== 页签拖拽排序 ===== */
/* 让位 / 归位过渡：本规则在 .tab 之后，!important 同级靠后者生效，
   从而覆盖 .tab 自带的(不含 transform 的) transition，使 transform 可平滑过渡 */
.tab-bar .tab.cj-sliding {
  transition: transform .22s cubic-bezier(.2,.7,.3,1) !important;
}
/* 拖拽中：抬升整条标签栏层级 + 不裁剪，允许页签拖出本行并盖在下方内容上 */
.tab-bar.cj-tabbar-dragging {
  position: relative !important;
  z-index: 200 !important;
  overflow: visible !important;
}
/* 被拖起的页签：白底抬起、带阴影、轻微半透明、置顶并跟随鼠标 */
.tab-bar .tab.cj-dragging {
  opacity: .82 !important;
  z-index: 30 !important;
  background: #fff !important;
  color: var(--primary, #1A835C) !important;
  margin-top: 6px !important;
  height: 24px !important;
  padding-bottom: 4px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.30) !important;
  cursor: grabbing !important;
  pointer-events: none !important;
}

/* ===== 左树一键展开 / 收起按钮 =====
 * 统一为无底色的浅灰图标按钮；仅 hover / 键盘聚焦时出现轻微灰底反馈。
 * 使用 !important 覆盖历史页面里各自复制的旧版浅灰常驻底色。
 */
.tree-max {
  background: transparent !important;
  color: var(--gray-400, #9CA2A4) !important;
}
.tree-max:hover,
.tree-max:focus-visible,
.tree-max.is-collapsed {
  background: var(--gray-50, #F6F7F8) !important;
  color: var(--gray-500, #6B7571) !important;
}

/* ===== 行末悬浮操作 =====
 * design-contract: row-hover-actions-group
 * 用中性灰底遮住行内容；按钮保留 fill-0，前景色由页面按动作语义指定。
 */
tbody tr:hover .row-actions,
tbody tr:focus-within .row-actions,
tbody tr:hover [class*="-row-actions"],
tbody tr:focus-within [class*="-row-actions"],
[class*="row-action-portal"] {
  padding: 2px !important;
  border-radius: 4px !important;
  background: #F5F5F5 !important;
}
tbody tr:hover .row-actions > button,
tbody tr:focus-within .row-actions > button,
tbody tr:hover [class*="-row-actions"] > button,
tbody tr:focus-within [class*="-row-actions"] > button,
[class*="row-action-portal"] > button {
  background: var(--fill-0, rgba(52,59,56,.05)) !important;
}
tbody tr:hover .row-actions > button svg,
tbody tr:focus-within .row-actions > button svg,
tbody tr:hover [class*="-row-actions"] > button svg,
tbody tr:focus-within [class*="-row-actions"] > button svg,
[class*="row-action-portal"] > button svg {
  color: currentColor !important;
}
tbody tr:hover .row-actions > button svg[stroke]:not([stroke="none"]),
tbody tr:focus-within .row-actions > button svg[stroke]:not([stroke="none"]),
tbody tr:hover [class*="-row-actions"] > button svg[stroke]:not([stroke="none"]),
tbody tr:focus-within [class*="-row-actions"] > button svg[stroke]:not([stroke="none"]),
[class*="row-action-portal"] > button svg[stroke]:not([stroke="none"]),
tbody tr:hover .row-actions > button svg [stroke]:not([stroke="none"]),
tbody tr:focus-within .row-actions > button svg [stroke]:not([stroke="none"]),
tbody tr:hover [class*="-row-actions"] > button svg [stroke]:not([stroke="none"]),
tbody tr:focus-within [class*="-row-actions"] > button svg [stroke]:not([stroke="none"]),
[class*="row-action-portal"] > button svg [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}
tbody tr:hover .row-actions > button svg:not([fill="none"]),
tbody tr:focus-within .row-actions > button svg:not([fill="none"]),
tbody tr:hover [class*="-row-actions"] > button svg:not([fill="none"]),
tbody tr:focus-within [class*="-row-actions"] > button svg:not([fill="none"]),
[class*="row-action-portal"] > button svg:not([fill="none"]),
tbody tr:hover .row-actions > button svg [fill]:not([fill="none"]),
tbody tr:focus-within .row-actions > button svg [fill]:not([fill="none"]),
tbody tr:hover [class*="-row-actions"] > button svg [fill]:not([fill="none"]),
tbody tr:focus-within [class*="-row-actions"] > button svg [fill]:not([fill="none"]),
[class*="row-action-portal"] > button svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}