/**
 * doc.css — API 文档页族共享样式（自 app/view/doc/{index,detail,search,error}.html
 * 内联 <style> 块迁出，optimization-plan Phase 2 任务 8）
 *
 * 段落：共享布局段 / 树高亮段 / index 特有段 / detail 段（partial.html AJAX 片段同款类）
 * / search 段 / error 段。已删除无元素消费的死样式：index 版 .doc-header 渐变头、
 * detail 版 .doc-meta/.breadcrumb/.category-item/.subcategory-*、search 版 .highlight。
 * 冲突类改名：.pagination→.doc-pager（Bootstrap）、.btn 族→.doc-btn 族（Bootstrap）。
 */

/* ===== 共享布局（index / detail / search） ===== */
.doc-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.doc-content { display: flex; gap: 30px; }
.doc-sidebar { width: 300px; flex-shrink: 0; }
.doc-main { flex: 1; }
.category-list { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 20px; }

.doc-sidebar .search-box { margin-bottom: 20px; }
.search-input { width: 100%; padding: 12px 20px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 16px; transition: border-color 0.3s; box-sizing: border-box; }
.search-input:focus { outline: none; border-color: #1E9FFF; }

/* 树容器内边距（原内联 style="padding: 10px"×3 处类化） */
.doc-tree-pad { padding: 10px; }

/* ===== 树当前节点高亮（三页同款，橙色系逐层加深） ===== */
#doc-tree .tree-active.depth-0 > .layui-tree-entry .layui-tree-txt { color: #FF7324; }
#doc-tree .tree-active.depth-1 > .layui-tree-entry .layui-tree-txt { color: #B25019; }
#doc-tree .tree-active.depth-2 > .layui-tree-entry .layui-tree-txt { color: #7D3811; }
#doc-tree .tree-active.depth-3 > .layui-tree-entry .layui-tree-txt { color: #57270C; }
#doc-tree .tree-active.depth-4 > .layui-tree-entry .layui-tree-txt { color: #3D1C09; }

/* ===== index 特有 ===== */
/* 热门接口卡片"查看详情"链接（原内联 color 类化） */
.feature-link { color: #1E9FFF; text-decoration: none; }

/* 无刷新加载态（原 JS 动态内联 style 类化） */
.doc-loading { padding: 20px; color: #666; }
.doc-load-error { padding: 20px; color: #f00; }

/* ===== detail 段（detail.html 与 partial.html AJAX 片段共用类族） ===== */
.doc-header { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px; }
.doc-header h1 { color: #333; margin-bottom: 10px; font-size: 2em; }

.api-info { background: #f8f9fa; border-radius: 8px; padding: 25px; margin-bottom: 30px; border-left: 4px solid #1E9FFF; }
.api-info h3 { color: #333; margin-bottom: 20px; font-size: 1.4em; }
.api-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.info-item { display: flex; flex-direction: column; }
.info-label { font-size: 12px; color: #666; margin-bottom: 5px; text-transform: uppercase; font-weight: 600; }
.info-value { font-size: 16px; color: #333; font-weight: 500; }

.method-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; color: white; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.method-get { background: #52c41a; }
.method-post { background: #1890ff; }
.method-put { background: #fa8c16; }
.method-delete { background: #f5222d; }
.method-patch { background: #722ed1; }

.article-body { line-height: 1.8; color: #333; font-size: 16px; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { color: #333; margin-top: 30px; margin-bottom: 15px; }
.article-body p { margin-bottom: 15px; }
.article-body code { background: #f8f9fa; padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; }
.article-body pre { background: #f8f9fa; padding: 15px; border-radius: 8px; overflow-x: auto; margin: 15px 0; }

.related-articles { margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; }
.related-articles h3 { color: #333; margin-bottom: 20px; }
.related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.related-item { background: #f8f9fa; padding: 15px; border-radius: 6px; transition: all 0.3s ease; }
.related-item:hover { background: #e9ecef; transform: translateY(-2px); }
.related-item a { color: #333; text-decoration: none; }
.related-item a:hover { color: #1E9FFF; }
.view-count { color: #999; font-size: 12px; margin-top: 5px; }

/* 状态色 + 接口小块 */
.text-red { color: #f5222d; }
.text-green-light { color: #95de64; }
.api-mini-block { margin: 12px 0 16px; }

/* 参数/返回表格下距（原内联 style="margin-bottom:24px" 类化） */
.doc-table { margin-bottom: 24px; }
/* JSON 示例上方留白（原内联 style="height:10px" 类化） */
.doc-example-gap { height: 10px; }
/* "去调试"按钮左距（原内联 style="margin-left:8px" 类化） */
.doc-debug-link { margin-left: 8px; }

/* ===== search 段 ===== */
.search-form { margin-bottom: 20px; }
.search-btn { background: #1E9FFF; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background 0.3s; }
.search-btn:hover { background: #0d8aff; }

.search-stats { color: #666; font-size: 14px; margin-bottom: 20px; }
.search-results { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.result-item { padding: 20px; border-bottom: 1px solid #f0f0f0; transition: background 0.3s; }
.result-item:last-child { border-bottom: none; }
.result-item:hover { background: #f8f9fa; }
.result-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px; }
.result-title a { color: #333; text-decoration: none; }
.result-title a:hover { color: #1E9FFF; }
.result-meta { color: #666; font-size: 14px; margin-bottom: 10px; }
.result-desc { color: #666; line-height: 1.6; margin-bottom: 10px; }
.result-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* 服务端 highlightKeywords 生成（DocController:339），勿改名 */
.search-highlight { background-color: #ffeb3b; color: #333; padding: 2px 4px; border-radius: 3px; font-weight: bold; }

.tag { background: #e9ecef; color: #666; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.method-tag { background: #52c41a; color: white; }

.empty-state { text-align: center; padding: 60px 20px; color: #666; }
.empty-state h3 { margin-bottom: 10px; color: #333; }

/* 分页（原 .pagination，改名避 Bootstrap 冲突） */
.doc-pager { margin-top: 30px; text-align: center; }

/* ===== error 段（doc/error.html，仅该页引入生效） ===== */
.error-container { text-align: center; padding: 80px 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin: 40px 0; }
.error-icon { font-size: 4em; color: #dc3545; margin-bottom: 20px; }
.error-title { font-size: 2em; color: #333; margin-bottom: 15px; }
.error-message { color: #666; font-size: 16px; line-height: 1.6; margin-bottom: 30px; max-width: 500px; margin-left: auto; margin-right: auto; }
.error-actions { margin-top: 30px; }

/* 按钮（原 .btn 族，改名避 Bootstrap 冲突） */
.doc-btn { display: inline-block; padding: 12px 24px; margin: 0 10px; border-radius: 6px; text-decoration: none; font-size: 16px; transition: all 0.3s ease; }
.doc-btn-primary { background: #1E9FFF; color: white; }
.doc-btn-primary:hover { background: #0d8aff; color: white; }
.doc-btn-secondary { background: #6c757d; color: white; }
.doc-btn-secondary:hover { background: #5a6268; color: white; }