// Variables imported via main entry point with @/ alias
@import './variables.scss';

// ===== 隐藏式滚动条（全局） =====
// 适用于所有内容区域，保持界面简洁

// 通用隐藏滚动条类
.hide-scrollbar {
    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // IE/Edge
    
    &::-webkit-scrollbar {
        display: none; // Chrome/Safari/Opera
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    /* 不设置 overflow: hidden，允许页面滚动 */
    background: $bg-primary; /* 设置全局背景色，避免滚动时出现白色空白 */
    
    // 隐藏根元素滚动条
    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // IE/Edge
    
    &::-webkit-scrollbar {
        display: none; // Chrome/Safari/Opera
    }
}

#root {
    height: 100%;
    width: 100%;
    /* 不设置 overflow: hidden，允许内容区域滚动 */
    font-size: $font-size-base;
    color: $theme-text-color !important;
    // Ant-Design 主题 - 属性
    --primary-color: $primary-color;
    --text-color: $theme-text-color;
    --border-radius: $border-radius-base;
    background: $bg-primary; /* 设置背景色 */
    
    // 隐藏滚动条
    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // IE/Edge
    
    &::-webkit-scrollbar {
        display: none; // Chrome/Safari/Opera
    }
}

p {
    margin: 0;
}

a,
a:hover,
a:active {
    cursor: pointer;
    font-size: $font-size-base;
    color: $primary-color;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

// ==================== 全局工具类 ====================

.text-primary {
    color: $primary-color !important;
}

.text-success {
    color: $success-color !important;
}

.text-warning {
    color: $warning-color !important;
}

.text-error {
    color: $error-color !important;
}

// 路由加载样式
.router-lazyLoad {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// ==================== Markdown 预览样式 ====================

.markdown-preview {
    img {
        max-width: 100%;
        width: 100%;
        height: auto;
        display: block;
    }

    h1 {
        font-size: $font-4xl;  // 20px
        color: $text-primary;
        margin: 2px 0;
        line-height: $line-height-tight;  // 1.1
    }

    h2 {
        font-size: $font-3xl;  // 18px
        color: $text-primary;
        margin: 2px 0;
        line-height: $line-height-tight;  // 1.1
    }

    h3 {
        font-size: $font-2xl;  // 16px
        color: $text-primary;
        margin: 2px 0;
        line-height: $line-height-tight;  // 1.1
    }

    h4 {
        font-size: $font-lg;  // 14px
        color: $text-primary;
        margin: 2px 0;
        line-height: $line-height-tight;  // 1.1
    }

    h5, h6 {
        font-size: $font-base;  // 12px
        color: $text-primary;
        margin: 2px 0;
        line-height: $line-height-tight;  // 1.1
    }

    p {
        font-size: $font-base;
        color: $text-secondary;
        line-height: $line-height-base;  // 1.3
    }
}

// Ant Design typography 样式
.ant-typography {
    h1 {
        font-size: $font-4xl;  // 20px
        color: $text-primary;
        margin: 2px 0;
        line-height: $line-height-tight;  // 1.1
    }

    h2 {
        font-size: $font-3xl;  // 18px
        color: $text-primary;
        margin: 2px 0;
        line-height: $line-height-tight;  // 1.1
    }

    h3 {
        font-size: $font-2xl;  // 16px
        color: $text-primary;
        margin: 2px 0;
        line-height: $line-height-tight;  // 1.1
    }

    p {
        font-size: $font-base;
        color: $text-secondary;
        line-height: $line-height-base;  // 1.3
    }
}

// ==================== Ant Design 覆盖 ====================

// Ant-Design 主题
.ant-menu-inline {
    border: none !important;
}

.ant-menu-inline-collapsed {
    border: none !important;
}

// 全局按钮样式
.ant-btn-primary {
    background: $primary-color;
    border: 1px solid $primary-color;
    color: #ffffff;
    transition: $transition-base;
    box-shadow: $shadow-sm;
    
    &:hover {
        background: $primary-light;
        border-color: $primary-light;
        color: #ffffff;
    }
    
    &:active {
        background: $primary-dark;
        border-color: $primary-dark;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        transform: translateY(0);
    }
    
    &:focus {
        background: $primary-color;
        border-color: $primary-color;
        color: #ffffff;
        box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
    }
    
    &:disabled {
        background: $bg-tertiary;
        border-color: $border-base;
        color: $text-disabled;
        box-shadow: none;
        transform: none;
    }
}

// ==================== 排序按钮组 ====================
.sort-buttons {
    border: 1px solid $border-base;
    border-radius: $radius-xl;
    overflow: hidden;
    
    .sort-btn {
        padding: $spacing-2 $spacing-4;
        background: $bg-secondary;
        border: none;
        border-right: 1px solid $border-base;
        font-size: $font-md;
        font-weight: $font-weight-medium;
        color: $text-secondary;
        cursor: pointer;
        transition: $transition-base;
        
        &:last-child {
            border-right: none;
        }
        
        &:hover {
            background: $bg-hover;
            color: $text-primary;
        }
        
        &.active {
            background: $icon-bg-blue;
            color: $primary-color;
            font-weight: $font-weight-semibold;
        }
    }
}

.filter-btn {
    width: $search-height;
    height: $search-height;
    border: 1px solid rgba(0, 122, 153, 0.6);
    background: $icon-bg-blue;
    border-radius: $radius-xl;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: $transition-base;
    
    .iconify {
        font-size: $icon-lg;
        color: $primary-color;
    }
}

// ==================== 全局布局容器 ====================

// 页面容器（仅控制布局，不覆盖组件）
.page-container {
    padding: $spacing-4 $spacing-6;
    min-height: calc(100vh - $header-height);
    background: $bg-primary;
}

// 内容区块（通用容器）
.content-section {
    margin-bottom: $spacing-4;  // 16px - 紧凑间距
    padding: $spacing-3;
    background: $bg-secondary;
    border-radius: $radius-lg;
}

// 区块间距
.section-gap {
    margin-bottom: $spacing-5;
}

// ==================== 列表头部 ====================
// 用于页面标题区域（与 PageLayout 解耦后直接使用）

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: $spacing-4;
    padding-bottom: $spacing-3;
    border-bottom: 1px solid $border-base;
    
    // 当下方紧跟 GuideTips 时，移除底部间距
    & + .guide-tips-wrapper {
        margin-top: 0;
    }
    
    // 使用 GuideTips 时的样式
    &.with-tips {
        margin-bottom: $spacing-3;  // 12px - 与 GuideTips 的间距（统一视觉间距）
        padding-bottom: $spacing-3; // 12px
    }
    
    // 带返回按钮的标题栏
    &.with-back {
        align-items: center;
        
        .list-header-title {
            display: flex;
            align-items: center;
            gap: $spacing-1;
            
            .back-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: auto;
                height: 28px;
                padding: 0;
                background: transparent;
                border: none;
                color: $text-secondary;
                cursor: pointer;
                transition: all 0.2s ease;
                flex-shrink: 0;
                
                &:hover {
                    color: $primary-color;
                    
                    .anticon {
                        font-weight: 700;
                        transform: translateX(-2px) scale(1.1);
                    }
                }
                
                .anticon {
                    font-size: 24px;
                    font-weight: 600;
                    transition: all 0.2s ease;
                }
            }
            
            h1, h3 {
                margin: 0;
                line-height: $line-height-tight;  // 1.1
            }
        }
    }
    
    &-title {
        h1, h3 {
            font-size: $font-3xl;
            font-weight: $font-weight-bold;
            color: $text-primary;
            margin: 0 0 $spacing-1 0;
            line-height: $line-height-tight;  // 1.1
        }

        p {
            font-size: $font-sm;
            color: $text-secondary;
            margin: 0;
            line-height: $line-height-base;  // 1.3
        }
    }
    
    &-actions {
        display: flex;
        gap: $spacing-3;
        align-items: center;
        
        .create-btn {
            display: flex;
            align-items: center;
            gap: $spacing-2;
            padding: $spacing-2 $spacing-4;
            background: $primary-color;
            color: #ffffff;
            border: none;
            border-radius: $radius-lg;
            font-size: $font-md;
            font-weight: $font-weight-medium;
            cursor: pointer;
            transition: $transition-base;

            &:hover {
                background: $primary-light;
                transform: translateY(-$spacing-1);
                box-shadow: $shadow-md;
            }

            .iconify {
                font-size: $icon-xl;
            }
        }
    }
}

// ==================== 子页面列表头部（带返回按钮） ====================
// 用于创建/编辑等子页面，只有标题 + 返回按钮，无描述文字

.sub-list-header {
    display: flex;
    align-items: center;
    gap: $spacing-4;
    margin-bottom: $spacing-4;  // 16px - 紧凑间距
    padding-bottom: $spacing-3;
    border-bottom: 1px solid $border-base;
    
    .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: $radius-lg;
        background: $bg-tertiary;
        border: 1px solid $border-base;
        color: $text-secondary;
        cursor: pointer;
        transition: $transition-base;
        flex-shrink: 0;
        
        &:hover {
            background: $border-base;
            color: $primary-color;
            transform: translateX(-$spacing-1);
        }
        
        .iconify {
            font-size: $icon-lg;
        }
    }
    
    .sub-list-title {
        h1, h2 {
            font-size: $font-3xl; // 20px
            font-weight: $font-weight-bold;
            color: $text-primary;
            margin: 0;
            white-space: nowrap;
            line-height: $line-height-tight;  // 1.1
        }
    }
}

// ==================== 立即创建模块 ====================

.create-action-wrapper {
    text-align: right;
    margin-bottom: $spacing-4; // 紧凑一级：24px → 16px
    
    .create-action-btn {
        display: inline-flex;
        align-items: center;
        gap: $spacing-2;
        padding: $spacing-2 $spacing-4;
        background: $primary-color;
        color: #ffffff;
        border: none;
        border-radius: $radius-lg;
        font-size: $font-md;
        font-weight: $font-weight-medium;
        cursor: pointer;
        transition: $transition-base;

        &:hover {
            background: $primary-light;
            transform: translateY(-$spacing-1);
            box-shadow: $shadow-md;
        }

        .iconify {
            font-size: $icon-xl;
        }
    }
}

// ==================== 卡片网格布局 ====================

.app-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-4; // 紧凑一级：24px → 16px
    
    @media (max-width: $screen-xl) {
        grid-template-columns: repeat(3, 1fr);
    }
    
    @media (max-width: $screen-lg) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: $screen-md) {
        grid-template-columns: 1fr;
    }
}

.knowledge-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-4; // 紧凑一级：24px → 16px
    
    @media (max-width: $screen-lg) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: $screen-md) {
        grid-template-columns: 1fr;
    }
}

// ==================== 分页器 ====================

.pagination-container {
    padding: $spacing-4 0;
    display: flex;
    justify-content: flex-end;
    
    .ant-pagination {
        .ant-pagination-item {
            border-radius: $radius-lg;
            border-color: $border-base;
            transition: $transition-base;
            
            &:hover {
                border-color: $primary-color;
                transform: translateY(-$spacing-1);
            }
            
            &.ant-pagination-item-active {
                background: $primary-color;
                border-color: $primary-color;

                a {
                    color: #ffffff;
                }
            }
        }
        
        .ant-pagination-prev,
        .ant-pagination-next {
            .ant-pagination-item-link {
                border-radius: $radius-lg;
                border-color: $border-base;
                transition: $transition-base;
                
                &:hover {
                    border-color: $primary-color;
                    color: $primary-color;
                }
            }
        }
    }
}

// ==================== 响应式适配 ====================

@media (max-width: $screen-md) {
    .sort-buttons {
        flex-wrap: wrap;
        
        .sort-btn {
            flex: 1;
            min-width: 100px;
        }
    }
}

@media (max-width: $screen-sm) {
    .sort-buttons {
        .sort-btn {
            padding: $spacing-1 $spacing-2;
            font-size: $font-sm;
        }
    }
}
