/*
 * 共享树形图组件 (Shared Thread Tree Component)
 * 从 main-hs.css / area-hscn.css / area-hsjp.css / area-hsus.css 提取的公共样式
 *
 * 包含：
 *   - thread-cell   — 树节点容器 + 层级左边框色
 *   - thread-row    — 表格行
 *   - indent-0~4    — 层级缩进
 *   - thread-toggle — 展开/折叠按钮
 */

/* ── CSS 变量（各 Area 可在 :root 中覆盖） ── */
:root {
  --thread-level-1-color: var(--so-black-225);
  --thread-level-2-color: var(--so-black-225);
  --thread-level-3-color: var(--so-black-225);
  --thread-level-4-color: var(--so-black-225);
  --thread-level-leaf-color: var(--so-brand-orange);
  --thread-level-1-bg: transparent;
  --thread-border-width: 2px;
  --thread-hover-bg: var(--so-black-150);
  --thread-indent-step: 12px;
}

/* ── Table Row ── */
.thread-row td {
  padding: 0;
  border-bottom: 1px solid var(--hsc-gray-border, #E3E6E8);
  vertical-align: middle;
  font-size: 14px;
  color: var(--hsc-gray-text, #333);
  background: #fff;
}

/* ── Tree Cell ── */
.thread-cell {
  display: flex;
  align-items: center;
  padding: var(--su8) var(--su12);
  min-height: 42px;
  border-left-width: var(--thread-border-width);
  border-left-style: solid;
  transition: background-color 0.1s, padding-left 180ms ease;
}

.thread-row:hover .thread-cell {
  background-color: var(--thread-hover-bg);
}

/* ── Level Colors ── */
.level-1 {
  border-left-color: var(--thread-level-1-color);
  background: var(--thread-level-1-bg);
}
.level-2 { border-left-color: var(--thread-level-2-color); }
.level-3 { border-left-color: var(--thread-level-3-color); }
.level-4 { border-left-color: var(--thread-level-4-color); }
.level-leaf { border-left-color: var(--thread-level-leaf-color); }

/* ── Indent ── */
.indent-0 { padding-left: var(--su12); }
.indent-1 { padding-left: var(--su12); }
.indent-2 { padding-left: var(--su12); }
.indent-3 { padding-left: var(--su12); }
.indent-4 { padding-left: var(--su12); }

/* ── Toggle ── */
.thread-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: var(--su8);
  border: 1px solid var(--bs-border-color, #D6D9DC);
  background: #fff;
  color: #636B74;
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  margin-top: 3px;
  transition: width 180ms ease, max-width 180ms ease, margin-right 180ms ease, opacity 180ms ease, border-width 180ms ease;
}

.thread-toggle:hover {
  border-color: var(--bs-border-color, #D6D9DC);
  color: #0C0D0E;
}

.hidden-toggle { visibility: hidden; }

/* ── Small shared extensions ── */
.code-pill del {
  color: gray;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.level-leaf .code-pill { color: #1B75D0; }
.node-link:hover .code-pill { text-decoration: underline; }
.expired { opacity: 0.6; text-decoration: line-through; }