/* 教程前台页面响应式样式 */

/* 适应不同设备的基础样式 */
html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

#app,
.wiki-container {
    width: 100%;
    min-height: 100%;
}

.wiki-container {
    flex-direction: row;
}

/* 自适应布局 */
@media (max-width: 1200px) {
    .wiki-sidebar {
        width: 240px;
    }

    .wiki-main {
        max-width: calc(100% - 240px);
    }

    .wiki-content {
        padding: 20px;
    }

    .markdown-content img {
        max-width: 100%;
    }

    .wiki-article {
        padding: 15px;
    }

}

@media (max-width: 992px) {
    .wiki-container {
        flex-direction: column;
    }

    .wiki-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border-sidebar);
        display: flex;
        flex-direction: column;
    }

    .wiki-logo {
        padding: 10px 20px;
    }

    .wiki-navigation {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    .wiki-nav-section {
        width: 33.33%;
        padding: 10px;
        margin-bottom: 0;
    }

    .wiki-main {
        max-width: 100%;
    }

    .wiki-content {
        padding: 15px;
    }

    .tutorial-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .wiki-article {
        padding: 15px;
        margin-bottom: 20px;
    }

    .wiki-article img,
    .ql-editor img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 确保在小屏幕上图片居中显示正常 */
    .img-center,
    figure.image.center img,
    .ql-editor p.ql-align-center img,
    .ql-editor .ql-align-center img {
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 调整表格在小屏幕上的显示 */
    .wiki-article table,
    .ql-editor table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* 调整引用块样式 */
    .wiki-article blockquote,
    .ql-editor blockquote {
        margin: 10px 0;
        padding: 8px 12px;
    }
}

@media (max-width: 768px) {
    .wiki-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        /* 强制不换行 */
    }

    .wiki-search {
        flex-grow: 1;
        /* 允许搜索框伸展 */
        flex-shrink: 1;
        /* 允许搜索框收缩 */
        min-width: 100px;
        /* 保证最小宽度 */
        margin-right: 10px;
        /* 与按钮保持间距 */
    }

    .wiki-controls {
        flex-grow: 0;
        /* 不伸展 */
        flex-shrink: 0;
        /* 不收缩 */
    }

    .wiki-navigation {
        flex-direction: column;
    }

    .wiki-nav-section {
        width: 100%;
    }

    .tutorial-list {
        grid-template-columns: 1fr;
    }

    .wiki-article h1 {
        padding-bottom: 8px;
        margin-bottom: 15px;
    }


    .wiki-article h2 {
        margin: 20px 0 10px;
    }

    .wiki-article h3 {
        margin: 15px 0 8px;
    }

    .wiki-footer {
        flex-direction: column;
        gap: 10px;
    }

    .wiki-footer-nav {
        width: 100%;
    }

    .wiki-next a {
        justify-content: flex-start;
    }

    .wiki-article {
        padding: 12px;
    }


    .wiki-metadata {
        margin-bottom: 15px;
        font-size: 13px;
    }

    .wiki-summary {
        padding: 14px;
        margin-bottom: 1em;
        font-size: 15px;
        line-height: 1.7;
    }

    /* 改进移动端的图片显示 */
    .ql-editor img,
    .wiki-article img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border-radius: var(--radius-sm, 4px);
    }

    /* 列表样式调整 */
    .wiki-article ul,
    .wiki-article ol,
    .ql-editor ul,
    .ql-editor ol {
        padding-left: 20px;
    }
}

@media (max-width: 576px) {
    .wiki-logo h1 {
        font-size: 16px;
    }

    .wiki-logo img {
        height: 24px;
    }

    .wiki-header {
        height: auto;
        padding: 10px 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .wiki-search {
        width: 100%;
    }

    .wiki-controls {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

/* 在更小的屏幕上进一步调整 */
@media (max-width: 480px) {
    .wiki-search input {
        max-width: 120px;
        /* 限制输入框最大宽度 */
    }

    .wiki-metadata {
        font-size: 0.9em;
        /* 稍微缩小字体 */
    }

    .wiki-article {
        padding: 10px;
    }

    .wiki-article h1 {
        padding-bottom: 6px;
    }


    .wiki-summary {
        padding: 12px;
        font-size: 14px;
        margin-bottom: 1em;
        line-height: 1.7;
    }

    /* 优化代码块显示 */
    .ql-editor pre,
    .wiki-article pre {
        padding: 12px;
        font-size: 14px;
        line-height: 1.6;
    }

    /* 优化行内代码显示 */
    .ql-editor code,
    .wiki-article code {
        padding: 2px 5px;
        font-size: 13px;
    }

    /* 缩小表格内边距 */
    .wiki-article table th,
    .wiki-article table td,
    .ql-editor table th,
    .ql-editor table td {
        padding: 6px 8px;
        font-size: 13px;
    }

    /* Figure和caption样式 */
    figure.image figcaption {
        font-size: 0.85em;
        margin-top: 5px;
    }

    /* 调整blockquote样式 */
    .wiki-article blockquote,
    .ql-editor blockquote {
        padding: 10px 12px;
        margin: 1em 0;
        font-size: 14px;
        line-height: 1.7;
    }
}

/* 超小屏幕手机 */
@media (max-width: 360px) {
    .wiki-article {
        padding: 8px;
    }

    .wiki-summary {
        padding: 10px;
        font-size: 13px;
        line-height: 1.7;
    }
}

/* 主题切换按钮样式增强 */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--border-input);
    color: var(--text-nav);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
    background-color: var(--bg-btn-hover);
    color: var(--accent);
    border-color: var(--accent);
}

.dark-theme .theme-toggle-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f8f9fa;
}

.dark-theme .theme-toggle-btn:hover,
.dark-theme .theme-toggle-btn:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--accent);
    border-color: var(--accent);
}

/* 确保在移动设备上主题切换按钮明显可见 */
@media (max-width: 768px) {
    .theme-toggle-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
        position: relative;
        z-index: 10;
    }
}

/* 在浅色主题下的额外适配 */
.light-theme .wiki-sidebar {
    background-color: #fff;
    border-right-color: var(--border-sidebar);
}

.light-theme .wiki-header {
    background-color: #fff;
    box-shadow: none;
}

.light-theme .wiki-search input {
    background-color: var(--bg-input);
    border-color: var(--border-input);
}

.light-theme .wiki-article {
    color: #333;
}