/* 教程富文本内容渲染样式（原 public/css/tutorial.css，已更名）
 * 职责：仅负责 Quill 富文本/代码块/表格/视频等内容渲染，不含页面布局 */

/* 教程内容区域视频宽度控制 - 强制优先级 */
.tutorial-content .video-js-container,
.tutorial-content .ql-videojs,
#tutorial-content .video-js-container,
#tutorial-content .ql-videojs {
    max-width: 100% !important;
    margin: 15px auto !important; /* 保持居中 */
    position: relative !important;
    height: auto !important;
    display: block !important; /* 确保是块级元素以应用margin auto */
}

/* 强制宽度类样式 */
#tutorial-content .ql-video-width-25,
#tutorial-content .video-js-container.ql-video-width-25 {
    width: 25% !important;
}

#tutorial-content .ql-video-width-50,
#tutorial-content .video-js-container.ql-video-width-50 {
    width: 50% !important;
}

#tutorial-content .ql-video-width-75,
#tutorial-content .video-js-container.ql-video-width-75 {
    width: 75% !important;
}

#tutorial-content .ql-video-width-100,
#tutorial-content .video-js-container.ql-video-width-100 {
    width: 100% !important;
}

/* 确保内部视频适应容器 */
.tutorial-content .video-js-container video,
#tutorial-content .video-js-container video,
.tutorial-content .ql-videojs video,
#tutorial-content .ql-videojs video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    display: block !important;
}

/* iframe 宽度适应 */
.tutorial-content .video-js-container iframe,
#tutorial-content .video-js-container iframe,
.tutorial-content .ql-videojs iframe,
#tutorial-content .ql-videojs iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    display: block !important;
}

/* 确保文本对齐样式生效 */
.tutorial-content .text-center,
.ql-editor .text-center {
    text-align: center !important;
}

.tutorial-content .text-left,
.ql-editor .text-left {
    text-align: left !important;
}

.tutorial-content .text-right,
.ql-editor .text-right {
    text-align: right !important;
}

/* 优化图片显示 */
.tutorial-content img,
.ql-editor img {
    max-width: 100%;
    height: auto;
}

/* 修复视频样式在教程视图中的问题 */
.wiki-article .ql-editor .video-js-container,
.wiki-article .ql-videojs,
.wiki-article .ql-videojs .video-js-container {
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}

/* 强制隐藏前台视频的调整大小控件 - 加强版 */
body .wiki-article #tutorial-content .video-js-container .video-resize-handle,
body #tutorial-content .video-resize-handle,
body .tutorial-content .video-resize-handle {
    display: none !important;
    visibility: hidden !important; /* 再加一层保险 */
    pointer-events: none !important; /* 禁止鼠标事件 */
}

#tutorial-content .video-resize-handle {
    display: none !important;
}

.wiki-article .video-resize-handle {
    display: none !important;
}

/* ================== 代码块美化 (类似后台) ================== */
/* Quill 编辑器代码块 */
.ql-syntax,
.tutorial-content pre { /* 兼容可能存在的<pre>标签 */
    background-color: #2d2d2d; /* 暗色背景 */
    color: #f8f8f2; /* 亮色文字 */
    padding: 1.2em 1.5em; /* 增加内边距 */
    border-radius: 12px; /* 圆角更大 */
    margin: 1.5em 0; /* 增加外边距 */
    font-family: 'Consolas', 'Monaco', 'Courier New', Courier, monospace;
    font-size: 0.95em; /* 稍微调整字体大小 */
    white-space: pre-wrap; /* 允许换行 */
    word-wrap: break-word; /* 超长单词换行 */
    overflow-x: auto; /* 水平滚动 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 添加细边框 */
    position: relative;
    line-height: 1.5; /* 增加行高 */
}

/* 添加一点顶部光晕效果 */
.ql-syntax::before,
.tutorial-content pre::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, rgba(0, 149, 255, 0.6), rgba(0, 212, 255, 0.6));
    border-radius: 12px 12px 0 0;
    opacity: 0.8;
}

/* Light 主题下的代码块 */
.light-theme .ql-syntax,
.light-theme .tutorial-content pre {
    background-color: #f8f9fa; /* 浅色背景 */
    color: #212529; /* 深色文字 */
    border: 1px solid #e0e0e0;
}

.light-theme .ql-syntax::before,
.light-theme .tutorial-content pre::before {
    background: linear-gradient(to right, rgba(0, 149, 255, 0.45), rgba(0, 212, 255, 0.5));
}

/* Light 主题下代码块内的代码 */
.light-theme .ql-syntax code,
.light-theme .tutorial-content pre code {
   color: #212529; /* 确保代码颜色正确 */
}

/* ================== 表格样式（列宽自适应、细网格线、浅灰表头、无斑马纹） ================== */
#tutorial-content table {
    width: auto;
    max-width: 100%;
    table-layout: auto;
    display: table;
    /* collapse 模式下外框圆角会失效，改用 separate + 0 间距，
       网格线由单元格的右/下边框拼出 */
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.6;
    /* 中和响应式样式在小屏对 .ql-editor table 强加的 nowrap，让单元格正常换行 */
    white-space: normal;
    border: 1px solid var(--border-content, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}

/* 富文本编辑器（Quill）会给 colgroup/col 写死像素宽度，
   前台展示统一改为按内容自适应 */
#tutorial-content table col,
#tutorial-content table colgroup col {
    width: auto !important;
    min-width: 0 !important;
}

#tutorial-content table td[width],
#tutorial-content table th[width] {
    width: auto !important;
}

#tutorial-content table th,
#tutorial-content table td {
    /* 先清空低优先级规则写入的 border 简写（四边线），再单独画右/下边框，避免双线 */
    border: none;
    border-right: 1px solid var(--border-content, #e5e7eb);
    border-bottom: 1px solid var(--border-content, #e5e7eb);
    padding: 10px 16px;
    text-align: left;
    vertical-align: top;
    color: var(--text-content, #3f3f46);
}

#tutorial-content table th:last-child,
#tutorial-content table td:last-child {
    border-right: none;
}

/* 最后一个行组（tbody）的最后一行不画下边框，避免与外框叠成双线；
   不能直接用 tr:last-child，否则 thead 里唯一的表头行也会被去掉下边框 */
#tutorial-content table > :last-child > tr:last-child th,
#tutorial-content table > :last-child > tr:last-child td {
    border-bottom: none;
}

/* 单元格内段落不继承正文的大段距和字号 */
#tutorial-content table p {
    margin-bottom: 0 !important;
    font-size: inherit;
    line-height: inherit !important;
}

/* 表头：浅灰衬底 + 标题色加重（变量随主题切换） */
#tutorial-content table th {
    background-color: var(--bg-input, #f5f6f7);
    font-weight: 600;
    color: var(--text-title, #1a1a1a);
}

/* Quill 表格可能整表都是 td，没有 th：把首行按表头渲染
   （单独成条规则，不支持 :has 的旧浏览器自动跳过、不影响上面的 th 样式） */
#tutorial-content table:not(:has(th)) tr:first-child td {
    background-color: var(--bg-input, #f5f6f7);
    font-weight: 600;
    color: var(--text-title, #1a1a1a);
}

/* 表格对齐样式 */
#tutorial-content table .text-left {
    text-align: left;
}
#tutorial-content table .text-center {
    text-align: center;
}
#tutorial-content table .text-right {
    text-align: right;
}

/* ===== 表格横向滚动 + 列宽按内容渲染 =====
   前台 JS（view.html enhanceTables）会：
   1. 给每个表格包一层 .table-scroll 滚动容器；
   2. 短文本单元格打 .cell-nowrap（单行渲染，列宽=内容宽度，永不挤压变形）；
   3. 长文本单元格打 .cell-wrap（保底列宽，空间不足时折成多行）。
   表格总宽超出正文宽度时，在 .table-scroll 内整体左右滑动查看 */
#tutorial-content .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

/* 上下外边距交给滚动容器承担 */
#tutorial-content .table-scroll table {
    margin: 0;
}

/* 短内容单元格：强制单行（单元格内 p 带 pre-wrap !important，需一并中和） */
#tutorial-content table .cell-nowrap,
#tutorial-content table .cell-nowrap p {
    white-space: nowrap !important;
}

/* 长内容单元格：保证可读的最小列宽，空间不足时自动折行，而不是被挤成一字一列 */
#tutorial-content table .cell-wrap {
    min-width: 18em;
}

/* ===== 表格内超链接：去掉默认下划线，悬停呈现淡底胶囊高亮 ===== */
#tutorial-content table a {
    color: var(--accent, #0066CC);
    font-weight: 500;
    text-decoration: none;
    padding: 1px 5px;
    margin: -1px -5px; /* 负 margin 抵消 padding，胶囊高亮不挤动表格布局 */
    border-radius: 5px;
    /* 链接折行时每行都保留完整胶囊形状 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#tutorial-content table a:hover,
#tutorial-content table a:focus-visible {
    color: var(--accent-hover, #0052A3);
    background-color: var(--accent-tint, rgba(0, 102, 204, 0.08));
}

/* 移动端：收紧内边距和字号 */
@media (max-width: 768px) {
    #tutorial-content table th,
    #tutorial-content table td {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* 小屏长文本列保底宽度略收窄，减少不必要的横向滚动 */
    #tutorial-content table .cell-wrap {
        min-width: 14em;
    }
}

/* ================== 代码块外层 wrapper：边框/圆角统一承担，内含 header 条 + 代码体 ================== */
.code-block-wrapper {
    position: relative;
    margin: 1.5em 0;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.light-theme .code-block-wrapper {
    background: #f8f9fa;
    border-color: #e5e7eb;
}

/* 代码容器并入 wrapper：自身边框/圆角/阴影/顶部装饰条让位 */
.code-block-wrapper .ql-code-block-container,
.code-block-wrapper > pre {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.code-block-wrapper .ql-code-block-container::before,
.code-block-wrapper > pre::before {
    display: none;
}

/* ================== 代码块 header 条（语言名 + 常驻复制按钮） ================== */
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px 5px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.light-theme .code-block-header {
    background: #f3f4f6;
    border-bottom-color: #e5e7eb;
}

.code-lang {
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: rgba(248, 248, 242, 0.55);
    text-transform: lowercase;
    user-select: none;
}

.light-theme .code-lang {
    color: #6b7280;
}

/* header 内复制按钮：常驻、静态布局 */
.code-block-header .code-copy-btn {
    position: static;
    opacity: 1;
    transform: none;
}

/* ================== 旧 wrapper 行为兜底（无 header 时） ================== */
/* ================== 一键复制按钮 ================== */
.code-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-family: inherit;
    line-height: 1;
    color: rgba(248, 248, 242, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;                  /* 默认隐藏，hover 时出现 */
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.code-block-wrapper:hover .code-copy-btn,
.code-copy-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.code-copy-btn.copied {
    background: rgba(6, 214, 160, 0.2);
    border-color: rgba(6, 214, 160, 0.45);
    color: #06d6a0;
    opacity: 1 !important;
}

.code-copy-btn.copy-failed {
    background: rgba(230, 57, 70, 0.18);
    border-color: rgba(230, 57, 70, 0.45);
    color: #e63946;
    opacity: 1 !important;
}

.code-copy-btn i {
    font-size: 12px;
}

/* 浅色主题下按钮配色 */
.light-theme .code-copy-btn {
    color: rgba(33, 37, 41, 0.75);
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.light-theme .code-copy-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #111;
}

/* 移动端：按钮常驻显示、略缩小 */
@media (max-width: 768px) {
    .code-copy-btn {
        opacity: 1;
        transform: none;
        padding: 4px 8px;
        font-size: 11px;
    }
    .code-copy-btn .code-copy-btn-text {
        display: none;           /* 只保留图标，避免占位 */
    }
}

/* ================== 代码块容器（Quill 2.0 结构：container > 每行 code-block） ================== */
.ql-code-block-container {
    /* 深色默认主题 */
    background-color: #1e1e1e;
    color: #f8f8f2;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.6;
    padding: 1.1em 0;           /* 左右留给每行自己做 padding，便于行号定位 */
    margin: 1.5em 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;           /* 超长代码横向滚动 */
    overflow-y: hidden;
    position: relative;
    counter-reset: code-line;   /* 行号计数器 */
    -webkit-overflow-scrolling: touch;
    tab-size: 4;
    -moz-tab-size: 4;
}

/* 顶部高亮条（纯蓝色渐变：浅蓝 → 深蓝） */
.ql-code-block-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, rgba(0, 149, 255, 0.85), rgba(0, 212, 255, 0.85));
    border-radius: 12px 12px 0 0;
    pointer-events: none;
}

/* 每一行代码块（Quill 2.0 会把每行包成一个 div.ql-code-block） */
.ql-code-block-container .ql-code-block {
    counter-increment: code-line;
    display: block;
    margin: 0;
    padding: 0 1.2em 0 3.6em;   /* 左侧留出行号空间 */
    white-space: pre;           /* 保留缩进和空格 */
    min-height: 1.6em;          /* 空行也占高度 */
    position: relative;
    color: inherit;
    background: transparent;
    font-family: inherit;
}

/* 行号：以 counter 形式展示在每行左侧 */
.ql-code-block-container .ql-code-block::before {
    content: counter(code-line);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.8em;
    padding-right: 0.8em;
    text-align: right;
    color: rgba(248, 248, 242, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
    font-variant-numeric: tabular-nums;
}

/* 行悬停高亮，增加层次感 */
.ql-code-block-container .ql-code-block:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* 兼容可能存在的旧 <pre class="ql-syntax"> 结构 */
.ql-code-block-container .ql-syntax {
    margin: 0;
    box-shadow: none;
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0 1.2em;
}

/* ===== 浅色主题下的代码块 ===== */
.light-theme .ql-code-block-container {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #e5e7eb;
}

.light-theme .ql-code-block-container::before {
    background: linear-gradient(to right, rgba(0, 149, 255, 0.55), rgba(0, 212, 255, 0.6));
}

.light-theme .ql-code-block-container .ql-code-block::before {
    color: rgba(33, 37, 41, 0.35);
    border-right-color: rgba(0, 0, 0, 0.08);
}

.light-theme .ql-code-block-container .ql-code-block:hover {
    background: rgba(0, 102, 204, 0.05);
}

/* ===== 移动端：减小行号宽度和字号 ===== */
@media (max-width: 768px) {
    .ql-code-block-container {
        font-size: 0.82em;
        border-radius: 8px;
    }
    .ql-code-block-container .ql-code-block {
        padding-left: 3em;
        padding-right: 0.8em;
    }
    .ql-code-block-container .ql-code-block::before {
        width: 2.2em;
        padding-right: 0.5em;
    }
}

/* ================== 代码语法高亮（基于 highlight.js atom-one 主题，作用域限定在代码块容器内） ================== */
/* 深色主题（默认） */
.ql-code-block-container .hljs-comment,
.ql-code-block-container .hljs-quote { color: #7f848e; font-style: italic; }
.ql-code-block-container .hljs-doctag,
.ql-code-block-container .hljs-formula,
.ql-code-block-container .hljs-keyword { color: #c678dd; }
.ql-code-block-container .hljs-deletion,
.ql-code-block-container .hljs-name,
.ql-code-block-container .hljs-section,
.ql-code-block-container .hljs-selector-tag,
.ql-code-block-container .hljs-subst { color: #e06c75; }
.ql-code-block-container .hljs-literal { color: #56b6c2; }
.ql-code-block-container .hljs-addition,
.ql-code-block-container .hljs-attribute,
.ql-code-block-container .hljs-meta .hljs-string,
.ql-code-block-container .hljs-regexp,
.ql-code-block-container .hljs-string { color: #98c379; }
.ql-code-block-container .hljs-attr,
.ql-code-block-container .hljs-number,
.ql-code-block-container .hljs-selector-attr,
.ql-code-block-container .hljs-selector-class,
.ql-code-block-container .hljs-selector-pseudo,
.ql-code-block-container .hljs-template-variable,
.ql-code-block-container .hljs-type,
.ql-code-block-container .hljs-variable { color: #d19a66; }
.ql-code-block-container .hljs-bullet,
.ql-code-block-container .hljs-link,
.ql-code-block-container .hljs-meta,
.ql-code-block-container .hljs-selector-id,
.ql-code-block-container .hljs-symbol,
.ql-code-block-container .hljs-title { color: #61aeee; }
.ql-code-block-container .hljs-built_in,
.ql-code-block-container .hljs-class .hljs-title,
.ql-code-block-container .hljs-title.class_ { color: #e6c07b; }
.ql-code-block-container .hljs-emphasis { font-style: italic; }
.ql-code-block-container .hljs-strong { font-weight: 700; }
.ql-code-block-container .hljs-link { text-decoration: underline; }

/* 浅色主题覆盖 */
.light-theme .ql-code-block-container .hljs-comment,
.light-theme .ql-code-block-container .hljs-quote { color: #a0a1a7; font-style: italic; }
.light-theme .ql-code-block-container .hljs-doctag,
.light-theme .ql-code-block-container .hljs-formula,
.light-theme .ql-code-block-container .hljs-keyword { color: #a626a4; }
.light-theme .ql-code-block-container .hljs-deletion,
.light-theme .ql-code-block-container .hljs-name,
.light-theme .ql-code-block-container .hljs-section,
.light-theme .ql-code-block-container .hljs-selector-tag,
.light-theme .ql-code-block-container .hljs-subst { color: #e45649; }
.light-theme .ql-code-block-container .hljs-literal { color: #0184bb; }
.light-theme .ql-code-block-container .hljs-addition,
.light-theme .ql-code-block-container .hljs-attribute,
.light-theme .ql-code-block-container .hljs-meta .hljs-string,
.light-theme .ql-code-block-container .hljs-regexp,
.light-theme .ql-code-block-container .hljs-string { color: #50a14f; }
.light-theme .ql-code-block-container .hljs-attr,
.light-theme .ql-code-block-container .hljs-number,
.light-theme .ql-code-block-container .hljs-selector-attr,
.light-theme .ql-code-block-container .hljs-selector-class,
.light-theme .ql-code-block-container .hljs-selector-pseudo,
.light-theme .ql-code-block-container .hljs-template-variable,
.light-theme .ql-code-block-container .hljs-type,
.light-theme .ql-code-block-container .hljs-variable { color: #986801; }
.light-theme .ql-code-block-container .hljs-bullet,
.light-theme .ql-code-block-container .hljs-link,
.light-theme .ql-code-block-container .hljs-meta,
.light-theme .ql-code-block-container .hljs-selector-id,
.light-theme .ql-code-block-container .hljs-symbol,
.light-theme .ql-code-block-container .hljs-title { color: #4078f2; }
.light-theme .ql-code-block-container .hljs-built_in,
.light-theme .ql-code-block-container .hljs-class .hljs-title,
.light-theme .ql-code-block-container .hljs-title.class_ { color: #c18401; }