/**
 * CodeHighlighter 增强样式
 * 用于美化代码块、敏感数据高亮等功能
 * @version 2.0.0
 */

/* ===================== 代码块容器样式增强 ===================== */
pre[class*="language-"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #66d9ef;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 0;
}

/* 当有统计信息时，代码块底部圆角移除 */
div.code-toolbar.has-stats pre[class*="language-"] {
    border-radius: 0.4em 0.4em 0 0;
    margin-bottom: 0;
}

pre[class*="language-"]:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border-left-color: #a6e22e;
}

/* ===================== 代码行号样式增强 ===================== */
.line-numbers .line-numbers-rows > span:before {
    color: #6f7681;
    font-weight: 500;
    text-shadow: 0 1px rgba(255, 255, 255, 0.05);
}

.line-numbers .line-numbers-rows {
    border-right: 2px solid #444;
    background: rgba(50, 50, 50, 0.3);
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05);
}

/* 高亮当前行 */
pre.line-numbers code .line-highlight {
    background: rgba(102, 217, 239, 0.1);
    border-left: 3px solid #66d9ef;
    padding-left: 0.5em;
}

/* ===================== 工具条样式增强 ===================== */
div.code-toolbar > .toolbar {
    right: 0.5em;
    top: 0.5em;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease;
    transform: translateX(10px);
}

div.code-toolbar:hover > .toolbar {
    opacity: 1;
    transform: translateX(0);
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.1) 0%, rgba(166, 226, 46, 0.1) 100%);
    border: 1px solid rgba(102, 217, 239, 0.3);
    color: #bbb;
    transition: all 0.2s ease;
    font-weight: 500;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar span:hover {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.2) 0%, rgba(166, 226, 46, 0.2) 100%);
    color: #e6db74;
    border-color: rgba(102, 217, 239, 0.6);
    box-shadow: 0 4px 8px rgba(102, 217, 239, 0.15);
}

/* ===================== 语言标签样式 ===================== */
.language-label {
	position: absolute;
	top: 0.5em;
	right: 3.8em;
	padding: 0.35em 0.7em;
	background: linear-gradient(135deg, #66d9ef 0%, #a1efe4 100%);
	color: #272822;
	font-size: 0.7em;
	font-weight: 700;
	border-radius: 0.4em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0;
	transition: opacity 0.3s ease;
	box-shadow: 0 2px 6px rgba(102, 217, 239, 0.3);
	border: 1px solid rgba(102, 217, 239, 0.4);
	cursor: default;
	pointer-events: none;
}

div.code-toolbar:hover .language-label {
	opacity: 1;
}

/* 在工具栏悬停时语言标签也显示 */
pre[class*="language-"]:hover .language-label {
	opacity: 1;
}

/* ===================== 敏感数据高亮 ===================== */

/* IP 地址高亮 */
.sensitive-data.ip-address {
    color: #fd971f;
}

/* 密钥/令牌高亮 */
.sensitive-data.api-key,
.sensitive-data.token,
.sensitive-data.secret {
    color: #f92672;
}

/* 密码高亮 */
.sensitive-data.password {
    color: #ae81ff;
}

/* 数据库连接字符串高亮 */
.sensitive-data.connection-string {
    color: #66d9ef;
}

/* URL 和 域名高亮 */
.sensitive-data.url,
.sensitive-data.domain {
    color: #a6e22e;
}

/* 邮箱地址高亮 */
.sensitive-data.email {
    color: #e6db74;
}

/* ===================== 代码注释高亮 ===================== */

/* # 开头的注释高亮（深绿色，简单样式） */
.sensitive-data.code-comment {
    color: #348725;
    display: inline;
    white-space: pre-wrap;
}

/* ===================== 配置文件引号内容高亮 ===================== */

/* 普通引号字符串高亮 */
.sensitive-data.quoted-string {
    color: #66d9ef;
}

/* 配置值高亮（敏感配置字段的值） */
.sensitive-data.config-value {
    color: #f92672;
}

/* 环境变量值高亮 */
.sensitive-data.env-variable {
    color: #a6e22e;
}

/* JSON 字符串值高亮 */
.sensitive-data.json-value {
    color: #e6db74;
}

/* YAML 配置值高亮 */
.sensitive-data.yaml-value {
    color: #ae81ff;
}

/* ===================== 滚动条样式美化 ===================== */
pre[class*="language-"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

pre[class*="language-"]::-webkit-scrollbar-track {
    background: rgba(50, 50, 50, 0.5);
    border-radius: 4px;
}

pre[class*="language-"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #66d9ef, #a6e22e);
    border-radius: 4px;
    transition: background 0.3s ease;
}

pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a6e22e, #e6db74);
}

/* Firefox 滚动条 */
pre[class*="language-"] {
    scrollbar-color: #66d9ef rgba(50, 50, 50, 0.5);
    scrollbar-width: thin;
}

/* ===================== 代码块响应式设计 ===================== */
@media (max-width: 768px) {
    pre[class*="language-"] {
        padding: 0.8em;
        margin: 0.5em -0.8em;
        border-radius: 0;
        border-left: 3px solid #66d9ef;
    }

    div.code-toolbar > .toolbar {
        right: 0.2em;
        top: 0.2em;
    }

    div.code-toolbar > .toolbar a,
    div.code-toolbar > .toolbar button,
    div.code-toolbar > .toolbar span {
        font-size: 0.7em;
        padding: 0.3em 0.4em;
    }
}

/* ===================== 打印样式 ===================== */
@media print {
    pre[class*="language-"] {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .sensitive-data {
        background: none !important;
        box-shadow: none !important;
    }

    div.code-toolbar > .toolbar {
        display: none;
    }
}

/* ===================== 深色模式支持 ===================== */
@media (prefers-color-scheme: dark) {
    pre[class*="language-"] {
        border-left-color: #66d9ef;
    }
}




/* 代码块焦点效果 */
pre[class*="language-"]:focus-within {
    border-left-color: #a6e22e;
    box-shadow: 0 6px 20px rgba(166, 226, 46, 0.15);
}

/* ===================== 代码折叠功能样式 ===================== */
pre[class*="language-"].code-collapsed {
    position: relative;
    overflow: hidden;
}

pre[class*="language-"].code-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to top, rgba(39, 40, 34, 0.95), transparent);
    pointer-events: none;
}

.code-collapse-btn {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.1) 0%, rgba(166, 226, 46, 0.1) 100%);
    border: 1px solid rgba(102, 217, 239, 0.3);
    color: #bbb;
    padding: 0.4em 0.8em;
    border-radius: 0.3em;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    margin-left: 0.5em;
}

.code-collapse-btn:hover {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.2) 0%, rgba(166, 226, 46, 0.2) 100%);
    color: #e6db74;
    border-color: rgba(102, 217, 239, 0.6);
    box-shadow: 0 4px 8px rgba(102, 217, 239, 0.15);
}

.collapse-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* ===================== 代码搜索功能样式 ===================== */
.code-search-btn {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.1) 0%, rgba(166, 226, 46, 0.1) 100%);
    border: 1px solid rgba(102, 217, 239, 0.3);
    color: #bbb;
    padding: 0.4em 0.8em;
    border-radius: 0.3em;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    margin-left: 0.5em;
}

.code-search-btn:hover {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.2) 0%, rgba(166, 226, 46, 0.2) 100%);
    color: #e6db74;
    border-color: rgba(102, 217, 239, 0.6);
    box-shadow: 0 4px 8px rgba(102, 217, 239, 0.15);
}

.code-search-highlight {
    background: rgba(230, 219, 116, 0.4);
    color: #e6db74;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 600;
    box-shadow: 0 0 4px rgba(230, 219, 116, 0.6);
    animation: searchPulse 1s ease-in-out infinite;
}

@keyframes searchPulse {
    0%, 100% {
        box-shadow: 0 0 4px rgba(230, 219, 116, 0.6);
    }
    50% {
        box-shadow: 0 0 8px rgba(230, 219, 116, 0.9);
    }
}

/* ===================== 代码下载功能样式 ===================== */
.code-download-btn {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.1) 0%, rgba(166, 226, 46, 0.1) 100%);
    border: 1px solid rgba(102, 217, 239, 0.3);
    color: #bbb;
    padding: 0.4em 0.8em;
    border-radius: 0.3em;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    margin-left: 0.5em;
}

.code-download-btn:hover {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.2) 0%, rgba(166, 226, 46, 0.2) 100%);
    color: #e6db74;
    border-color: rgba(102, 217, 239, 0.6);
    box-shadow: 0 4px 8px rgba(102, 217, 239, 0.15);
}

/* ===================== 代码统计功能样式 ===================== */
.code-stats-wrapper {
    margin-top: 0;
    padding: 0.6em 0.8em;
    background: rgba(39, 40, 34, 0.95);
    border-radius: 0 0 0.4em 0.4em;
    border-top: 1px solid rgba(102, 217, 239, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.code-stats-wrapper:hover {
    background: rgba(50, 50, 50, 0.98);
    border-top-color: rgba(102, 217, 239, 0.4);
}

.code-stats {
    display: flex;
    gap: 1.2em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    font-size: 0.75em;
    line-height: 1.6;
}

.code-stats .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.6em;
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.08) 0%, rgba(166, 226, 46, 0.08) 100%);
    border-radius: 0.3em;
    border: 1px solid rgba(102, 217, 239, 0.15);
    transition: all 0.2s ease;
    cursor: default;
    white-space: nowrap;
}

.code-stats .stat-item:hover {
    background: linear-gradient(135deg, rgba(102, 217, 239, 0.15) 0%, rgba(166, 226, 46, 0.15) 100%);
    border-color: rgba(102, 217, 239, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(102, 217, 239, 0.2);
}

.code-stats .stat-icon {
    font-size: 1.1em;
    opacity: 0.9;
    filter: grayscale(0.2);
}

.code-stats .stat-value {
    font-weight: 600;
    color: #66d9ef;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.code-stats .stat-label {
    color: #a6e22e;
    font-size: 0.9em;
    opacity: 0.85;
}

/* 紧凑模式 - 移动端 */
@media (max-width: 768px) {
    .code-stats-wrapper {
        padding: 0.4em 0.6em;
        margin-top: 0.3em;
    }

    .code-stats {
        gap: 0.8em;
        font-size: 0.7em;
    }

    .code-stats .stat-item {
        padding: 0.25em 0.5em;
        gap: 0.3em;
    }

    .code-stats .stat-icon {
        font-size: 1em;
    }

    .code-stats .stat-label {
        font-size: 0.85em;
    }
}

/* 超小屏幕 - 垂直布局 */
@media (max-width: 480px) {
    .code-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }

    .code-stats .stat-item {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===================== 工具栏按钮统一样式 ===================== */
div.code-toolbar > .toolbar {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

div.code-toolbar > .toolbar button {
    font-family: inherit;
    font-size: 0.85em;
    white-space: nowrap;
}

/* ===================== 响应式优化 ===================== */
@media (max-width: 768px) {
    .code-stats {
        font-size: 0.65em;
        gap: 0.5em;
    }

    .code-stats span {
        padding: 0.15em 0.4em;
    }

    .code-collapse-btn,
    .code-search-btn,
    .code-download-btn {
        font-size: 0.75em;
        padding: 0.3em 0.6em;
    }
}