/*
 * 通用语法高亮解决方案 - VSCode Dark+ 主题
 * 支持所有编程语言，包括 Shell/Bash/Python/JavaScript 等
 */

/* 基础容器样式 - 支持主题切换 */
.article-content .highlight,
.article-content figure.highlight,
.article-content pre[class*="language-"] {
  background: var(--code-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  margin: 24px 0;
  padding: 0 !important; /* 清除容器padding */
  box-shadow: 0 2px 8px var(--shadow);
  position: relative;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  /* 不设置 overflow，让内层处理滚动 */
}

/* 代码内容样式 */
.article-content .highlight .code,
.article-content figure.highlight .code,
.article-content .highlight .code pre,
.article-content figure.highlight .code pre,
.article-content pre[class*="language-"] {
  background: var(--code-bg) !important;
  color: var(--text-color) !important;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 16px 20px !important; /* 代码内容的padding */
  margin: 0 !important;
  white-space: pre;
  overflow-x: auto;
  word-wrap: normal;
  word-break: normal;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* highlight.js 基础样式 */
.hljs {
  background: var(--code-bg) !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 通用语法高亮颜色 - 浅色主题 */

/* 注释 - 深绿色 */
.hljs-comment,
.hljs-quote,
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #008000 !important;
  font-style: italic;
}

/* 深色主题语法高亮颜色 */
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote,
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
  color: #6a9955 !important;
  font-style: italic;
}

/* 关键字 - 深蓝色 */
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name,
.token.keyword,
.token.atrule,
.token.attr-value {
  color: #0000ff !important;
}

[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .hljs-name,
[data-theme="dark"] .token.keyword,
[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value {
  color: #569cd6 !important;
}

/* 字符串 - 深红色 */
.hljs-string,
.hljs-meta-string,
.token.string,
.token.char,
.token.attr-name,
.token.selector {
  color: #a31515 !important;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-meta-string,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.selector {
  color: #ce9178 !important;
}

/* 数字 - 深绿色 */
.hljs-number,
.hljs-class,
.token.number,
.token.boolean,
.token.constant,
.token.symbol,
.token.property,
.token.tag {
  color: #098658 !important;
}

[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-class,
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag {
  color: #b5cea8 !important;
}

/* 函数名 - 深黄色/棕色 */
.hljs-title,
.hljs-section,
.hljs-function,
.hljs-params,
.hljs-formula,
.hljs-subst,
.token.function,
.token.class-name {
  color: #795e26 !important;
}

[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-section,
[data-theme="dark"] .hljs-function,
[data-theme="dark"] .hljs-params,
[data-theme="dark"] .hljs-formula,
[data-theme="dark"] .hljs-subst,
[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
  color: #dcdcaa !important;
}

/* 内置函数 - 深青色 */
.hljs-built_in,
.hljs-type,
.token.builtin {
  color: #267f99 !important;
}

[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .token.builtin {
  color: #4ec9b0 !important;
}

/* 变量 - 深蓝色 */
.hljs-variable,
.hljs-template-variable,
.hljs-attr,
.hljs-attribute,
.token.variable,
.token.regex {
  color: #001080 !important;
}

[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .token.variable,
[data-theme="dark"] .token.regex {
  color: #9cdcfe !important;
}

/* 操作符和标点 */
.hljs-operator,
.token.operator,
.token.entity,
.token.url,
.token.punctuation {
  color: #333333 !important;
}

[data-theme="dark"] .hljs-operator,
[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .token.punctuation {
  color: var(--text-color) !important;
}

/* 移除所有 Shell 特殊处理 - 让 highlight.js 自然工作 */

/* 清除任何异常的边框和背景 */
.article-content .highlight *:not(table):not(td):not(.code):not(.gutter):not(pre),
.article-content figure.highlight *:not(table):not(td):not(.code):not(.gutter):not(pre),
.article-content pre[class*="language-"] *:not(table):not(td):not(.code):not(.gutter):not(pre) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 确保代码内容区域保持正确的背景 */
.article-content .highlight .code,
.article-content figure.highlight .code,
.article-content .highlight .code pre,
.article-content figure.highlight .code pre,
.article-content pre[class*="language-"],
.article-content .highlight,
.article-content figure.highlight,
.article-content .highlight table,
.article-content figure.highlight table,
.article-content .highlight td,
.article-content figure.highlight td {
  background: var(--code-bg) !important;
}

/* 表格和行号样式 */
.article-content .highlight table,
.article-content figure.highlight table {
  margin: 0;
  border: none;
  width: 100%;
  background: var(--code-bg) !important;
}

.article-content .highlight td,
.article-content figure.highlight td {
  border: none;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: top;
  background: var(--code-bg) !important;
  line-height: 1.5; /* 确保行高一致 */
}

/* 行号样式 */
.article-content .highlight .gutter,
.article-content figure.highlight .gutter,
.line-numbers .line-numbers-rows {
  background: var(--code-bg) !important;
  border-right: 1px solid var(--border-color) !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right;
  user-select: none;
  width: 55px;
  vertical-align: top;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.article-content .highlight .gutter pre,
.article-content figure.highlight .gutter pre,
.line-numbers .line-numbers-rows > span:before {
  color: var(--text-muted) !important;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 !important;
  padding: 16px 12px 16px 0 !important; /* 上下16px，右12px，左0 */
  background: transparent;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  transition: color 0.3s ease;
}

/* 复制按钮现在由 JavaScript 创建，不需要 CSS 伪元素 */

/* 滚动条美化 - 支持主题切换 */
.article-content .highlight::-webkit-scrollbar,
.article-content figure.highlight::-webkit-scrollbar,
.article-content pre[class*="language-"]::-webkit-scrollbar {
  height: 8px;
}

/* 浅色主题滚动条 */
.article-content .highlight::-webkit-scrollbar-track,
.article-content figure.highlight::-webkit-scrollbar-track,
.article-content pre[class*="language-"]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.article-content .highlight::-webkit-scrollbar-thumb,
.article-content figure.highlight::-webkit-scrollbar-thumb,
.article-content pre[class*="language-"]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.article-content .highlight::-webkit-scrollbar-thumb:hover,
.article-content figure.highlight::-webkit-scrollbar-thumb:hover,
.article-content pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 深色主题滚动条 */
[data-theme="dark"] .article-content .highlight::-webkit-scrollbar-track,
[data-theme="dark"] .article-content figure.highlight::-webkit-scrollbar-track,
[data-theme="dark"] .article-content pre[class*="language-"]::-webkit-scrollbar-track {
  background: #2d2d2d !important;
  border-radius: 4px;
}

[data-theme="dark"] .article-content .highlight::-webkit-scrollbar-thumb,
[data-theme="dark"] .article-content figure.highlight::-webkit-scrollbar-thumb,
[data-theme="dark"] .article-content pre[class*="language-"]::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 4px;
}

[data-theme="dark"] .article-content .highlight::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .article-content figure.highlight::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .article-content pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
  background: #888;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .article-content .highlight,
  .article-content figure.highlight,
  .article-content pre[class*="language-"] {
    margin: 15px -10px;
    border-radius: 0;
    box-shadow: none;
  }
  
  .article-content .highlight .gutter,
  .article-content figure.highlight .gutter {
    padding: 8px 6px;
    width: 30px;
  }
  
  .article-content .highlight .gutter pre,
  .article-content figure.highlight .gutter pre {
    font-size: 12px;
  }
  
  .article-content .highlight .code,
  .article-content figure.highlight .code {
    padding: 8px 12px;
  }
  
  .article-content .highlight .code pre,
  .article-content figure.highlight .code pre,
  .article-content pre[class*="language-"] {
    font-size: 13px;
    padding: 8px 12px;
  }
  
  .article-content .highlight::after,
  .article-content figure.highlight::after,
  .article-content pre[class*="language-"]::after {
    opacity: 1;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* 终极解决方案 - 行号代码完美对齐 */
.article-content .highlight,
.article-content figure.highlight {
  overflow: visible !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}

.article-content .highlight table,
.article-content figure.highlight table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.article-content .highlight td,
.article-content figure.highlight td {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  vertical-align: top !important;
}

/* 行号列 */
.article-content .highlight .gutter,
.article-content figure.highlight .gutter {
  width: 50px !important;
  background: var(--code-bg) !important;
  border-right: 1px solid var(--border-color) !important;
  padding: 16px 8px !important;
  text-align: right !important;
}

.article-content .highlight .gutter pre,
.article-content figure.highlight .gutter pre {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}

/* 代码列 */
.article-content .highlight .code,
.article-content figure.highlight .code {
  background: var(--code-bg) !important;
  padding: 16px 20px !important;
}

.article-content .highlight .code pre,
.article-content figure.highlight .code pre {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--text-color) !important;
  background: transparent !important;
  overflow-x: auto !important;
}