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

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

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

.vip-selector-container {
    display: flex;
    height: 500px;
    overflow: hidden;
}

// 左侧：部门树
.vip-selector-left {
    width: 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: fade(@primary-color, 5%);
                border-radius: @radius-sm;
            }
        }

        .ant-tree-node-selected {
            background: fade(@primary-color, 10%) !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: 2px 8px;
            background: fade(@primary-color, 10%);
            color: @primary-color;
            border-radius: @radius-full;
            font-size: @font-xs;
            font-weight: @font-weight-medium;
        }
    }

    .filter-bar {
        margin-bottom: @spacing-3;
        padding: @spacing-3;
        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: fade(@primary-color, 5%);
        }

        .ant-table-selection-column {
            width: 50px;
        }
    }
}

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

    .vip-selector-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid @border-light;
        max-height: 200px;
    }

    .vip-selector-right {
        max-height: 400px;
    }
}