@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-dropdown-menu {
    border-radius: $radius-lg !important;
    padding: $spacing-2;

    .ant-dropdown-menu-item {
        border-radius: $radius-lg !important;
        padding: $spacing-2 $spacing-3;

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

        &.ant-dropdown-menu-item-selected {
            background: rgba($primary-color, 0.1);
            color: $primary-color;
        }
    }

    .ant-dropdown-menu-item-divider {
        margin: $spacing-2 0;
        background-color: $border-light;
    }
}

// 内联菜单项
.ant-menu {
    background: transparent;
    border: none;

    .ant-menu-item {
        border-radius: $radius-lg !important;
        margin: $spacing-1 0;

        &.ant-menu-item-selected {
            background: rgba($primary-color, 0.1);
            color: $primary-color;
        }

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

    .ant-menu-submenu-title {
        border-radius: $radius-lg !important;

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

// 全局按钮样式 - 覆盖 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 {
            background: rgba($primary-color, 0.08);
            border-color: $primary-color;
            color: $primary-color;
        }

        &:active {
            background: rgba($primary-color, 0.15);
            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;
    font-size: $font-base;

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

    &:focus {
        border-color: $primary-color !important;
        box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !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-input::placeholder {
    color: $text-hint;
}

// 数字输入框按钮
.ant-input-number-handler-wrap {
    border-radius: 0 $radius-lg $radius-lg 0 !important;
}

// 文本域
.ant-input-textarea {
    .ant-input {
        border-radius: $radius-lg !important;
    }
}

// 下拉选择框
.ant-select {
    font-size: $font-base;

    .ant-select-selector {
        border-radius: $radius-lg !important;
        border-color: $border-base;
        font-size: $font-base;

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

        &: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-focused .ant-select-arrow {
        color: $primary-color;
    }

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

        .ant-select-item {
            border-radius: $radius-lg !important;
            padding: $spacing-2 $spacing-3;

            &.ant-select-item-option-selected {
                background: rgba($primary-color, 0.1);
                color: $primary-color;
                font-weight: $font-weight-semibold;
            }

            &.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
                background: $bg-hover;
            }
        }
    }

    // 清除按钮
    .ant-select-clear {
        z-index: 2;
    }
}

// 树选择器下拉菜单
.ant-select-tree-dropdown {
    border-radius: $radius-lg !important;

    .ant-select-tree {
        .ant-select-tree-treenode {
            padding: $spacing-1 0;

            &.ant-select-tree-treenode-selected {
                background: rgba($primary-color, 0.1);
            }

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

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

    .ant-dropdown-menu {
        border-radius: $radius-lg !important;

        .ant-dropdown-menu-item,
        .ant-dropdown-menu-submenu-title {
            border-radius: $radius-lg !important;

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

        .ant-dropdown-menu-item-divider {
            margin: $spacing-2 0;
            background-color: $border-light;
        }

        .ant-dropdown-menu-item-danger {
            color: $error-color;

            &:hover {
                background: rgba($error-color, 0.05);
            }
        }
    }
}

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

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

        .ant-modal-title {
            font-size: $font-2xl;
            font-weight: $font-weight-semibold;
            color: $text-primary;
        }
    }

    .ant-modal-close {
        border-radius: $radius-lg;
        transition: $transition-base;

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

    .ant-modal-footer {
        border-top: 1px solid $border-base;
        padding: $spacing-4 $spacing-6;

        .ant-btn {
            border-radius: $radius-lg;
            min-width: 80px;
        }
    }

    .ant-modal-body {
        padding: $spacing-6;
    }
}

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

    .ant-drawer-title {
        font-size: $font-2xl;
        font-weight: $font-weight-semibold;
        color: $text-primary;
    }

    .ant-drawer-close {
        border-radius: $radius-lg;
        transition: $transition-base;

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

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

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

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

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

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

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

        .ant-table-cell {
            border-bottom-color: $border-light;
            padding: $spacing-3 $spacing-4;
        }
    }

    // 表格筛选下拉菜单
    .ant-dropdown {
        .ant-dropdown-menu {
            .ant-dropdown-menu-item {
                border-radius: $radius-lg !important;
            }
        }
    }
}

// 表格展开行
.ant-table-expanded-row {
    .ant-table {
        border-radius: $radius-lg !important;
    }
}

// 卡片
.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-mentions {
    border-radius: $radius-lg !important;

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

    .ant-mentions-dropdown {
        border-radius: $radius-lg !important;

        .ant-mentions-dropdown-menu-item {
            border-radius: $radius-md !important;
            padding: $spacing-2 $spacing-3;

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

            &.ant-mentions-dropdown-menu-item-active {
                background: rgba($primary-color, 0.1);
                color: $primary-color;
            }
        }
    }
}

// 评论
.ant-comment {
    .ant-comment-inner {
        border-radius: $radius-md;
        padding: $spacing-3 $spacing-4;

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

    .ant-comment-avatar {
        border-radius: $radius-full !important;
    }
}

// 结果
.ant-result {
    .ant-result-icon {
        border-radius: $radius-lg;
    }

    .ant-result-title {
        font-weight: $font-weight-semibold;
        color: $text-primary;
    }

    .ant-result-subtitle {
        color: $text-secondary;
    }

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

// 锚点
.ant-anchor {
    .ant-anchor-link {
        border-radius: $radius-md !important;
        padding: $spacing-1 $spacing-2;

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

        &.ant-anchor-link-active {
            background: rgba($primary-color, 0.1);
            color: $primary-color;
        }
    }

    .ant-anchor-link-title {
        border-radius: $radius-md !important;
    }
}

// 图片
.ant-image {
    border-radius: $radius-lg !important;
    overflow: hidden;

    .ant-image-img {
        border-radius: $radius-lg !important;
    }

    .ant-image-mask {
        border-radius: $radius-lg !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-inner {
        border-radius: $radius-lg !important;
        box-shadow: $shadow-lg !important;
    }

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

// 工具提示
.ant-tooltip {
    .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-tabs {
    .ant-tabs-tab {
        border-radius: $radius-lg !important;
        padding: $spacing-2 $spacing-4;

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

        &.ant-tabs-tab-active {
            .ant-tabs-tab-btn {
                color: $primary-color;
                font-weight: $font-weight-semibold;
            }
        }
    }

    .ant-tabs-ink-bar {
        background: $primary-color;
    }

    // 卡片式标签页
    &.ant-tabs-card {
        .ant-tabs-tab {
            border-radius: $radius-lg $radius-lg 0 0 !important;
            border-color: $border-light !important;
            background: $bg-tertiary;

            &.ant-tabs-tab-active {
                background: $bg-secondary;
                border-color: $border-base !important;
            }
        }
    }
}

// 警告提示
.ant-alert {
    border-radius: $radius-lg !important;
    padding: $spacing-3 $spacing-4;

    .ant-alert-message {
        font-weight: $font-weight-semibold;
        color: $text-primary;
    }

    .ant-alert-description {
        font-size: $font-base;
        color: $text-secondary;
    }

    &.ant-alert-success {
        background: rgba($success-color, 0.1);
        border-color: rgba($success-color, 0.2);

        .ant-alert-icon {
            color: $success-color;
        }
    }

    &.ant-alert-warning {
        background: rgba($warning-color, 0.1);
        border-color: rgba($warning-color, 0.2);

        .ant-alert-icon {
            color: $warning-color;
        }
    }

    &.ant-alert-error {
        background: rgba($error-color, 0.1);
        border-color: rgba($error-color, 0.2);

        .ant-alert-icon {
            color: $error-color;
        }
    }

    &.ant-alert-info {
        background: rgba($info-color, 0.1);
        border-color: rgba($info-color, 0.2);

        .ant-alert-icon {
            color: $info-color;
        }
    }
}

// 徽章
.ant-badge {
    .ant-badge-count {
        border-radius: $radius-full !important;
        background: $error-color;
    }

    .ant-badge-dot {
        border-radius: $radius-full !important;
    }
}

// 进度条
.ant-progress {
    .ant-progress-bg {
        border-radius: $radius-full !important;
    }

    &.ant-progress-circle {
        .ant-progress-text {
            font-size: $font-sm;
            color: $text-secondary;
        }
    }
}

// 时间轴
.ant-timeline {
    .ant-timeline-item-head {
        border-radius: $radius-full !important;
        border-width: 2px;

        &.ant-timeline-item-head-blue {
            border-color: $primary-color;
        }

        &.ant-timeline-item-head-green {
            border-color: $success-color;
        }

        &.ant-timeline-item-head-red {
            border-color: $error-color;
        }

        &.ant-timeline-item-head-gray {
            border-color: $text-hint;
        }
    }

    .ant-timeline-item-content {
        color: $text-secondary;
    }
}

// 轮播
.ant-carousel {
    .ant-carousel-dots {
        bottom: $spacing-4;

        li {
            border-radius: $radius-full !important;
            height: 6px;
            width: 6px;

            &.ant-carousel-dots-active {
                width: 24px;
                background: $primary-color;
            }
        }
    }
}

// 折叠面板
.ant-collapse {
    background: $bg-secondary;
    border-radius: $radius-lg !important;
    border: 1px solid $border-light !important;

    .ant-collapse-item {
        border-radius: $radius-lg !important;
        border-bottom: 1px solid $border-light !important;

        &:last-child {
            border-bottom: none !important;
        }

        > .ant-collapse-header {
            border-radius: $radius-lg !important;
            font-weight: $font-weight-semibold;
            color: $text-primary;

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

    .ant-collapse-content {
        border-radius: 0 0 $radius-lg $radius-lg !important;

        .ant-collapse-content-box {
            padding: $spacing-4;
        }
    }
}

// 统计卡片
.ant-statistic {
    .ant-statistic-title {
        font-size: $font-sm;
        color: $text-secondary;
    }

    .ant-statistic-content {
        font-size: $font-3xl;
        font-weight: $font-weight-semibold;
        color: $text-primary;
    }
}

// 骨架屏
.ant-skeleton {
    .ant-skeleton-header {
        .ant-skeleton-avatar {
            border-radius: $radius-full !important;
        }
    }

    .ant-skeleton-content {
        .ant-skeleton-paragraph {
            > li {
                border-radius: $radius-lg !important;
            }
        }

        .ant-skeleton-title {
            border-radius: $radius-lg !important;
        }
    }
}

// 空状态
.ant-empty {
    .ant-empty-description {
        color: $text-secondary;
    }
}

// 描述列表
.ant-descriptions {
    .ant-descriptions-item-label {
        font-weight: $font-weight-semibold;
        color: $text-primary;
        background: $bg-tertiary;
    }

    .ant-descriptions-item-content {
        color: $text-secondary;
    }
}

// 表单
.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-radio-group {
    .ant-radio-button-wrapper {
        border-radius: $radius-md !important;
        height: auto;
        line-height: normal;

        &:first-child {
            border-radius: $radius-md 0 0 $radius-md !important;
        }

        &:last-child {
            border-radius: 0 $radius-md $radius-md 0 !important;
        }

        &.ant-radio-button-wrapper-checked {
            background: rgba($primary-color, 0.1);
            color: $primary-color;
            border-color: $primary-color;
        }

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

// 开关
.ant-switch {
    border-radius: $radius-full !important;
    min-width: 44px;
    height: 22px;
    line-height: 22px;

    &::before {
        border-radius: $radius-full !important;
    }

    &.ant-switch-checked {
        background: $primary-color;

        &::before {
            left: calc(100% - 18px);
        }
    }

    &:hover:not(.ant-switch-disabled):not(.ant-switch-checked) {
        border-color: $primary-color;
    }
}

// 滑块
.ant-slider {
    .ant-slider-track {
        border-radius: $radius-full !important;
    }

    .ant-slider-rail {
        border-radius: $radius-full !important;
    }

    .ant-slider-handle {
        border-radius: $radius-full !important;
        border-color: $primary-color;

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

        &::after {
            border-radius: $radius-full !important;
        }

        &.ant-slider-handle:focus {
            border-color: $primary-color;
        }
    }
}

// 评分
.ant-rate {
    .ant-rate-star {
        border-radius: $radius-sm;

        &:focus {
            outline: none;
        }
    }
}

// 穿梭框
.ant-transfer {
    .ant-transfer-list {
        border-radius: $radius-lg !important;
        border-color: $border-base;

        .ant-transfer-list-header {
            border-radius: $radius-lg $radius-lg 0 0 !important;
            background: $bg-tertiary;
            border-bottom-color: $border-base;
        }

        .ant-transfer-list-content-item {
            border-radius: $radius-md;
            padding: $spacing-2 $spacing-3;

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

// 树形控件
.ant-tree {
    .ant-tree-treenode {
        border-radius: $radius-md !important;
        padding: $spacing-1 0;

        &.ant-tree-treenode-selected {
            background: rgba($primary-color, 0.1);
        }

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

    .ant-tree-node-content-wrapper {
        border-radius: $radius-md !important;
        padding: $spacing-2 $spacing-3;
    }
}

// 日历
.ant-calendar {
    border-radius: $radius-lg !important;
    border-color: $border-base;

    .ant-calendar-header {
        border-radius: $radius-lg $radius-lg 0 0 !important;
        background: $bg-tertiary;
    }

    .ant-calendar-cell {
        .ant-calendar-date {
            border-radius: $radius-md !important;

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

            &.ant-calendar-selected-day {
                background: rgba($primary-color, 0.1);
                color: $primary-color;
            }

            &.ant-calendar-today {
                border-color: $primary-color;
            }
        }
    }
}

// 步骤条
.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;
}

// ==================== 其他弹出层组件圆角 ====================
// 以下组件通过 Portal 挂载到 body，需要在全局样式中定义

// 确认气泡框
.ant-popconfirm {
    .ant-popconfirm-inner {
        border-radius: $radius-lg !important;
    }

    .ant-popconfirm-message {
        font-size: $font-base;
        color: $text-primary;
    }

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

// 级联选择器
.ant-cascader {
    .ant-cascader-input {
        border-radius: $radius-lg !important;
    }
}

.ant-cascader-dropdown {
    border-radius: $radius-lg !important;

    .ant-cascader-menu {
        border-radius: $radius-lg !important;

        .ant-cascader-menu-item {
            border-radius: $radius-lg !important;
            padding: $spacing-2 $spacing-3;

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

            &.ant-cascader-menu-item-active {
                background: rgba($primary-color, 0.1);
                color: $primary-color;
            }
        }
    }
}

// 树选择器
.ant-select-tree {
    .ant-select-tree-treenode {
        border-radius: $radius-lg !important;

        &.ant-select-tree-treenode-selected {
            background: rgba($primary-color, 0.1);
        }

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

// 时间选择器
.ant-picker-time-panel {
    .ant-picker-time-panel-cell {
        border-radius: $radius-lg !important;

        .ant-picker-time-panel-cell-inner {
            border-radius: $radius-lg !important;
            padding: $spacing-2 $spacing-3;

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

            &.ant-picker-time-panel-cell-selected {
                background: rgba($primary-color, 0.1);
                color: $primary-color;
            }
        }
    }
}

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

    .ant-picker-cell {
        &.ant-picker-cell-selected {
            .ant-picker-cell-inner {
                border-radius: $radius-lg !important;
            }
        }

        &:hover {
            .ant-picker-cell-inner {
                background: $bg-hover;
            }
        }
    }

    .ant-picker-cell-inner {
        border-radius: $radius-lg !important;
    }
}

// 分段控制器
.ant-segmented {
    background: $bg-tertiary;
    border-radius: $radius-lg !important;
    padding: $spacing-1;

    .ant-segmented-item {
        border-radius: $radius-md !important;

        &.ant-segmented-item-selected {
            .ant-segmented-item-label {
                color: $primary-color;
            }
        }

        .ant-segmented-item-label {
            border-radius: $radius-md !important;
            padding: $spacing-1 $spacing-2;
        }
    }
}

// ==================== 排序按钮组 ====================
.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;

        // 注意：此处不定义按钮样式，由全局 .ant-btn 统一控制
        // 页面使用 <Button type="primary"> 时自动应用全局按钮样式
    }
}

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

.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
        }
    }
}

// ==================== 立即创建模块 ====================
// 仅定义布局样式，按钮样式由全局 .ant-btn-primary 统一控制

.create-action-wrapper {
    text-align: right;
    margin-bottom: $spacing-4;

    // 按钮样式由全局 .ant-btn 统一控制，此处不重复定义
}

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

.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;
        }
    }
}
