.login-container {
    padding: 24px;

    .search-container {
        margin-bottom: 24px;

        .clear-icon {
            cursor: pointer;
            color: rgba(0, 0, 0, 0.45);
            font-size: 16px;
            transition: color 0.3s;

            &:hover {
                color: rgba(0, 0, 0, 0.75);
            }
        }
    }

    .section {
        margin-bottom: 32px;

        .section-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 16px;
            color: rgba(0, 0, 0, 0.85);
        }

        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
            width: 100%;

            .user-card {
                width: 100%;
                transition: all 0.3s;
                border-radius: 8px;
                background-color: rgba(255, 255, 255, 0.95);

                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                }

                &.selected {
                    border-color: #1890ff;
                    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
                    background-color: rgba(24, 144, 255, 0.02);
                }

                .user-info {
                    text-align: center;

                    .user-name {
                        font-size: 16px;
                        font-weight: 500;
                        color: rgba(0, 0, 0, 0.85);
                        margin-bottom: 4px;
                    }

                    .user-id {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.45);
                        margin-bottom: 4px;
                    }

                    .user-mobile {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.65);
                    }
                }
            }
        }
    }

    .empty-state {
        padding: 48px 0;

        ::ng-deep .ant-empty {
            .ant-empty-image {
                height: 160px;
            }

            .ant-empty-description {
                font-size: 16px;
                color: rgba(0, 0, 0, 0.65);
            }
        }
    }

    .empty-footer {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 16px;
    }
}

// Override ant design styles for large size
:host ::ng-deep {
    .ant-input-lg {
        font-size: 16px;
        padding: 12px 16px;
    }

    .ant-card {
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.95);

        &:hover {
            background-color: rgba(255, 255, 255, 0.98);
        }

        .ant-card-body {
            padding: 20px;
        }
    }

    .ant-empty {
        margin: 32px 0;
    }

    .ant-divider {
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
        font-weight: 500;

        &::before,
        &::after {
            border-top-color: rgba(0, 0, 0, 0.06);
        }
    }

    // Style for input field
    .ant-input-affix-wrapper {
        border-radius: 8px;

        .ant-input {
            border-radius: 8px;
        }

        &:hover,
        &:focus {
            border-color: #40a9ff;
        }
    }
}
