// 导入全局样式变量
@import '@/styles/variables.scss';

// ===== VIP 用户选择器样式 =====

.vip-selector-modal {
    .ant-modal-body {
        padding: 0;
    }
}

.vip-selector-container {
    display: flex;
    height: $spacing-12 * 4;  // 500px
    overflow: hidden;
}

// 左侧：部门树
.vip-selector-left {
    width: $sidebar-width-md;  // 240px
    border-right: 1px solid $border-light;
    padding: $spacing-4;
    display: flex;
    flex-direction: column;
    background: $bg-tertiary;

    .section-title {
        font-size: $font-md;
        font-weight: $font-weight-semibold;
        color: $text-primary;
        margin-bottom: $spacing-3;
        display: flex;
        align-items: center;
        gap: $spacing-2;

        .iconify {
            font-size: $icon-lg;
            color: $primary-color;
        }
    }

    .ant-tree {
        flex: 1;
        overflow-y: auto;
        background: transparent;
        font-size: $font-sm;

        .ant-tree-treenode {
            padding: $spacing-1 0;
            transition: all 0.2s ease;

            &:hover {
                background: rgba($primary-color, 0.05);
                border-radius: $radius-sm;
            }
        }

        .ant-tree-node-selected {
            background: rgba($primary-color, 0.1) !important;
            color: $primary-color;
            font-weight: $font-weight-medium;
        }
    }

    .dept-divider {
        margin: $spacing-4 0;
    }

    .selected-count {
        font-size: $font-sm;
        color: $text-secondary;
        text-align: center;
        padding: $spacing-2;
        background: $bg-secondary;
        border-radius: $radius-md;
    }
}

// 右侧：用户列表
.vip-selector-right {
    flex: 1;
    padding: $spacing-4;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .section-title {
        font-size: $font-md;
        font-weight: $font-weight-semibold;
        color: $text-primary;
        margin-bottom: $spacing-3;
        display: flex;
        align-items: center;
        gap: $spacing-2;

        .iconify {
            font-size: $icon-lg;
            color: $primary-color;
        }

        .dept-filter-tag {
            margin-left: $spacing-2;
            padding: $spacing-1 $spacing-md;
            background: rgba($primary-color, 0.1);
            color: $primary-color;
            border-radius: $radius-full;
            font-size: $font-xs;
            font-weight: $font-weight-medium;
        }
    }

    .filter-bar {
        margin-bottom: $spacing-3;
        padding: $spacing-md;
        background: $bg-tertiary;
        border-radius: $radius-lg;
    }

    .ant-table {
        flex: 1;
        overflow-y: auto;
        font-size: $font-sm;

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

        .ant-table-tbody > tr:hover {
            background: rgba($primary-color, 0.05);
        }

        .ant-table-selection-column {
            width: $spacing-10;  // 50px
        }
    }
}

// 响应式适配
@media (max-width: $screen-md) {
    .vip-selector-container {
        flex-direction: column;
        height: $spacing-12 * 4.8;  // 600px
    }

    .vip-selector-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid $border-light;
        max-height: $spacing-12 * 3;  // 200px
    }

    .vip-selector-right {
        max-height: $spacing-12 * 4;  // 400px
    }
}
