/* ═════════════════════════════════════════════════════════
   treebox.css — 树形菜单（部首/构件）
   容器由 sidebar-card（main.css）提供
   ═════════════════════════════════════════════════════════ */

.treebox {
  width: 100%;
  margin: 0;
  background: transparent;
}

.menu {
  overflow: hidden;
  border: 1px solid var(--c-border-light, #EAE4DD);
  border-radius: var(--radius-md, 8px);
  margin: 0;
}

/* 一级菜单项 */
.menu li.level1 > a {
  display: block;
  height: 40px;
  line-height: 40px;
  color: var(--c-text, #2C2520);
  padding-left: 50px;
  border-bottom: 1px solid var(--c-border-light, #EAE4DD);
  font-size: 16px;
  font-weight: 600;
  position: relative;
  background: var(--c-surface-alt, #FAF7F3);
  transition: background 0.2s ease;
}

.menu li.level1 > a:hover {
  text-decoration: none;
  background: #F0E6D6;
}

.menu li.level1 > a.current {
  background: var(--c-primary, #8b411c);
  color: #FFF;
}

/* 图标 */
.ico {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  left: 20px;
  top: 10px;
  background-repeat: no-repeat;
  background-image: url(/zd/ids/css/ico1.png);
}

/* 箭头 */
.level1 i {
  width: 20px;
  height: 10px;
  background-image: url(/zd/ids/css/arrow.png);
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  transition: transform 0.2s ease;
}

.level1 i.down { background-position: 0 -10px; }

.ico1 { background-position: 0 0; }
.ico2 { background-position: 0 -20px; }
.ico3 { background-position: 0 -40px; }
.ico4 { background-position: 0 -60px; }
.ico5 { background-position: 0 -80px; }

/* 二级菜单 */
.menu li ul { overflow: hidden; }

.menu li ul.level2 {
  display: none;
  background: var(--c-surface, #FFF);
  padding: 6px;
}

/* 构件/部首标签 */
.r-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  border: 1px solid var(--c-border, #D6CEC6);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  margin: 2px 1px;
  background: var(--c-surface, #FFF);
  color: var(--c-text, #2C2520);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.r-i:hover {
  color: var(--c-primary, #8b411c);
  border-color: var(--c-primary, #8b411c);
  background: #FAF0E4;
}

.r-i img {
  vertical-align: middle;
  max-width: 20px;
  max-height: 20px;
}

/* ── 深色模式 ────────────────────────────────────── */
[data-theme="dark"] .menu li.level1 > a {
  color: var(--c-text, #E8E0D8);
  background: var(--c-surface-alt, #2E2926);
  border-color: var(--c-border, #3E3832);
}

[data-theme="dark"] .menu li.level1 > a:hover {
  background: #3A342E;
}

[data-theme="dark"] .menu li ul.level2 {
  background: var(--c-surface, #252120);
}

[data-theme="dark"] .r-i {
  background: var(--c-surface-alt, #2E2926);
  border-color: var(--c-border, #3E3832);
  color: var(--c-text, #E8E0D8);
}

[data-theme="dark"] .r-i:hover {
  border-color: var(--c-primary, #C9845A);
  color: var(--c-primary, #C9845A);
  background: #3A3028;
}