/* 全局样式和 CSS 变量定义 */
:root {
  /* 基础颜色 */
  --app-bg-color: #ffffff;       /* 应用背景色 */
  --text-color: #333333;         /* 主要文字颜色 */
  --text-color-secondary: #666666; /* 次要文字颜色 */
  --border-color: #cccccc;       /* 边框颜色 */
  --link-color: #333;            /* 链接颜色 */
  --link-hover-color: #0056b3;   /* 链接悬停颜色 */
  --link-active-color: #007bff;   /* 激活链接/主题色 */

  /* 组件颜色 */
  --header-bg-color: #f0f0f0;     /* 头部背景色 */
  --footer-bg-color: #f0f0f0;     /* 底部背景色 */
  --button-bg-color: #007bff;     /* 按钮背景色 */
  --button-text-color: #ffffff;   /* 按钮文字颜色 */
  --button-hover-bg-color: #0056b3;/* 按钮悬停背景色 */
  --icon-color: var(--text-color-secondary); /* 图标颜色 */
  --icon-hover-color: var(--link-hover-color); /* 图标悬停颜色 */
  --split-line-color: var(--border-color); /* 分割线颜色 */
  --split-line-hover-color: var(--border-color); /* 分割线悬停颜色 */
  --input-focus-border-color: var(--link-active-color); /* 输入框聚焦边框颜色 */
  --input-focus-glow: var(--link-active-color); /* 输入框聚焦光晕值 */

  /* 字体 */
  --font-family-sans-serif: sans-serif; /* 默认字体 */

  /* 其他 */
  --base-padding: 1rem;          /* 基础内边距 */
  --base-margin: 0.5rem;         /* 基础外边距 */
}

/* 应用基础样式 */
body {
  margin: 0; /* 移除默认 body margin */
  font-family: var(--font-family-sans-serif);
  background-color: var(--app-bg-color);
  color: var(--text-color);
  line-height: 1.6; /* 改善可读性 */
}

/* 全局链接样式 */
a {
  color: var(--link-color);
  text-decoration: none; /* 移除下划线 */
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline; /* 悬停时显示下划线 */
}

/* 全局图标样式 */
i, .fas, .far, .fab { /* 根据你使用的图标库调整选择器 */
  color: var(--icon-color);
  transition: color 0.2s ease;
}
a:hover i, a:hover .fas, a:hover .far, a:hover .fab, /* 链接内的图标 */
button:hover i, button:hover .fas, button:hover .far, button:hover .fab, /* 按钮内的图标 */
.icon-interactive:hover i, .icon-interactive:hover .fas, .icon-interactive:hover .far, .icon-interactive:hover .fab { /* 可交互图标容器 */
  color: var(--icon-hover-color);
}

/* 全局分割线样式 */
hr {
  border: none;
  border-top: 1px solid var(--divider-color);
  margin: var(--base-margin) 0;
}


/* 可以添加更多全局样式规则 */

/* 为 xterm 终端添加内边距 */

.xterm{
  padding: 10px 10px 10px 10px; 

}

/* 为历史记录和快捷命令列表设置字体 */
/* 注意：这里的选择器可能需要根据实际组件结构调整 */
.command-history-item,
.quick-command-item { /* 假设这些是列表项的类名 */
  font-family: var(--font-family-sans-serif);
}

/* 如果是 Element Plus 的 Table 组件 */
.el-table .cell {
  font-family: var(--font-family-sans-serif);
}

/* Override splitpanes default theme pane background */
.splitpanes.default-theme .splitpanes__pane {
    background-color: var(--app-bg-color) !important;
}

/* Style the splitpane splitter */
.splitpanes.default-theme .splitpanes__splitter {
  background-color: var(--app-bg-color) !important; /* Use important to ensure override */
  border-left: 1px solid var(--border-color); /* Add a subtle border */
  border-right: 1px solid var(--border-color);
  box-sizing: border-box;
  transition: background-color 0.2s ease; /* Add transition for hover effect */
}
.splitpanes.default-theme .splitpanes__splitter:hover {
  background-color: var(--link-active-color) !important; /* Highlight on hover, keep important */
}
.splitpanes--vertical > .splitpanes__splitter {
  width: 7px; /* Adjust width as needed */
  border-top: none;
  border-bottom: none;
}
.splitpanes--horizontal > .splitpanes__splitter {
  height: 7px; /* Adjust height as needed */
  border-left: none;
  border-right: none;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* Style scrollbars */
::-webkit-scrollbar {
  width: 8px; /* Width of vertical scrollbar */
  height: 8px; /* Height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: var(--app-bg-color); /* Scrollbar track background */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-color); /* Scrollbar handle color */
  border-radius: 4px;
  border: 2px solid var(--app-bg-color); /* Creates padding around thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color-secondary); /* Scrollbar handle hover color */
}

/* Input focus styles */
input:focus, textarea:focus, select:focus {
    border-color: var(--input-focus-border-color) !important; /* Use new variable, !important might be needed depending on specificity */
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--input-focus-glow-rgb), 0.2) !important; /* Use new variable, !important might be needed */
}