/**
 * 统一编程教程样式
 * 此文件用于确保所有教程页面使用相同的样式
 */

/* 重置容器大小限制 */
.container, 
.container-md, 
.container-sm,
.container-lg,
.container-xl {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 确保内容区域统一宽度 */
.content, 
.content.wide-content {
    max-width: 1200px !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
}

/* 移除内容边距 */
.three-column-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* 教程容器 */
.tutorial-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 20px 0 !important; /* 增加更多顶部内边距，避免被导航栏遮挡 */
}

/* 统一教程详情容器 */
.tutorial-detail-container {
    display: flex !important;
    gap: 0 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 20px 0 !important; /* 增加更多顶部内边距，避免被导航栏遮挡 */
    padding-left: 20px !important; /* 恢复正常左边距 */
}

/* 左侧边栏统一样式 */
body .tutorial-detail-container .tutorial-sidebar,
html body .tutorial-sidebar {
    width: 180px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 100px !important; /* 进一步增加top值避免被导航栏遮住 */
    left: 0 !important;
    align-self: flex-start !important;
    overflow-y: auto !important;
    height: calc(100vh - 100px) !important; /* 调整高度以适应新的top值 */
    background-color: #fff !important;
    border-right: 1px solid #e6e6e6 !important;
    border-radius: 0 !important;
    z-index: 10 !important;
    margin-left: 50px !important; /* 向右移动边栏 */
}

/* 侧边栏滚动条样式 */
.tutorial-sidebar::-webkit-scrollbar {
    width: 5px !important;
}

.tutorial-sidebar::-webkit-scrollbar-track {
    background: #f7f9fc !important;
}

.tutorial-sidebar::-webkit-scrollbar-thumb {
    background: #c1d1e8 !important;
    border-radius: 10px !important;
}

.tutorial-sidebar::-webkit-scrollbar-thumb:hover {
    background: #8ba3c7 !important;
}

/* 侧边栏部分 */
.tutorial-sidebar-section {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

.tutorial-sidebar-section:first-child {
    padding-top: 25px !important;
}

.tutorial-sidebar-header {
    padding: 16px 20px !important;
    background-color: #f8f8f8 !important;
    border-bottom: 1px solid #e6e6e6 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #333 !important;
    background-image: none !important;
}

.tutorial-sidebar-header::after {
    display: none !important;
    content: none !important;
}

.tutorial-sidebar-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tutorial-sidebar-item {
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.tutorial-sidebar-item:last-child {
    border-bottom: none !important;
}

.tutorial-sidebar-link {
    display: block !important;
    padding: 10px 20px !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: all 0.1s !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    background-image: none !important;
    border-left: none !important;
    box-shadow: none !important;
}

.tutorial-sidebar-link::before {
    display: none !important;
    content: none !important;
}

.tutorial-sidebar-link:hover {
    color: #0066cc !important;
    background-color: #f5f7fa !important;
}

.tutorial-sidebar-link.active {
    color: #0066cc !important;
    font-weight: 500 !important;
    background-color: #f0f7ff !important;
    box-shadow: inset 3px 0 0 #0066cc !important;
}

/* 右侧内容区域 */
.tutorial-content {
    flex: 1 !important;
    min-width: 0 !important;
    background-color: #fff !important;
    border-radius: 0 !important;
    padding: 40px 30px 40px 30px !important;
    box-shadow: none !important;
    border: none !important;
    max-width: calc(100% - 180px) !important;
    margin-top: 50px !important;
}

/* 代码块样式统一 */
pre {
    max-width: 100%;
    overflow-x: auto;
    background-color: #282c34 !important;
    font-family: "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 20px !important;
    border: none !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

code {
    font-family: "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    font-size: 16px !important;
    background-color: #f0f7ff !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    color: #0066cc !important;
    letter-spacing: 0.4px !important;
}

pre code {
    padding: 0 !important;
    background-color: transparent !important;
    color: #f8f8f2 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    text-shadow: none !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .tutorial-detail-container {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }
    
    .tutorial-sidebar {
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        border-right: none !important;
    }
    
    .tutorial-content {
        padding: 20px !important;
        max-width: 100% !important;
    }
}

/* 为特定类型的教程页面应用统一样式 */
body.python-tutorial .content,
body.c-language-tutorial .content,
body.java-tutorial .content,
body.javascript-tutorial .content,
body.css-tutorial .content,
body.golang-tutorial .content,
body.php-tutorial .content,
body.rust-tutorial .content,
body.cpp-tutorial .content,
body.csharp-tutorial .content,
body.html-tutorial .content {
    max-width: 1200px !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
}

/* 强制覆盖可能影响布局的样式 */
.article-page-container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
    .content, 
    .content.wide-content,
    .tutorial-container,
    .tutorial-detail-container,
    .article-page-container,
    body.python-tutorial .content,
    body.c-language-tutorial .content,
    body.java-tutorial .content,
    body.javascript-tutorial .content,
    body.css-tutorial .content,
    body.golang-tutorial .content,
    body.php-tutorial .content,
    body.rust-tutorial .content,
    body.cpp-tutorial .content,
    body.csharp-tutorial .content,
    body.html-tutorial .content {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}