@use './variables.scss' as *;
// Variables imported via main entry point with @/ alias

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

// 通用隐藏滚动条类
.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;
    --primary-light: $primary-light;
    --primary-dark: $primary-dark;
    --text-color: $theme-text-color;
    --text-primary: $text-primary;
    --text-secondary: $text-secondary;
    --text-hint: $text-hint;
    --text-disabled: $text-disabled;
    --border-radius: $border-radius-base;
    --success-color: $success-color;
    --success-light: $success-light;
    --success-dark: $success-dark;
    --warning-color: $warning-color;
    --warning-light: $warning-light;
    --warning-dark: $warning-dark;
    --error-color: $error-color;
    --error-light: $error-light;
    --error-dark: $error-dark;
    --info-color: $info-color;
    --bg-primary: $bg-primary;
    --bg-secondary: $bg-secondary;
    --bg-tertiary: $bg-tertiary;
    --border-base: $border-base;
    --border-light: $border-light;
    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 Design 默认样式
.ant-btn {
    border-radius: $radius-lg;  // 8px - follow global specs
    transition: $transition-base;

    // Primary 按钮
    &.ant-btn-primary {
        background: $primary-color !important;
        border-color: $primary-color !important;
        color: #ffffff !important;
        box-shadow: $shadow-sm;

        &:hover {
            background: $primary-light !important;
            border-color: $primary-light !important;
            color: #ffffff !important;
            box-shadow: $shadow-md;
        }

        &:active {
            background: $primary-dark !important;
            border-color: $primary-dark !important;
            color: #ffffff !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

        &:disabled {
            background: $bg-tertiary !important;
            border-color: $border-base !important;
            color: $text-disabled !important;
            box-shadow: none !important;
        }
    }

    // Default 按钮
    &.ant-btn-default {
        background: $bg-secondary;
        border-color: $border-base;
        color: $text-primary;

        &:hover {
            border-color: $primary-light;
            color: $primary-light;
        }

        &:active {
            border-color: $primary-dark;
            color: $primary-dark;
        }
    }

    // Text 按钮
    &.ant-btn-text {
        color: $text-primary;

        &:hover {
            background: $bg-tertiary;
            color: $primary-color;
        }

        &:active {
            color: $primary-dark;
        }
    }

    // Link 按钮
    &.ant-btn-link {
        color: $primary-color;

        &:hover {
            color: $primary-light;
        }

        &:active {
            color: $primary-dark;
        }
    }
}

// 输入框组件
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-input-password {
    border-radius: $radius-lg !important;

    &:hover,
    &:focus {
        border-color: $primary-color !important;
    }
}

.ant-input-affix-wrapper-focused,
.ant-input-affix-wrapper:focus {
    border-color: $primary-color !important;
    box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
}

// 下拉选择框
.ant-select {
    .ant-select-selector {
        border-radius: $radius-lg !important;

        &:hover,
        &:focus {
            border-color: $primary-color !important;
        }
    }

    &.ant-select-focused .ant-select-selector {
        border-color: $primary-color !important;
        box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
    }
}

// 下拉菜单
.ant-select-dropdown,
.ant-dropdown {
    border-radius: $radius-lg !important;
    box-shadow: $shadow-lg !important;
}

// 模态框
.ant-modal {
    border-radius: $radius-2xl !important;

    .ant-modal-header {
        border-radius: $radius-2xl $radius-2xl 0 0 !important;
        border-bottom: 1px solid $border-base;
    }

    .ant-modal-footer {
        border-top: 1px solid $border-base;

        .ant-btn {
            border-radius: $radius-lg;
        }
    }
}

// 抽屉
.ant-drawer {
    .ant-drawer-header {
        border-bottom: 1px solid $border-base;
    }

    .ant-drawer-footer {
        border-top: 1px solid $border-base;
        border-radius: 0;

        .ant-btn {
            border-radius: $radius-lg;
        }
    }
}

// 表格
.ant-table {
    border-radius: $radius-lg !important;
    overflow: hidden;

    thead {
        .ant-table-cell {
            background: $bg-tertiary;
            font-weight: $font-weight-semibold;
            color: $text-primary;
        }
    }

    tbody {
        .ant-table-row {
            &:hover {
                background: $bg-hover !important;
            }
        }

        .ant-table-cell {
            border-bottom-color: $border-light;
        }
    }
}

// 卡片
.ant-card {
    border-radius: $radius-xl !important;
    border: 1px solid $border-light !important;
    box-shadow: $shadow-sm;

    &:hover {
        box-shadow: $shadow-md;
    }

    .ant-card-head {
        border-radius: $radius-xl $radius-xl 0 0 !important;
        font-weight: $font-weight-semibold;
    }

    .ant-card-body {
        padding: $spacing-4;
    }
}

// 标签
.ant-tag {
    border-radius: $radius-md !important;
    padding: $spacing-1 $spacing-2;
    font-size: $font-sm;

    &.ant-tag-processing {
        background: $tag-bg-blue !important;
        color: $tag-text-blue !important;
        border-color: transparent !important;
    }

    &.ant-tag-success {
        background: $tag-bg-teal !important;
        color: $tag-text-teal !important;
        border-color: transparent !important;
    }

    &.ant-tag-warning {
        background: $tag-bg-amber !important;
        color: $tag-text-amber !important;
        border-color: transparent !important;
    }

    &.ant-tag-error {
        background: $tag-bg-rose !important;
        color: $tag-text-rose !important;
        border-color: transparent !important;
    }
}

// 消息提示
.ant-message {
    .ant-message-notice-content {
        border-radius: $radius-lg;
        box-shadow: $shadow-lg;
    }
}

// 通知
.ant-notification-notice {
    border-radius: $radius-lg !important;
    box-shadow: $shadow-lg !important;
}

// 弹出框
.ant-popover {
    .ant-popover-arrow {
        width: 10px;
        height: 10px;

        &::before {
            background: $bg-secondary;
        }
    }

    .ant-popover-inner {
        border-radius: $radius-lg !important;
        box-shadow: $shadow-lg !important;
    }

    .ant-popover-inner-content {
        border-radius: $radius-lg;
    }
}

// 工具提示
.ant-tooltip {
    // 箭头 - Ant Design 5.x 使用 ::after 伪元素创建三角形
    .ant-tooltip-arrow {
        &::after {
            position: absolute;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            content: '';
        }
    }

    // 上方 tooltip - 箭头向下
    &.ant-tooltip-placement-top,
    &[class*='placement-top'] {
        .ant-tooltip-arrow::after {
            border-top: none;
            border-bottom-color: $text-primary !important;
        }
    }

    // 下方 tooltip - 箭头向上
    &.ant-tooltip-placement-bottom,
    &[class*='placement-bottom'] {
        .ant-tooltip-arrow::after {
            border-bottom: none;
            border-top-color: $text-primary !important;
        }
    }

    // 左侧 tooltip - 箭头向右
    &.ant-tooltip-placement-left,
    &[class*='placement-left'] {
        .ant-tooltip-arrow::after {
            border-left: none;
            border-right-color: $text-primary !important;
        }
    }

    // 右侧 tooltip - 箭头向左
    &.ant-tooltip-placement-right,
    &[class*='placement-right'] {
        .ant-tooltip-arrow::after {
            border-right: none;
            border-left-color: $text-primary !important;
        }
    }

    .ant-tooltip-inner {
        border-radius: $radius-md !important;
        background: $text-primary !important;
        padding: $spacing-2 $spacing-3 !important;
        font-size: $font-sm !important;
        color: $bg-secondary !important;
    }
}

// 表单
.ant-form-item-label > label {
    font-weight: $font-weight-medium;
    color: $text-primary;
}

// 单选框和复选框
.ant-radio-wrapper,
.ant-checkbox-wrapper {
    font-size: $font-base;
    color: $text-primary;
}

.ant-radio-inner,
.ant-checkbox-inner {
    border-radius: $radius-sm !important;
}

// 步骤条
.ant-steps {
    .ant-steps-item-icon {
        border-radius: $radius-full !important;
    }

    .ant-steps-item-title {
        font-weight: $font-weight-medium;
    }
}

// 日期选择器
.ant-picker {
    border-radius: $radius-lg !important;

    &:hover,
    &:focus {
        border-color: $primary-color !important;
    }

    &.ant-picker-focused {
        border-color: $primary-color !important;
        box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
    }
}

.ant-picker-panel-container {
    border-radius: $radius-lg !important;
}

// 上传组件
.ant-upload {
    border-radius: $radius-lg !important;

    &.ant-upload-drag {
        border-radius: $radius-xl !important;
        border-color: $border-base;

        &:hover {
            border-color: $primary-color !important;
        }
    }
}

// 列表
.ant-list {
    .ant-list-item {
        border-radius: $radius-lg;
        padding: $spacing-3 $spacing-4;

        &:hover {
            background: $bg-hover;
        }
    }
}

// 分割线
.ant-divider {
    border-color: $border-light;
    margin: $spacing-4 0;
}

// ==================== 排序按钮组 ====================
.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($primary-light, 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;
        }
    }
}
